:root{--bg:#e9f9ff;--card:#fff;--ink:#173a5e;--sub:#4f6d86;--pop:#ffcf24;--line:#cdeaf6;
  --n:#8aa0ad;--rr:#2f8ff0;--sr:#a45cf0;--ur:#ee9f00;color-scheme:light}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);line-height:1.6;font-size:16px;
  font-family:'Zen Maru Gothic','Hiragino Maru Gothic ProN','Hiragino Sans',sans-serif;font-weight:500;
  padding:max(20px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(28px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:var(--bg) url(ui/home_bg.webp) center/cover no-repeat}
main{display:grid;gap:16px;max-width:440px;margin:0 auto}
img{display:block;max-width:100%;height:auto}
h1,h2,p{margin:0}
h1,h2{line-height:1.3;text-wrap:balance}
.w{display:inline-block}
.brand{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;color:var(--ink);font-size:20px;font-weight:900;text-decoration:none}
.brand img{width:auto;height:40px}
.card{background:var(--card);border-radius:30px;padding:20px;box-shadow:0 6px 0 rgba(23,58,94,.12)}
.chara{display:grid;gap:10px;justify-items:center;text-align:center;border:6px solid var(--ring)}
.chara .art{width:min(100%,300px)}
.chara h1{font-size:18px;font-weight:900}
.chara h1 b{display:block;white-space:nowrap;font-size:min(31px,calc((min(100vw,440px) - 88px) / var(--len)));font-weight:900}
.meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 8px;color:var(--sub);font-size:14px;font-weight:700}
.rare{border:3px solid var(--ring);border-radius:999px;padding:0 12px;color:var(--ink);font-weight:900}
.ds{font-size:16px}
.about{display:grid;gap:16px}
.about h2{font-size:20px;font-weight:900}
.point{display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px;align-items:start}
.point img{width:56px;height:56px;object-fit:contain}
.point h3{margin:0;font-size:16px;font-weight:900;line-height:1.4}
.point p{color:var(--sub);font-size:14px}
.cta{display:flex;align-items:center;justify-content:center;min-height:60px;border-radius:24px;background:var(--pop);color:var(--ink);font-size:18px;font-weight:900;text-align:center;text-decoration:none;padding:12px 16px;box-shadow:0 6px 0 #dc8f00}
.cta:active{transform:translateY(4px);box-shadow:0 2px 0 #dc8f00}
.soon{background:var(--card);border:3px dashed var(--line);border-radius:24px;padding:12px 16px;text-align:center;font-size:18px;font-weight:900}
.hero{display:grid;gap:12px;text-align:center}
.hero h1{font-size:clamp(25px,7.6vw,32px);font-weight:900}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.trio figure{margin:0;display:grid;gap:4px;justify-items:center}
.trio figcaption{font-size:14px;font-weight:700;line-height:1.3}