/* ==========================================================
   index.css  トップページ専用
   1. ヒーロー⇄3枠（2つの状態を、数pxのスクロールで切り替える）
   2. 各セクション（1画面ぶんの段落。段落ごとにも切り替えが起きる）
   3. お問い合わせフォーム
   ========================================================== */
:root{
  --fs-max:clamp(34px,10.4vw,60px);
  --fs-min:clamp(30px,8.6vw,50px);
}
@media (min-width:900px){
  :root{--fs-max:clamp(38px,5vw,72px);--fs-min:clamp(34px,4vw,52px)}
}

/* ---------- 1. ヒーロー / 3枠 ---------- */
.stage{position:relative;padding-block:24px 48px}
.stage-in{position:relative;display:flex;flex-direction:column;gap:32px}
.lead{position:relative;z-index:2}
.h1{font-family:var(--display);font-weight:400;line-height:1.15;font-size:var(--fs-max)}
.h1 span{display:block;white-space:nowrap}
.sub{margin-top:20px;font-size:clamp(12px,3.7vw,17px);line-height:1.8;color:var(--muted)}
.sub .ln{display:block;white-space:nowrap}
.hero-cta{margin-top:32px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.hero-cta-in{display:flex;flex-wrap:wrap;gap:12px}

.visual{display:none;position:relative;width:min(100%,440px);margin-inline:auto}
.art{position:relative;width:100%}
.art picture{display:contents}
.art img{display:block;width:100%;height:auto}

.sns-stage{margin-top:8px}

.grid{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(120px,auto);gap:12px}
.slot{min-width:0}
.tile{display:flex;flex-direction:column;justify-content:space-between;gap:24px;height:100%;padding:32px;border-radius:28px;text-decoration:none;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.tile:hover{transform:translateY(-6px);box-shadow:0 18px 40px -22px rgba(18,18,20,.45)}
.tile .eyebrow{font-size:14px;font-weight:700;letter-spacing:.12em}
.tile .t-title{font-family:var(--display);font-size:30px;line-height:1.25;margin-top:8px}
.tile .t-text{margin-top:10px;font-size:15px;line-height:1.7}
.tile .t-go{font-size:16px;font-weight:700}
.tile.t-apps{background:var(--lime);color:var(--ink)}
.tile.t-apps .t-title{font-size:38px;margin-top:10px}
.tile.t-apps .t-text{font-size:17px;line-height:1.8;max-width:26em;margin-top:14px}
.tile.t-illust{background:var(--ink);color:#ffffff}
.tile.t-work{background:var(--soft);border:2px solid var(--ink);color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{padding:10px 16px;border-radius:14px;background:var(--ink);color:#ffffff;font-weight:700;font-size:14px}
.apps-foot{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}
.strip{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;height:100%;padding:24px;border:2px solid var(--line);border-radius:28px}
.strip p{font-size:20px;font-weight:700;line-height:1.5}

/* 重ねて置くモード（.pinned は index.js が付けます）。
   .stage に .is-grid が付くと、CSSが自分の時間で最後まで動かします。 */
.pinned .stage{--e:0;height:max(700px,calc(100svh - var(--hdr)));overflow:hidden;padding-block:20px 0;transition:--e .75s var(--ease-io)}
.pinned .stage.is-grid{--e:1}
.pinned .stage-in{display:block;height:100%}
.pinned .lead{position:absolute;left:var(--gut);right:var(--gut);top:0;pointer-events:none}
.pinned .h1{opacity:max(0,calc(1 - var(--e) * 2.2));transform:translateY(calc(var(--e) * -26px))}
.pinned .sub{margin-top:14px;opacity:max(0,calc(1 - var(--e) * 2.4))}
.pinned .hero-cta{margin-top:20px;opacity:max(0,calc(1 - var(--e) * 3));pointer-events:auto;transition:visibility 0s}
.pinned .stage.is-grid .hero-cta{visibility:hidden;pointer-events:none;transition:visibility 0s .3s}
/* スマホ：一枚絵は、画面に固定した薄い背景（.bg-char）として、ずっと後ろにいます */
.pinned .visual{display:none;position:absolute;z-index:0;margin:0;pointer-events:none;transition:visibility 0s}
.pinned .art{display:none}
.pinned .stage.is-grid .visual{visibility:hidden;transition:visibility 0s .55s}
.pinned .grid{position:absolute;left:var(--gut);right:var(--gut);top:6px;grid-template-rows:190px 116px 116px 124px;grid-auto-rows:auto}
.pinned .slot{--t:0;opacity:var(--t);transform:translateY(calc((1 - var(--t)) * 90px)) scale(calc(.94 + .06 * var(--t)));pointer-events:none;transition:--t .3s ease}
.pinned .stage.is-grid .slot{--t:1;pointer-events:auto;transition:--t .75s var(--ease) calc(.08s + var(--i,0) * .07s)}
.pinned .sns-stage{position:absolute;left:var(--gut);bottom:14px;margin:0}
/* スマホ：3枠を小さく、文章は省く */
.pinned .tile{padding:18px 22px;gap:10px;border-radius:24px}
.pinned .tile .t-text,.pinned .tile .chips{display:none}
.pinned .tile .t-title{font-size:24px;margin-top:4px}
.pinned .tile.t-apps .t-title{font-size:32px}
.pinned .tile.t-illust,.pinned .tile.t-work{flex-direction:row;align-items:center;justify-content:space-between}
.pinned .tile .t-go{font-size:14px}
.pinned .strip{flex-direction:column;align-items:flex-start;gap:10px;padding:14px 22px}
.pinned .strip p{font-size:17px}
.pinned .strip .btn{min-height:44px;padding:8px 20px;font-size:15px}
.pinned .hero-cta .btn{min-height:46px;padding:10px 20px;font-size:15px}
@media (max-width:480px){.sns-stage .sns-label{display:none}}

@media (min-width:900px){
  .visual{display:block}
  .stage-in{flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:40px}
  .stage-in>.grid,.stage-in>.sns-stage{flex:0 0 100%}
  .grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(230px,auto);gap:16px}
  .slot.apps{grid-column:span 2;grid-row:span 2}
  .slot.cta{grid-column:1/-1;grid-row:auto;min-height:100px}
  .tile.t-apps .t-title{font-size:44px}
  .strip{padding:24px 40px}
  .strip p{font-size:22px}

  .pinned .stage{height:max(700px,calc(100svh - var(--hdr)));padding-block:24px 0}
  .pinned .lead{right:auto;top:calc(min(50%,calc((100svh - var(--hdr) - 24px) / 2)) * (1 - var(--e)));transform:translateY(calc(-50% * (1 - var(--e))))}
  .pinned .sub{margin-top:20px;font-size:clamp(13px,1.45vw,18px)}
  .pinned .hero-cta{margin-top:32px}
  .pinned .hero-cta .btn{min-height:48px;padding:12px 26px;font-size:16px}
  .pinned .visual{display:block;z-index:1;left:auto;right:calc(var(--gut) - 28px);top:min(50%,calc((100svh - var(--hdr) - 24px) / 2));width:min(46%,760px,calc((100svh - var(--hdr) - 26px) * .765));aspect-ratio:auto;background:none;opacity:max(0,calc(1 - var(--e) * 2.4));transform:translate(calc(var(--e) * 120px),-50%) scale(calc(1 - .08 * var(--e)))}
  .pinned .art{display:block}
  .pinned .grid{top:8px;bottom:76px;grid-template-rows:minmax(0,1fr) minmax(0,1fr) 92px;gap:16px}
  .pinned .slot.cta{min-height:0}
  .pinned .tile{padding:26px 30px;gap:14px;border-radius:28px}
  .pinned .tile .t-text,.pinned .tile .chips{display:block}
  .pinned .tile .chips{display:flex}
  .pinned .tile .t-title{font-size:30px;margin-top:8px}
  .pinned .tile.t-apps .t-title{font-size:44px}
  .pinned .tile.t-illust,.pinned .tile.t-work{flex-direction:column;align-items:stretch;justify-content:space-between}
  .pinned .tile .t-go{font-size:16px}
  .pinned .strip{flex-direction:row;align-items:center;padding:20px 40px}
  .pinned .strip p{font-size:22px}
  .pinned .strip .btn{min-height:48px;padding:12px 26px;font-size:16px}
}

/* 読み込み時の登場 */
.js .h1 .l1{animation:blurin 1s var(--ease) .1s both}
.js .h1 .l2{animation:blurin 1s var(--ease) .35s both}
.js .sub{animation:rise .9s var(--ease) .6s backwards}
.js .hero-cta-in{animation:rise .9s var(--ease) .8s both}
.js .sns-stage{animation:rise .9s var(--ease) 1s both}

/* ---------- 2. セクション（1画面ぶんの段落） ---------- */
.sec{padding-block:var(--sp);scroll-margin-top:calc(var(--hdr) + 20px - var(--sp))}
.sec>.wrap{width:100%}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 48px;align-items:end;margin-bottom:44px}
.eyebrow-l{font-size:14px;font-weight:700;letter-spacing:.14em;color:var(--muted)}
.sec h2{font-family:var(--display);font-weight:400;font-size:clamp(30px,4vw,48px);line-height:1.25;margin-top:8px}
.sec-lead{font-size:17px;color:var(--muted);max-width:34em}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.card{display:flex;flex-direction:column;gap:14px;padding:16px 16px 24px;border:2px solid var(--line);border-radius:24px;background:var(--bg)}
.card:hover{border-color:var(--ink);transform:translateY(-6px)}
.thumb{aspect-ratio:4/3;border-radius:14px;background:var(--stripe);display:flex;align-items:center;justify-content:center;text-align:center;font-size:13px;font-weight:700;color:var(--muted);padding:12px}
.card p{font-size:15px;color:var(--muted);padding-inline:8px;line-height:1.7}
.meta{display:flex;flex-wrap:wrap;gap:8px;padding-inline:8px}
.tag{padding:4px 12px;border-radius:999px;background:var(--soft);font-size:13px;font-weight:700}
.more{margin-top:32px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.more span{font-size:15px;color:var(--muted)}
.gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.gallery .thumb{aspect-ratio:1/1;border-radius:20px}
.gallery .thumb:hover{transform:scale(1.03) rotate(-1deg)}
.svc{margin-top:40px;display:grid;gap:0;border-top:2px solid var(--ink)}
.svc-row{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,2fr) auto auto;align-items:center;gap:16px 32px;padding-block:22px;border-bottom:1px solid var(--line)}
.svc-row h3{font-size:20px}
.svc-row p{font-size:15px;color:var(--muted)}
.svc-price{font-weight:700;font-size:15px}
.svc-row .btn{min-height:44px;padding:8px 22px;font-size:15px}

/* ---------- 3. お問い合わせ ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px}
.contact-info{display:flex;flex-direction:column;gap:20px}
.info-list{display:grid;gap:14px;font-size:15px;margin-top:8px}
.info-list dt{font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--muted)}
.info-list dd{margin:2px 0 0;font-weight:500;overflow-wrap:anywhere}
.form{padding:clamp(20px,4vw,40px);border-radius:28px;background:var(--soft);display:flex;flex-direction:column;gap:22px}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field>label,.legend{font-size:14px;font-weight:700}
.req{color:var(--danger);margin-left:4px}
.opt{font-weight:500;color:var(--muted);margin-left:6px}
.input,.select,.textarea{width:100%;min-height:50px;padding:12px 16px;border:2px solid var(--line);border-radius:14px;background:#ffffff;color:var(--ink);font:inherit;font-size:16px;transition:border-color .3s ease,box-shadow .3s ease}
.textarea{min-height:150px;resize:vertical;line-height:1.7}
.input:hover,.select:hover,.textarea:hover{border-color:#a1a1aa}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 4px var(--lime)}
.field.bad .input,.field.bad .textarea{border-color:var(--danger)}
.err{font-size:13px;color:var(--danger);font-weight:700;display:none}
.field.bad .err{display:block}
.opts{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.opts input{position:absolute;opacity:0;width:1px;height:1px}
.opts label{display:inline-flex;align-items:center;min-height:44px;padding:8px 18px;border:2px solid var(--line);border-radius:999px;background:#ffffff;font-size:15px;font-weight:500;cursor:pointer;transition:background .3s ease,border-color .3s ease,color .3s ease,transform .3s var(--ease)}
.opts label:hover{border-color:var(--ink);transform:translateY(-1px)}
.opts input:checked+label{background:var(--ink);border-color:var(--ink);color:#ffffff}
.opts input:focus-visible+label{outline:3px solid var(--ink);outline-offset:3px}
.panel{display:grid;grid-template-rows:0fr;opacity:0;margin-block:-11px;transition:grid-template-rows .55s var(--ease),opacity .4s ease,margin .55s var(--ease)}
.panel.open{grid-template-rows:1fr;opacity:1;margin-block:0}
.panel>.panel-in{overflow:hidden;min-height:0}
.panel-body{display:flex;flex-direction:column;gap:20px;padding:22px;margin-top:2px;border-radius:20px;background:#ffffff;border:2px dashed var(--line)}
.panel-title{font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--muted)}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.consent{display:flex;align-items:flex-start;gap:12px;font-size:14px;line-height:1.6}
.consent input{width:22px;height:22px;margin:1px 0 0;accent-color:var(--ink);flex:none}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.status{display:grid;grid-template-rows:0fr;margin-top:-22px;transition:grid-template-rows .5s var(--ease),margin .5s var(--ease)}
.status.show{grid-template-rows:1fr;margin-top:0}
.status>div{overflow:hidden;min-height:0}
.status p{margin-top:4px;padding:16px 20px;border-radius:16px;background:var(--lime);font-weight:700;font-size:15px;line-height:1.6}
.status.fail p{background:#fde8e6;color:var(--danger)}
.status-link{color:inherit;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.form-foot .btn:disabled{opacity:.6;cursor:default;transform:none}

@media (max-width:899px){
  .sec-head,.contact-grid{grid-template-columns:minmax(0,1fr)}
  .cards{grid-template-columns:minmax(0,1fr)}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
  .svc-row{grid-template-columns:minmax(0,1fr) auto;gap:8px 16px}
  .svc-row p{grid-column:1/-1;order:3}
  .two{grid-template-columns:minmax(0,1fr)}
}

/* ---------- スマホ：メインビジュアルを、ずっと後ろに薄く ---------- */
.bg-char{display:none}
@media (max-width:899px){
  .bg-char{display:flex;position:fixed;left:0;right:0;bottom:0;height:calc(100svh - var(--hdr));z-index:-1;align-items:flex-end;justify-content:center;pointer-events:none;overflow:hidden}
  .bg-char picture{display:contents}
  .bg-char img{display:block;height:90%;width:auto;max-width:125%;object-fit:contain;opacity:.13}
}

/* ---------- パソコン：ヒーローに散らした「かざり」 ---------- */
.toys{display:none}
.say{display:none}
.toys-sw{display:none}
.clock,.burst,.rank-btn,.rank{display:none}
@media (min-width:900px) and (pointer:fine){
  .toys.ready{display:block;position:fixed;inset:0;z-index:30;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s .35s}
  .toys.on{opacity:1;visibility:visible;transition:opacity .6s ease .15s}
  .toy{position:absolute;left:0;top:0;width:88px;height:88px;pointer-events:auto;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;filter:drop-shadow(0 6px 6px rgba(18,18,20,.18));will-change:transform}
  .toy.grab{cursor:grabbing;filter:drop-shadow(0 14px 12px rgba(18,18,20,.25))}
  .toy svg{display:block;pointer-events:none}

  .toys-sw{display:inline-flex;position:fixed;z-index:35;top:calc(var(--hdr) + 14px);right:20px;align-items:center;gap:10px;min-height:40px;padding:6px 4px 6px 10px;border:0;border-radius:999px;background:transparent;color:var(--ink);font:inherit;font-size:13px;font-weight:700;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s .35s}
  .toys-sw.show{opacity:1;visibility:visible;transition:opacity .5s ease .3s}
  .toys-sw:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
  .toys-sw .trk{position:relative;width:40px;height:24px;border:2px solid var(--ink);border-radius:999px;background:var(--soft);transition:background .3s ease}
  .toys-sw .trk::after{content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:var(--ink);transition:transform .35s var(--ease)}
  .toys-sw[aria-checked="true"] .trk{background:var(--lime)}
  .toys-sw[aria-checked="true"] .trk::after{transform:translateX(16px)}

  .toy.gone{opacity:0;visibility:hidden;pointer-events:none}
  /* キャラクターのセリフ（左上） */
  .say{display:block;position:absolute;z-index:3;right:72%;top:1%;white-space:nowrap;padding:10px 18px;border:2px solid var(--ink);border-radius:18px;background:#ffffff;color:var(--ink);font-size:18px;font-weight:700;line-height:1.3;box-shadow:3px 3px 0 var(--ink);opacity:0;visibility:hidden;transform:scale(.6) rotate(-3deg);transform-origin:100% 100%;pointer-events:none;transition:opacity .2s ease,transform .3s cubic-bezier(.3,1.5,.5,1),visibility 0s .3s}
  .say::after{content:"";position:absolute;right:20px;bottom:-9px;width:14px;height:14px;background:#ffffff;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg)}
  .say.show{opacity:1;visibility:visible;transform:scale(1) rotate(-3deg);transition:opacity .2s ease,transform .3s cubic-bezier(.3,1.5,.5,1)}
}

/* メインビジュアル：顔の差し替え（セリフ中）と、ツールボックスに近づけたときの「ポヨン」 */
.art{transform-origin:50% 58%;transition:transform .55s cubic-bezier(.34,1.8,.55,1)}
.art.boing{transform:scale(1.045)}
.art img.talk-img{position:absolute;left:27.031%;top:18.583%;width:26.955%;height:11.15%;max-width:none;opacity:0;pointer-events:none}
.art.talk img.talk-img{opacity:1}

/* ---------- タイム表示とランキング（パソコンのみ） ---------- */
@media (min-width:900px) and (pointer:fine){
  .clock{display:flex;flex-direction:column;align-items:center;gap:.04em;position:fixed;z-index:40;left:50%;top:50%;transform:translate(-50%,-50%);opacity:0;visibility:hidden;pointer-events:none;white-space:nowrap;font-family:var(--display);font-weight:400;font-size:clamp(84px,15vw,210px);line-height:1;color:rgba(0,0,0,.7)}
  .clock .lab{font-size:clamp(20px,3.2vw,44px);line-height:1.2;letter-spacing:.08em}
  .clock .num small{font-size:.5em;margin-left:.08em}
  .clock.show{opacity:1;visibility:visible;animation:clockDrop 1s backwards}
  .clock.show.out{opacity:0;transition:opacity .8s ease}
  /* 勢いよく落ちて、ドンと着地（つぶれて、ぽよんと戻る） */
  @keyframes clockDrop{
    0%{opacity:0;transform:translate(-50%,-130vh) scale(.9,1.25);animation-timing-function:cubic-bezier(.7,0,1,.75)}
    5%{opacity:1}
    30%{opacity:1;transform:translate(-50%,-50%) scale(.9,1.2);animation-timing-function:ease-out}
    37%{transform:translate(-50%,-40%) scale(1.35,.5);animation-timing-function:ease-out}   /* 着地で、ぐしゃっと潰れる */
    55%{transform:translate(-50%,-56%) scale(.95,1.08)}
    72%{transform:translate(-50%,-49%) scale(1.03,.97)}
    100%{opacity:1;transform:translate(-50%,-50%) scale(1,1)}
  }
  /* 着地の瞬間の、薄い集中線 */
  .burst{display:block;position:fixed;z-index:39;inset:-90%;pointer-events:none;opacity:0;visibility:hidden;
    background:
      repeating-conic-gradient(from 3deg at 50% 50%,rgba(0,0,0,.09) 0 .5deg,transparent .5deg 5.3deg),
      repeating-conic-gradient(from 0deg at 50% 50%,rgba(0,0,0,.06) 0 .35deg,transparent .35deg 3.1deg);
    -webkit-mask-image:radial-gradient(circle at 50% 50%,transparent 15vmax,#000 36vmax);
    mask-image:radial-gradient(circle at 50% 50%,transparent 15vmax,#000 36vmax)}
  .burst.hit{visibility:visible;animation:burst 1.05s ease-out both}
  @keyframes burst{0%{opacity:0;transform:scale(.8)}12%{opacity:1}55%{opacity:.75}100%{opacity:0;transform:scale(1.12)}}
  .rank-btn{display:inline-flex;position:fixed;z-index:35;top:calc(var(--hdr) + 58px);right:24px;align-items:center;min-height:34px;padding:4px 14px;border:2px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);font:inherit;font-size:13px;font-weight:700;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s .35s,background .3s ease}
  .rank-btn:hover,.rank-btn[aria-expanded="true"]{background:var(--lime)}
  .rank-btn.show{opacity:1;visibility:visible;transition:opacity .5s ease .3s,background .3s ease}
  .rank-btn:focus-visible,.rank input:focus-visible,.rank button:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
  .rank{display:block;position:fixed;z-index:42;top:calc(var(--hdr) + 104px);right:24px;width:290px;max-height:calc(100vh - var(--hdr) - 130px);overflow:auto;padding:14px 16px 12px;border:2px solid var(--ink);border-radius:18px;background:#fff;color:var(--ink);box-shadow:3px 3px 0 var(--ink);font-size:14px}
  .rank{transition:transform .42s cubic-bezier(.6,0,.9,.5),opacity .3s ease}
  .rank.leave{transform:translateX(calc(100% + 60px));opacity:0}
  .rank[hidden]{display:none}
  .rank-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:16px}
  .rank-x{border:0;background:transparent;font:inherit;font-size:22px;line-height:1;cursor:pointer;color:var(--ink);padding:0 4px}
  .rank-new{margin:0 0 10px;padding:10px;border-radius:12px;background:var(--lime)}
  .rank-new[hidden]{display:none}
  .rank-err{margin:6px 0 0;font-size:12px;font-weight:700;color:var(--danger)}
  .rank-err[hidden]{display:none}
  .rank-t{margin:0 0 8px;font-weight:700}
  .rank-f{display:flex;gap:6px}
  .rank-f input{flex:1;min-width:0;padding:6px 10px;border:2px solid var(--ink);border-radius:10px;background:#fff;color:var(--ink);font:inherit;font-size:14px}
  .rank-f button{padding:6px 14px;border:2px solid var(--ink);border-radius:10px;background:var(--ink);color:#fff;font:inherit;font-size:14px;font-weight:700;cursor:pointer}
  .rank-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
  .rank-l li{display:grid;grid-template-columns:26px 1fr auto;gap:8px;align-items:baseline;padding:4px 6px;border-radius:8px}
  .rank-l li.me{background:var(--lime);font-weight:700}
  .rank-l .no{font-weight:700;text-align:right}
  .rank-l .n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .rank-l .t{font-variant-numeric:tabular-nums}
  .rank-l .empty{display:block;color:var(--ink);opacity:.65}
  .rank-note{margin:8px 0 0;font-size:11px;opacity:.65}
}