/* Scoped demonstration styles. Edit this canonical file alongside references/*.html. */
.ref-ui .scene-playback-example{padding:22px;margin:24px 0;background:#0C1428;color:#F5F5F5;border-radius:22px;color-scheme:dark}
.ref-ui .scene-playback-example h3{font-size:1.125rem;line-height:1.6}
.ref-ui .scene-playback-example .muted{color:#CBD5E1;font-size:.6875rem}
.ref-ui .scene-playback-example .playback-year{font:700 2rem/1.4 Poppins,sans-serif;font-variant-numeric:tabular-nums;margin:20px 0}
.ref-ui .scene-playback-example label{display:block;font-size:.6875rem}
.ref-ui .scene-playback-example input{display:block;width:100%;min-height:44px;padding:0;accent-color:#1E8CFF}
.ref-ui .playback-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:12px 0}
.ref-ui .playback-actions button{background:#1E8CFF;color:#08122B;border:0;min-height:44px;font:inherit;border-radius:999px;padding:10px 20px}
.ref-ui .playback-actions button:disabled{background:#52627C;color:#F5F5F5}
.ref-ui .playback-actions [role=status]{font-size:.6875rem}
.ref-ui .scene-playback-example :focus-visible{outline:3px solid #4DA3FF;outline-offset:2px}

.ref-ui{
  /* ---- CI (VI) ---- */
  --vi:#00BFFF; --g1:#006BFF; --g2:#05396B; --accent:#DA003C; --vi-ink:#231815;
  /* ---- UI tokens ---- */
  --blue:#006BFF; --blue-dk:#05396B; --blue-lt:#00BFFF;
  --tint:#E6F0FF; --tint2:#F2F7FF;
  --paper:#FFFFFF; --ink:#111111; --ink2:#4A4A4A; --ink3:#767676; --ink4:#767676;
  --rule:#E5E5E5; --rule2:#D4D4D4; --gray-out:#CCCCCC;
  --jp:"Noto Sans JP","Hiragino Sans",sans-serif;
  --rm:"Poppins","Helvetica Neue",Arial,sans-serif;
}
.ref-ui *{box-sizing:border-box;min-width:0}
.ref-ui img,.ref-ui svg{max-width:100%}
.ref-ui{scroll-behavior:smooth;scroll-padding-top:76px}
.ref-ui{margin:0;background:var(--paper);color:var(--ink);font-family:var(--jp);font-size:0.9375rem;line-height:1.85;-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-wrap:anywhere}
.ref-ui h1,.ref-ui h2,.ref-ui h3{margin:0}
.ref-ui a{color:var(--blue);text-decoration:none}

/* ---------- frame ---------- */
.ref-ui header.site{position:sticky;top:0;z-index:9;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule);display:flex;align-items:center;gap:14px;padding:12px 22px}
.ref-ui header.site .mark{width:30px;height:30px;flex:none}
.ref-ui header.site .mark svg{display:block;width:100%;height:100%}
.ref-ui header.site .t{font-family:var(--rm);font-weight:700;font-size:0.875rem;letter-spacing:.14em}
.ref-ui header.site .t small{display:block;font-size:0.6875rem;font-weight:600;letter-spacing:.2em;color:var(--ink3);text-transform:uppercase}
.ref-ui .wrap{max-width:1060px;margin:0 auto;padding:0 22px 120px}
.ref-ui .grid{display:grid;grid-template-columns:200px minmax(0,1fr);gap:56px}
@media(max-width:900px){.ref-ui .grid{grid-template-columns:1fr;gap:0}}
.ref-ui nav.toc{position:sticky;top:86px;align-self:start;font-size:0.75rem}
@media(max-width:900px){.ref-ui nav.toc{display:none}}
.ref-ui nav.toc a{display:block;color:var(--ink3);padding:5px 0 5px 14px;border-left:2px solid var(--rule);font-weight:500;letter-spacing:.02em}
.ref-ui nav.toc a:hover{color:var(--ink)}
.ref-ui nav.toc a.num{font-family:var(--rm)}

/* ---------- document typography ---------- */
.ref-ui .hero{padding:88px 0 64px}
.ref-ui .kicker{font-family:var(--rm);font-size:0.6875rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--blue)}
.ref-ui .hero h1{font-family:var(--rm);font-weight:800;font-size:clamp(2.125rem,6vw,3.625rem);line-height:1.08;letter-spacing:.01em;margin:14px 0 22px}
.ref-ui .hero .lead{max-width:640px;color:var(--ink2);font-size:0.9375rem}
.ref-ui .hero .tag{margin-top:26px;font-family:var(--rm);font-weight:700;font-size:0.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink3)}
.ref-ui section{padding:64px 0 8px;border-top:1px solid var(--rule)}
.ref-ui section>.kicker{display:block;margin-bottom:6px}
.ref-ui section>h2{font-size:clamp(1.375rem,3.4vw,1.875rem);font-weight:900;letter-spacing:-.01em;line-height:1.3;margin-bottom:22px}
.ref-ui .note{max-width:680px;color:var(--ink2);margin:0 0 26px}
.ref-ui h3.sub{font-size:0.9375rem;font-weight:900;margin:38px 0 12px;display:flex;align-items:baseline;gap:10px}
.ref-ui h3.sub .en{font-family:var(--rm);font-size:0.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.ref-ui .muted{color:var(--ink3);font-size:0.75rem;line-height:1.7}
.ref-ui code{font-family:"SF Mono",Menlo,Consolas,monospace;font-size:.86em;background:var(--tint2);padding:2px 6px;color:var(--blue-dk)}

/* principles */
.ref-ui .prins{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5px;background:var(--rule);border:1.5px solid var(--rule)}
@media(max-width:760px){.ref-ui .prins{grid-template-columns:1fr}}
.ref-ui .prin{background:var(--paper);padding:24px 22px 22px}
.ref-ui .prin .n{font-family:var(--rm);font-weight:800;font-size:0.75rem;color:var(--blue);letter-spacing:.1em}
.ref-ui .prin h3{font-size:1.0625rem;font-weight:900;margin:8px 0 8px}
.ref-ui .prin p{margin:0;font-size:0.78125rem;color:var(--ink2);line-height:1.8}
.ref-ui .prin .src{margin-top:12px;font-size:0.6875rem;color:var(--ink4);letter-spacing:.04em}

/* logo plates */
.ref-ui .lplates{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
@media(max-width:700px){.ref-ui .lplates{grid-template-columns:1fr}}
.ref-ui .lp{border:1px solid var(--rule);padding:36px 30px;display:flex;align-items:center;justify-content:center;min-height:130px;position:relative}
.ref-ui .lp .cap{position:absolute;left:12px;top:9px;font-family:var(--rm);font-size:0.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink4)}
.ref-ui .lp.on-ink{background:var(--vi-ink)}
.ref-ui .lp.on-ink .cap{color:rgba(255,255,255,.4)}
.ref-ui .lp.on-ink .lg-word{fill:#FFFFFF}
.ref-ui .lp.on-blue{background:var(--vi)}
.ref-ui .lp.on-blue .cap{color:rgba(255,255,255,.6)}
.ref-ui .lp svg{height:44px;width:auto}
.ref-ui .lp.sym svg{height:64px}
.ref-ui .lrow3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:10px}
@media(max-width:700px){.ref-ui .lrow3{grid-template-columns:1fr}}

/* swatches */
.ref-ui .swrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:12px}
.ref-ui .sw{border:1px solid var(--rule)}
.ref-ui .sw .chip{height:86px;position:relative}
.ref-ui .sw .chip .wc{position:absolute;right:8px;bottom:6px;font-family:var(--rm);font-size:0.6875rem;font-weight:700;letter-spacing:.06em;color:rgba(255,255,255,.85)}
.ref-ui .sw .chip .wc.dark{color:rgba(0,0,0,.55)}
.ref-ui .sw .meta{padding:10px 12px}
.ref-ui .sw .nm{font-family:var(--rm);font-weight:700;font-size:0.6875rem;letter-spacing:.08em;text-transform:uppercase}
.ref-ui .sw .hx{font-family:var(--rm);font-size:0.6875rem;color:var(--ink3);margin-top:2px}
.ref-ui .sw .use{font-size:0.6875rem;color:var(--ink2);margin-top:6px;line-height:1.6}

/* tables */
.ref-ui table{width:100%;border-collapse:collapse;font-size:0.78125rem}
.ref-ui th,.ref-ui td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--rule);vertical-align:top}
.ref-ui thead th{background:var(--tint);font-family:var(--rm);font-size:0.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);font-weight:700;border-bottom:1.5px solid var(--blue);white-space:nowrap}
.ref-ui td.n{font-family:var(--rm);font-variant-numeric:tabular-nums;white-space:nowrap}
.ref-ui .scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ref-ui .scroll table{min-width:640px}

/* type specimens */
.ref-ui .spec{border:1px solid var(--rule);padding:26px 26px 22px;margin-bottom:10px}
.ref-ui .spec .lbl{font-family:var(--rm);font-size:0.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin-bottom:12px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.ref-ui .sp-display{font-family:var(--rm);font-weight:800;font-size:clamp(1.875rem,5vw,2.75rem);line-height:1.1;letter-spacing:.01em}
.ref-ui .sp-h1jp{font-weight:900;font-size:clamp(1.375rem,3.6vw,1.875rem);line-height:1.45}
.ref-ui .sp-num{font-family:var(--rm);font-weight:800;font-size:clamp(2.5rem,7vw,4rem);line-height:1;font-variant-numeric:tabular-nums}
.ref-ui .sp-num small{font-size:.35em;font-weight:700;color:var(--ink3)}
.ref-ui .sp-body{max-width:560px;font-size:0.9375rem}
.ref-ui .sp-cap{font-size:0.6875rem;color:var(--ink3)}

/* ==================================================
   component language v4 — Liquid Glass
   glass = controls and reading cards; verify composite contrast and opaque fallback
   ================================================== */
.ref-ui{
  --r-s:14px; --r-m:22px; --r-l:30px;           /* concentric radius scale */
  --glass-bg:rgba(255,255,255,.55);
  --glass-line:rgba(255,255,255,.65);
  --glass-hi:inset 0 1px 0 rgba(255,255,255,.7);
  --float:0 10px 30px rgba(5,57,107,.16), 0 2px 8px rgba(5,57,107,.08);
  --float-s:0 6px 18px rgba(5,57,107,.14);
}
.ref-ui .glass{background:var(--glass-bg);backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6);border:1px solid var(--glass-line);box-shadow:var(--glass-hi),var(--float-s)}
.ref-ui .demo{border:1px solid var(--rule);background:var(--tint2);padding:28px;display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start;margin-bottom:8px;border-radius:var(--r-m)}
.ref-ui .demo .device{background:var(--paper);border:1px solid var(--rule2);border-radius:var(--r-l);width:min(360px,100%);padding:18px 16px}
/* stage: vivid content behind glass */
.ref-ui .stage{position:relative;overflow:hidden;border-radius:var(--r-l);margin-bottom:8px;padding:26px;min-height:340px;display:flex;flex-direction:column;justify-content:space-between;gap:18px}
.ref-ui .stage>:not(.sky){position:relative}

/* buttons — capsules */
.ref-ui button.btn{font:inherit;font-family:var(--jp);font-weight:700;font-size:0.875rem;border:0;border-radius:999px;background:#006BFF;color:#fff;padding:14px 26px;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),var(--float-s);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:transform .2s var(--spring),background .2s ease}
.ref-ui button.btn:hover{background:rgba(0,107,255,1)}
.ref-ui button.btn:active{transform:scale(.94)}
.ref-ui button.btn.sec{background:rgba(255,255,255,.9);color:var(--blue);border:1px solid var(--glass-line);box-shadow:var(--glass-hi),var(--float-s);backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6)}
.ref-ui button.btn.danger{background:rgba(218,0,60,.92)}
.ref-ui button.btn:disabled{background:rgba(160,160,160,.4);color:rgba(255,255,255,.9);box-shadow:none;cursor:not-allowed;backdrop-filter:blur(10px)}
.ref-ui .icbtn{width:46px;height:46px;border-radius:999px;border:1px solid var(--glass-line);background:var(--glass-bg);backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6);box-shadow:var(--glass-hi),var(--float-s);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s var(--spring)}
.ref-ui .icbtn:active{transform:scale(.9)}
.ref-ui .icbtn .gicon{width:25px;height:25px}

/* surfaces */
.ref-ui .card{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-m);padding:20px;width:230px;font-size:0.78125rem}
.ref-ui .card.em{box-shadow:var(--float);border-color:transparent}
.ref-ui .card.dark{background:#141F36;border-color:#344157;color:#fff}
.ref-ui .card .ck{font-family:var(--rm);font-size:0.6875rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);margin-bottom:8px}
.ref-ui .card.dark .ck{color:rgba(255,255,255,.5)}
.ref-ui .card h4{margin:0 0 4px;font-size:0.875rem;font-weight:900}
.ref-ui .card p{margin:0;color:var(--ink2);font-size:0.75rem;line-height:1.7}
.ref-ui .card.dark p{color:rgba(255,255,255,.72)}
.ref-ui .card.glassy{background:var(--glass-bg);border:1px solid var(--glass-line);backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6);box-shadow:var(--glass-hi),var(--float-s);color:var(--blue-dk)}
.ref-ui .card.glassy p{color:rgba(5,57,107,.8)}
.ref-ui .card.glassy .ck{color:rgba(5,57,107,.6)}

/* stat display */
.ref-ui .stat{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-m);padding:16px 16px 14px;min-width:150px}
.ref-ui .stat .v{font-family:var(--rm);font-weight:800;font-size:2rem;line-height:1;font-variant-numeric:tabular-nums}
.ref-ui .stat .v small{font-size:0.75rem;font-weight:700;color:var(--ink3);margin-left:3px}
.ref-ui .stat .d{font-family:var(--rm);font-weight:700;font-size:0.75rem;margin-top:6px}
.ref-ui .stat .d.up{color:var(--blue)}
.ref-ui .stat .d.down{color:var(--accent)}
.ref-ui .stat .l{font-size:0.6875rem;font-weight:500;color:var(--ink3);margin-top:3px;line-height:1.45}
.ref-ui .stat.hero-s{position:relative;overflow:hidden;border:0;color:#fff;box-shadow:var(--float)}
.ref-ui .stat.hero-s>div:not(.sky){position:relative}
.ref-ui .stat.hero-s .v,.ref-ui .stat.hero-s .l{text-shadow:0 1px 8px rgba(0,0,0,.3)}
.ref-ui .stat.hero-s .v{font-size:2.75rem}
.ref-ui .stat.hero-s .l{color:rgba(255,255,255,.85);font-family:var(--rm);font-size:0.6875rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600}

/* progress */
.ref-ui .pbarwrap{width:min(360px,100%);background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-m);padding:18px 16px}
.ref-ui .pbar-l{display:flex;justify-content:space-between;align-items:baseline;font-size:0.75rem;font-weight:700;margin-bottom:6px}
.ref-ui .pbar-l b{font-family:var(--rm);font-variant-numeric:tabular-nums;font-weight:800}
.ref-ui .pbar{height:16px;background:var(--tint2);position:relative;overflow:hidden;margin-bottom:12px;border-radius:999px}
.ref-ui .pbar>i{position:absolute;inset:0 auto 0 0;background:var(--blue);border-radius:999px}
.ref-ui .pbar.alt>i{background:var(--blue-dk)}
.ref-ui .ring{width:108px;height:108px}
.ref-ui .ring svg{transform:rotate(-90deg)}
.ref-ui .ring .bg{fill:none;stroke:var(--tint);stroke-width:11}
.ref-ui .ring .fg{fill:none;stroke:var(--blue);stroke-width:11;stroke-linecap:round}
.ref-ui .ringbox{display:flex;align-items:center;gap:16px;background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-m);padding:18px}
.ref-ui .ringbox .rv{font-family:var(--rm);font-weight:800;font-size:1.875rem;line-height:1;font-variant-numeric:tabular-nums}
.ref-ui .ringbox .rv small{font-size:0.75rem;color:var(--ink3)}
.ref-ui .ringbox .rl{font-size:0.6875rem;color:var(--ink3);margin-top:4px}

/* lists — inset grouped */
.ref-ui .group{background:var(--paper);border-radius:var(--r-m);overflow:hidden;border:1px solid var(--rule)}
.ref-ui .lrow{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:14px 16px;font-size:0.8125rem;position:relative}
.ref-ui .lrow+.lrow::before{content:"";position:absolute;left:16px;right:0;top:0;height:1px;background:var(--rule)}
.ref-ui .lrow .t1{font-weight:700}
.ref-ui .lrow .k{font-family:var(--rm);font-weight:800;font-size:1.0625rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.ref-ui .lrow .k small{display:block;font-size:0.6875rem;color:var(--ink3);text-align:right;font-weight:600}
.ref-ui .mchip{font-family:var(--rm);font-size:0.6875rem;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink2);background:var(--tint2);border:1px solid var(--tint);border-radius:999px;padding:2px 9px;white-space:nowrap;display:inline-block}
.ref-ui .mchip b{color:var(--blue);margin-right:3px;font-weight:800}

/* navigation — floating glass */
.ref-ui .navtop{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 12px 12px 20px;border-radius:999px;width:min(360px,100%)}
.ref-ui .navtop .ttl{font-family:var(--rm);font-weight:700;font-size:0.8125rem;letter-spacing:.12em;color:var(--blue-dk)}
.ref-ui .tabfloat{display:flex;gap:2px;padding:7px;border-radius:999px;width:min(340px,100%);margin:0 auto}
.ref-ui .tabfloat button{flex:1;background:none;border:0;border-radius:999px;min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-family:var(--jp);font-size:0.59375rem;font-weight:700;color:rgba(5,57,107,.75);cursor:pointer;transition:background .25s var(--spring),color .2s ease}
.ref-ui .tabfloat button svg{width:23px;height:23px}
.ref-ui .tabfloat button.on{background:#fff;color:var(--blue)}
.ref-ui .tabfloat button.ai{color:#fff;background:rgba(0,107,255,.88)}
/* dark scene (twilight / night) overrides */
.ref-ui .on-dark .glass{background:rgba(8,16,38,.38);border-color:rgba(255,255,255,.24);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),var(--float-s)}
.ref-ui .on-dark .navtop .ttl{color:#fff}
.ref-ui .on-dark .icbtn{color:#fff;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3)}
.ref-ui .on-dark .tabfloat button{color:rgba(255,255,255,.8)}
.ref-ui .on-dark .tabfloat button.on{background:rgba(255,255,255,.94);color:var(--blue)}

/* sheet */
.ref-ui .gsheet{border-radius:var(--r-l) var(--r-l) 0 0;padding:10px 20px 20px;width:min(360px,100%)}
.ref-ui .gsheet .grab{width:38px;height:5px;border-radius:99px;background:rgba(5,57,107,.25);margin:2px auto 12px}
.ref-ui .gsheet .dt{font-weight:900;font-size:0.9375rem;color:var(--blue-dk)}
.ref-ui .gsheet .dr{display:flex;justify-content:space-between;gap:14px;padding:9px 0;font-size:0.78125rem;color:var(--blue-dk);position:relative}
.ref-ui .gsheet .dr+.dr::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(5,57,107,.14)}
.ref-ui .gsheet .dr b{font-family:var(--rm);font-weight:800;font-variant-numeric:tabular-nums}

/* conversation */
.ref-ui .conv{display:flex;flex-direction:column;gap:10px}
.ref-ui .msg{max-width:85%;padding:11px 15px;font-size:0.78125rem;line-height:1.75;border-radius:var(--r-m)}
.ref-ui .msg.me{align-self:flex-end;background:var(--blue);color:#fff;border-bottom-right-radius:6px}
.ref-ui .msg.ai{align-self:flex-start;background:var(--tint2);border-bottom-left-radius:6px}
.ref-ui .composer{display:flex;gap:8px;margin-top:12px;padding:6px;border-radius:999px}
.ref-ui .composer input{flex:1;font:inherit;font-size:0.8125rem;padding:10px 16px;border:0;border-radius:999px;background:transparent;color:var(--ink)}
.ref-ui .composer input:focus{outline:none}
.ref-ui .composer button{font:inherit;font-weight:700;font-size:0.8125rem;border:0;background:var(--blue);color:#fff;border-radius:999px;width:40px;height:40px;cursor:pointer;flex:none}

/* forms */
.ref-ui .field label{display:block;font-size:0.6875rem;font-weight:700;letter-spacing:.04em;color:var(--ink2);margin:0 0 5px}
.ref-ui .field input{font:inherit;font-family:var(--jp);font-size:0.9375rem;width:100%;padding:12px 16px;border:1px solid var(--rule2);background:var(--paper);border-radius:var(--r-s);transition:border-color .2s,box-shadow .2s}
.ref-ui .field input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,107,255,.15)}
.ref-ui .field .err{border-color:var(--accent)}
.ref-ui .field .err:focus{box-shadow:0 0 0 3px rgba(218,0,60,.15)}
.ref-ui .field .errmsg{font-size:0.6875rem;color:var(--accent);font-weight:700;margin-top:4px}
.ref-ui .toastd{border-radius:999px;padding:12px 22px;font-size:0.8125rem;font-weight:700;display:inline-block;color:var(--blue-dk)}
.ref-ui .empty{border:1px dashed var(--rule2);border-radius:var(--r-m);padding:26px;text-align:center;width:min(360px,100%);background:var(--paper)}
.ref-ui .empty .ev{font-family:var(--rm);font-weight:800;font-size:1.5rem;color:var(--ink4)}
.ref-ui .empty p{margin:6px 0 12px;font-size:0.75rem;color:var(--ink3)}

/* ---------- dark mode ---------- */
.ref-ui .darkdemo{position:relative;overflow:hidden;background:#0C1428;border:1px solid #344157;padding:28px;display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start;margin-bottom:8px}
.ref-ui .darkdemo>:not(.sky){position:relative}
.ref-ui .dstat{background:rgba(10,18,40,.42);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.12);padding:14px 14px 12px;min-width:150px;color:#F5F5F5}
.ref-ui .dstat .v{font-family:var(--rm);font-weight:800;font-size:2rem;line-height:1;font-variant-numeric:tabular-nums}
.ref-ui .dstat .v small{font-size:0.75rem;font-weight:700;color:#8A8A8A;margin-left:3px}
.ref-ui .dstat .d{font-family:var(--rm);font-weight:700;font-size:0.75rem;margin-top:6px}
.ref-ui .dstat .d.up{color:#4DA3FF}
.ref-ui .dstat .d.down{color:#FF4D6D}
.ref-ui .dstat .l{font-size:0.6875rem;color:#8A8A8A;margin-top:3px}
.ref-ui .dbtn{font:inherit;font-family:var(--jp);font-weight:700;font-size:0.875rem;border:0;background:rgba(30,140,255,.88);box-shadow:inset 0 1px 0 rgba(255,255,255,.3);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;padding:13px 22px;cursor:pointer}
.ref-ui .dbtn.sec{background:rgba(255,255,255,.12);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:#fff;border:1px solid rgba(255,255,255,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.ref-ui .dlist{background:rgba(10,18,40,.42);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.12);border-radius:22px;overflow:hidden;width:min(300px,100%);color:#F5F5F5}
.ref-ui .dlist .lrow+.lrow::before{background:rgba(255,255,255,.14)}
.ref-ui .dlist .muted{color:#8A8A8A}
.ref-ui .darkdemo{border-radius:22px}
.ref-ui .dstat{border-radius:22px}
.ref-ui .dbtn{border-radius:999px;border-width:0}
.ref-ui .dbtn.sec{border:1px solid #333}

/* ---------- expressive layer / sky textures ---------- */
.ref-ui{--spring:cubic-bezier(.34,1.56,.64,1)}
.ref-ui .exdemo{position:relative;border:1px solid var(--rule);border-radius:var(--r-l);overflow:hidden;margin-bottom:8px;min-height:300px;display:flex;align-items:flex-end;justify-content:center;padding:26px}
.ref-ui .sky{position:absolute;inset:0;background-size:cover;background-position:center 40%;border-radius:inherit}
.ref-ui .sky.day{background-image:url(/sorah-pjt/design/sky-day.jpg)}
.ref-ui .sky.mo{background-image:url(/sorah-pjt/design/sky-morning.jpg)}
.ref-ui .sky.tw{background-image:url(/sorah-pjt/design/sky-twilight.jpg)}
.ref-ui .sky.night{background-image:url(/sorah-pjt/design/sky-night.jpg)}
@media(prefers-reduced-motion:no-preference){
  .ref-ui .sky{animation:none}
  @keyframes ref-ui-skydrift{from{transform:scale(1)}to{transform:scale(1.1)}}
}
/* dark glass — for twilight/night scenes */
.ref-ui .glass.gdark{background:rgba(8,16,38,.42);border-color:rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),var(--float-s)}
.ref-ui .skytiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:10px}
@media(max-width:700px){.ref-ui .skytiles{grid-template-columns:repeat(2,1fr)}}
.ref-ui .skytile{position:relative;border-radius:var(--r-m);overflow:hidden;min-height:150px;display:flex;align-items:flex-end;padding:14px}
.ref-ui .skytile .nm2{position:relative;font-family:var(--rm);font-weight:700;font-size:0.6875rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.35)}
.ref-ui .exhero{position:relative;color:#fff;text-align:left;align-self:flex-start;margin-right:auto}
.ref-ui .exhero .kk{font-family:var(--rm);font-size:0.6875rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.ref-ui .exhero .vv{font-family:var(--rm);font-weight:800;font-size:3.25rem;line-height:1;font-variant-numeric:tabular-nums;margin-top:8px}
.ref-ui .exhero .vv small{font-size:1rem;color:rgba(255,255,255,.75)}
.ref-ui .glassbar{position:relative;display:flex;gap:4px;padding:6px;border-radius:99px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.32);backdrop-filter:blur(14px) saturate(1.5);-webkit-backdrop-filter:blur(14px) saturate(1.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.ref-ui .glassbar button{font:inherit;font-family:var(--jp);font-size:0.75rem;font-weight:700;border:0;background:transparent;color:rgba(255,255,255,.85);padding:10px 18px;border-radius:99px;cursor:pointer;transition:background .25s var(--spring),transform .25s var(--spring)}
.ref-ui .glassbar button.on{background:rgba(255,255,255,.92);color:var(--blue)}
.ref-ui .glassbar button:active{transform:scale(.94)}
.ref-ui .morph{font:inherit;font-family:var(--jp);font-weight:700;font-size:0.875rem;border:0;background:var(--blue);color:#fff;padding:14px 26px;border-radius:99px;cursor:pointer;transition:border-radius .35s var(--spring),transform .2s var(--spring),background .2s ease}
.ref-ui .morph:hover{border-radius:14px}
.ref-ui .morph:active{transform:scale(.93);border-radius:10px;background:var(--blue)}
.ref-ui .seg{display:inline-flex;position:relative;background:var(--tint2);border:1px solid var(--tint);border-radius:99px;padding:4px}
.ref-ui .seg button{font:inherit;font-family:var(--jp);font-size:0.78125rem;font-weight:700;border:0;background:transparent;color:var(--ink3);padding:9px 20px;border-radius:99px;cursor:pointer;position:relative;z-index:1;transition:color .25s ease}
.ref-ui .seg button.on{color:#fff}
.ref-ui .seg .pill{position:absolute;top:4px;bottom:4px;border-radius:99px;background:var(--blue);transition:left .35s var(--spring),width .35s var(--spring)}
@media(prefers-reduced-motion:reduce){.ref-ui .glassbar button,.ref-ui .morph,.ref-ui .seg .pill{transition:none}}

/* ---------- DESIGN.md ---------- */
.ref-ui .mdblock{position:relative;border:1px solid var(--rule);background:#0F1115;margin-bottom:10px}
.ref-ui .mdblock pre{margin:0;padding:20px 18px;overflow-x:auto;font-family:"SF Mono",Menlo,Consolas,monospace;font-size:0.71875rem;line-height:1.75;color:#D6DEE8}
.ref-ui .mdblock .cbtn{position:absolute;top:10px;right:10px;font:inherit;font-family:var(--rm);font-size:0.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.25);padding:6px 12px;cursor:pointer}
.ref-ui .mdblock .cbtn:hover{background:rgba(255,255,255,.2)}

/* ---------- glass color-plane icons & sky type ---------- */
.ref-ui .gicon{width:52px;height:52px;display:block}
.ref-ui .gicon .sol{fill:var(--blue)}
.ref-ui .gicon .solst{stroke:var(--blue);fill:none;stroke-width:3.6;stroke-linecap:round;stroke-linejoin:round}
.ref-ui .gicon .fro{fill:#CBD9F9;fill-opacity:.82}
.ref-ui .gicon .wfro{fill:#fff;fill-opacity:.95}
.ref-ui .tabfloat .gicon{width:23px;height:23px}
.ref-ui .tabfloat button.ai .sol{fill:#fff}
.ref-ui .tabfloat button.ai .solst{stroke:#fff}
.ref-ui .tabfloat button.ai .fro{fill:#fff;fill-opacity:.38}
.ref-ui .iconsgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:8px}
@media(max-width:700px){.ref-ui .iconsgrid{grid-template-columns:repeat(2,1fr)}}
.ref-ui .icell{border:1px solid var(--rule);border-radius:var(--r-m);background:var(--paper);display:flex;flex-direction:column;align-items:center;gap:10px;padding:24px 10px 16px}
.ref-ui .icell .lb2{font-size:0.6875rem;font-weight:700;color:var(--ink2)}
.ref-ui .skytype{background-image:url(/sorah-pjt/design/sky-day.jpg);background-size:cover;background-position:center 30%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.ref-ui .skytype.tw{background-image:url(/sorah-pjt/design/sky-twilight.jpg)}
.ref-ui .skytype.nt{background-image:url(/sorah-pjt/design/sky-night.jpg)}


/* ---------- v5.2 — SORAH App (2024, AD原案) から取り込んだ要素 ---------- */
.ref-ui h3.sub{flex-wrap:wrap}
.ref-ui .prov{display:inline-block;font-family:var(--rm);font-size:0.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-dk);background:var(--tint);border-radius:999px;padding:3px 9px;margin-left:8px;vertical-align:middle;white-space:nowrap}
.ref-ui .scenes{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:10px}
@media(max-width:700px){.ref-ui .scenes{grid-template-columns:repeat(2,1fr)}}
.ref-ui .scene{border-radius:var(--r-m);overflow:hidden;border:1px solid var(--rule);min-height:170px;display:flex;flex-direction:column;justify-content:flex-end;padding:14px;position:relative}
.ref-ui .scene .sc{position:absolute;left:14px;top:14px;display:flex;gap:6px}
.ref-ui .scene .sc i{display:block;width:28px;height:28px;border-radius:8px;border:1px solid rgba(0,0,0,.08)}
.ref-ui .scene .sc i.wide{width:100px;background:linear-gradient(90deg,#074D92 0 14%,#236AAA 14% 28%,#A2C5E1 28% 42%,#F2F2F2 42% 58%,#F8B3A3 58% 72%,#E86A5A 72% 86%,#F3241C 86% 100%)}
.ref-ui .scene .sk{font-family:var(--rm);font-size:0.6875rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;opacity:.75}
.ref-ui .scene .sv{font-family:var(--rm);font-weight:800;font-size:1.375rem;line-height:1.05;font-variant-numeric:tabular-nums;margin-top:4px}
.ref-ui .scene .sv small{font-size:0.6875rem;font-weight:700;opacity:.75;margin-left:3px}
.ref-ui .scene .sh{font-family:var(--rm);font-size:0.6875rem;letter-spacing:.06em;margin-top:8px;opacity:.7}
.ref-ui .scene.arctic{background:#16223C;color:#7ACAFD}
.ref-ui .scene.forest{background:#FBFBFB;color:#008102}
.ref-ui .scene.river{background:#FFFFFF;color:#006AAD}
.ref-ui .scene.stripes{background:#FFFFFF;color:#F3241C}
/* readout pair */
.ref-ui .readout{display:flex;gap:18px;align-items:flex-end;flex-wrap:wrap}
.ref-ui .readout .rk{font-family:var(--rm);font-size:0.6875rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.ref-ui .readout .rv{font-family:var(--rm);font-weight:800;font-size:1.5rem;line-height:1;font-variant-numeric:tabular-nums;margin-top:3px}
.ref-ui .readout .rv small{font-size:0.75rem;font-weight:700;color:var(--ink3);margin-left:4px}
.ref-ui .readout .sep{width:1px;align-self:stretch;background:var(--rule2)}
.ref-ui .spark{position:relative;height:44px;margin-top:12px;border-radius:8px;background:var(--tint2);overflow:hidden}
.ref-ui .spark svg{position:absolute;inset:0;width:100%;height:100%}
.ref-ui .spark .cur{position:absolute;top:0;bottom:0;width:2px;background:var(--blue);left:58%}
.ref-ui .spark .cur::after{content:"";position:absolute;left:-5px;bottom:-1px;width:12px;height:12px;border-radius:50%;background:#fff;border:2.5px solid var(--blue)}
.ref-ui .yrs{display:flex;justify-content:space-between;font-family:var(--rm);font-size:0.6875rem;color:var(--ink4);margin-top:4px}
/* article header */
.ref-ui .arthead{max-width:420px}
.ref-ui .arthead .ad{font-family:var(--rm);font-size:0.6875rem;font-weight:700;color:var(--blue)}
.ref-ui .arthead h4{font-family:var(--rm);font-weight:800;font-size:clamp(1.5rem,4vw,2rem);line-height:1.12;letter-spacing:-.01em;margin:8px 0 10px}
.ref-ui .arthead h4.jp{font-family:var(--jp);font-weight:900;font-size:clamp(1.25rem,3.4vw,1.625rem);line-height:1.45}
.ref-ui .arthead .by{font-family:var(--rm);font-size:0.75rem;font-weight:700;color:var(--blue)}
.ref-ui .arthead .tg{font-family:var(--rm);font-size:0.6875rem;color:var(--ink3);margin-top:4px}
.ref-ui .arthead .lede{font-size:0.9375rem;font-weight:700;line-height:1.85;margin-top:16px;padding-top:14px;border-top:1px solid var(--rule)}
/* scan pulse */
.ref-ui .pulsebox{position:relative;width:180px;height:180px;display:flex;align-items:center;justify-content:center;flex:none}
.ref-ui .pulsebox .pring{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(0,107,255,.35)}
.ref-ui .pulsebox .core{width:64px;height:64px;border-radius:50%;background:var(--blue);display:flex;align-items:center;justify-content:center;position:relative;z-index:1}
.ref-ui .pulsebox .core svg{width:36px;height:36px}
@media(prefers-reduced-motion:no-preference){
  .ref-ui .pulsebox .pring{animation:none}
  .ref-ui .pulsebox .pring:nth-child(2){animation-delay:.6s}
  .ref-ui .pulsebox .pring:nth-child(3){animation-delay:1.2s}
  @keyframes ref-ui-scanring{0%{transform:scale(.36);opacity:.9}100%{transform:scale(1);opacity:0}}
}
/* modal & result card */
.ref-ui .modal{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-l);padding:22px 20px 18px;width:min(300px,100%);box-shadow:var(--float)}
.ref-ui .modal .mt{font-size:1.0625rem;font-weight:900;margin-bottom:6px}
.ref-ui .modal .mp{font-size:0.75rem;color:var(--ink2);line-height:1.7;margin:0 0 12px}
.ref-ui .modal .ph{height:110px;border-radius:var(--r-s);background:linear-gradient(135deg,#EDE8E2,#D9D2C8);display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.ref-ui .modal .ph i{display:block;width:56%;height:44%;background:#fff;border-radius:2px;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.ref-ui .modal .pn{font-size:0.8125rem;font-weight:900}
.ref-ui .modal .stack{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.ref-ui .modal .stack .btn{width:100%}
.ref-ui .result{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-l);padding:22px 20px 18px;width:min(240px,100%);text-align:center;box-shadow:var(--float)}
.ref-ui .result .ri{width:52px;height:52px;border-radius:50%;margin:6px auto 12px;display:flex;align-items:center;justify-content:center;border:2.5px solid var(--blue);color:var(--blue);font-family:var(--rm);font-weight:800;font-size:1.375rem}
.ref-ui .result.err .ri{border-color:var(--ink4);color:var(--ink4)}
.ref-ui .result .rt{font-size:1rem;font-weight:900}
.ref-ui .result .rp{font-size:0.75rem;color:var(--ink2);line-height:1.7;margin:6px 0 12px}
.ref-ui .result.err .rp{color:var(--accent)}
.ref-ui .result a.lk{display:block;font-size:0.6875rem;margin-bottom:10px}
/* coaching sheet */
.ref-ui .coach{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-l) var(--r-l) 0 0;padding:10px 18px 18px;width:min(360px,100%);display:grid;grid-template-columns:1fr 92px;gap:14px;align-items:center;box-shadow:var(--float)}
.ref-ui .coach .grab{grid-column:1/-1;width:38px;height:5px;border-radius:99px;background:rgba(17,17,17,.18);margin:2px auto 6px}
.ref-ui .coach .ct{font-size:0.9375rem;font-weight:900;line-height:1.3}
.ref-ui .coach .cp{font-size:0.6875rem;color:var(--blue);font-weight:700;line-height:1.6;margin-top:6px}
.ref-ui .coach .thumb{position:relative;height:72px;border-radius:var(--r-s);background:linear-gradient(135deg,#EDE8E2,#D9D2C8)}
.ref-ui .coach .thumb::after{content:"+";position:absolute;right:-6px;top:-6px;width:22px;height:22px;border-radius:50%;background:var(--blue);color:#fff;font-family:var(--rm);font-weight:800;font-size:0.9375rem;line-height:22px;text-align:center}
/* auth stack */
.ref-ui .auth{width:min(280px,100%);display:flex;flex-direction:column;gap:8px}
.ref-ui .auth .a{border:1px solid var(--rule2);border-radius:999px;padding:12px 16px;font-size:0.8125rem;font-weight:700;text-align:center;background:var(--paper)}
.ref-ui .auth .a.pri{background:var(--blue);color:#fff;border-color:transparent}
.ref-ui .auth .a.lo{background:var(--tint2);border-color:var(--tint)}
/* settings list */
.ref-ui .settings .lrow{font-weight:700}
.ref-ui .settings .chev{color:var(--ink4);font-family:var(--rm)}
.ref-ui .settings .out{color:var(--accent)}

/* do/dont */
.ref-ui .dd{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
@media(max-width:700px){.ref-ui .dd{grid-template-columns:1fr}}
.ref-ui .dd>div{border:1px solid var(--rule);padding:16px 18px;font-size:0.78125rem;line-height:1.8}
.ref-ui .dd .do{border-top:3px solid var(--blue)}
.ref-ui .dd .dont{border-top:3px solid var(--accent)}
.ref-ui .dd .h{font-family:var(--rm);font-size:0.6875rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px}
.ref-ui .dd .do .h{color:var(--blue)}
.ref-ui .dd .dont .h{color:var(--accent)}
.ref-ui .dd ul{margin:0;padding-left:1.2em}
.ref-ui .dd li{margin:4px 0}

/* refs */
.ref-ui .refs{font-size:0.78125rem;color:var(--ink2);line-height:2}
.ref-ui footer{border-top:1px solid var(--rule);margin-top:80px;padding:26px 22px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-family:var(--rm);font-size:0.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}


.ref-dv{
  /* ---- CI (VI) ---- */
  --vi:#00BFFF; --g1:#006BFF; --g2:#05396B; --accent:#DA003C; --vi-ink:#231815;
  /* ---- UI tokens ---- */
  --blue:#006BFF; --blue-dk:#05396B; --blue-lt:#00BFFF;
  --tint:#E6F0FF; --tint2:#F2F7FF;
  --paper:#FFFFFF; --ink:#111111; --ink2:#4A4A4A; --ink3:#767676; --ink4:#767676;
  --rule:#E5E5E5; --rule2:#D4D4D4; --gray-out:#CCCCCC;
  --jp:"Noto Sans JP","Hiragino Sans",sans-serif;
  --rm:"Poppins","Helvetica Neue",Arial,sans-serif;
}
.ref-dv *{box-sizing:border-box;min-width:0}
.ref-dv img,.ref-dv svg{max-width:100%}
.ref-dv{scroll-behavior:smooth;scroll-padding-top:76px}
.ref-dv{margin:0;background:var(--paper);color:var(--ink);font-family:var(--jp);font-size:0.9375rem;line-height:1.85;-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-wrap:anywhere}
.ref-dv h1,.ref-dv h2,.ref-dv h3{margin:0}
.ref-dv a{color:var(--blue);text-decoration:none}

/* ---------- frame ---------- */
.ref-dv header.site{position:sticky;top:0;z-index:9;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule);display:flex;align-items:center;gap:14px;padding:12px 22px}
.ref-dv header.site .mark{width:30px;height:30px;flex:none}
.ref-dv header.site .mark svg{display:block;width:100%;height:100%}
.ref-dv header.site .t{font-family:var(--rm);font-weight:700;font-size:0.875rem;letter-spacing:.14em}
.ref-dv header.site .t small{display:block;font-size:0.6875rem;font-weight:600;letter-spacing:.2em;color:var(--ink3);text-transform:uppercase}
.ref-dv .wrap{max-width:1060px;margin:0 auto;padding:0 22px 120px}
.ref-dv .grid{display:grid;grid-template-columns:200px minmax(0,1fr);gap:56px}
@media(max-width:900px){.ref-dv .grid{grid-template-columns:1fr;gap:0}}
.ref-dv nav.toc{position:sticky;top:86px;align-self:start;font-size:0.75rem}
@media(max-width:900px){.ref-dv nav.toc{display:none}}
.ref-dv nav.toc a{display:block;color:var(--ink3);padding:5px 0 5px 14px;border-left:2px solid var(--rule);font-weight:500;letter-spacing:.02em}
.ref-dv nav.toc a:hover{color:var(--ink)}
.ref-dv nav.toc a.num{font-family:var(--rm)}

/* ---------- document typography ---------- */
.ref-dv .hero{padding:88px 0 64px}
.ref-dv .kicker{font-family:var(--rm);font-size:0.6875rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--blue)}
.ref-dv .hero h1{font-family:var(--rm);font-weight:800;font-size:clamp(2.125rem,6vw,3.625rem);line-height:1.08;letter-spacing:.01em;margin:14px 0 22px}
.ref-dv .hero .lead{max-width:640px;color:var(--ink2);font-size:0.9375rem}
.ref-dv .hero .tag{margin-top:26px;font-family:var(--rm);font-weight:700;font-size:0.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink3)}
.ref-dv section{padding:64px 0 8px;border-top:1px solid var(--rule)}
.ref-dv section>.kicker{display:block;margin-bottom:6px}
.ref-dv section>h2{font-size:clamp(1.375rem,3.4vw,1.875rem);font-weight:900;letter-spacing:-.01em;line-height:1.3;margin-bottom:10px}
.ref-dv .bar{width:52px;height:4px;background:var(--blue);margin-bottom:26px}
.ref-dv .note{max-width:680px;color:var(--ink2);margin:0 0 26px}
.ref-dv h3.sub{font-size:0.9375rem;font-weight:900;margin:38px 0 12px;display:flex;align-items:baseline;gap:10px}
.ref-dv h3.sub .en{font-family:var(--rm);font-size:0.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.ref-dv .muted{color:var(--ink3);font-size:0.75rem;line-height:1.7}
.ref-dv code{font-family:"SF Mono",Menlo,Consolas,monospace;font-size:.86em;background:var(--tint2);padding:2px 6px;color:var(--blue-dk)}

/* principles */
.ref-dv .prins{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5px;background:var(--rule);border:1.5px solid var(--rule)}
@media(max-width:760px){.ref-dv .prins{grid-template-columns:1fr}}
.ref-dv .prin{background:var(--paper);padding:24px 22px 22px}
.ref-dv .prin .n{font-family:var(--rm);font-weight:800;font-size:0.75rem;color:var(--blue);letter-spacing:.1em}
.ref-dv .prin h3{font-size:1.0625rem;font-weight:900;margin:8px 0 8px}
.ref-dv .prin p{margin:0;font-size:0.78125rem;color:var(--ink2);line-height:1.8}
.ref-dv .prin .src{margin-top:12px;font-size:0.6875rem;color:var(--ink4);letter-spacing:.04em}

/* logo plates */
.ref-dv .lplates{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
@media(max-width:700px){.ref-dv .lplates{grid-template-columns:1fr}}
.ref-dv .lp{border:1px solid var(--rule);padding:36px 30px;display:flex;align-items:center;justify-content:center;min-height:130px;position:relative}
.ref-dv .lp .cap{position:absolute;left:12px;top:9px;font-family:var(--rm);font-size:0.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink4)}
.ref-dv .lp.on-ink{background:var(--vi-ink)}
.ref-dv .lp.on-ink .cap{color:rgba(255,255,255,.4)}
.ref-dv .lp.on-ink .lg-word{fill:#FFFFFF}
.ref-dv .lp.on-blue{background:var(--vi)}
.ref-dv .lp.on-blue .cap{color:rgba(255,255,255,.6)}
.ref-dv .lp svg{height:44px;width:auto}
.ref-dv .lp.sym svg{height:64px}
.ref-dv .lrow3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:10px}
@media(max-width:700px){.ref-dv .lrow3{grid-template-columns:1fr}}

/* swatches */
.ref-dv .swrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:12px}
.ref-dv .sw{border:1px solid var(--rule)}
.ref-dv .sw .chip{height:86px;position:relative}
.ref-dv .sw .chip .wc{position:absolute;right:8px;bottom:6px;font-family:var(--rm);font-size:0.6875rem;font-weight:700;letter-spacing:.06em;color:rgba(255,255,255,.85)}
.ref-dv .sw .chip .wc.dark{color:rgba(0,0,0,.55)}
.ref-dv .sw .meta{padding:10px 12px}
.ref-dv .sw .nm{font-family:var(--rm);font-weight:700;font-size:0.6875rem;letter-spacing:.08em;text-transform:uppercase}
.ref-dv .sw .hx{font-family:var(--rm);font-size:0.6875rem;color:var(--ink3);margin-top:2px}
.ref-dv .sw .use{font-size:0.6875rem;color:var(--ink2);margin-top:6px;line-height:1.6}

/* tables */
.ref-dv table{width:100%;border-collapse:collapse;font-size:0.78125rem}
.ref-dv th,.ref-dv td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--rule);vertical-align:top}
.ref-dv thead th{background:var(--tint);font-family:var(--rm);font-size:0.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);font-weight:700;border-bottom:1.5px solid var(--blue);white-space:nowrap}
.ref-dv td.n{font-family:var(--rm);font-variant-numeric:tabular-nums;white-space:nowrap}
.ref-dv .scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ref-dv .scroll table{min-width:640px}

/* type specimens */
.ref-dv .spec{border:1px solid var(--rule);padding:26px 26px 22px;margin-bottom:10px}
.ref-dv .spec .lbl{font-family:var(--rm);font-size:0.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin-bottom:12px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.ref-dv .sp-display{font-family:var(--rm);font-weight:800;font-size:clamp(1.875rem,5vw,2.75rem);line-height:1.1;letter-spacing:.01em}
.ref-dv .sp-h1jp{font-weight:900;font-size:clamp(1.375rem,3.6vw,1.875rem);line-height:1.45}
.ref-dv .sp-num{font-family:var(--rm);font-weight:800;font-size:clamp(2.5rem,7vw,4rem);line-height:1;font-variant-numeric:tabular-nums}
.ref-dv .sp-num small{font-size:.35em;font-weight:700;color:var(--ink3)}
.ref-dv .sp-body{max-width:560px;font-size:0.9375rem}
.ref-dv .sp-cap{font-size:0.6875rem;color:var(--ink3)}

/* ==================================================
   component language v4 — Liquid Glass
   glass = controls and reading cards; verify composite contrast and opaque fallback
   ================================================== */
.ref-dv{
  --r-s:14px; --r-m:22px; --r-l:30px;           /* concentric radius scale */
  --glass-bg:rgba(255,255,255,.55);
  --glass-line:rgba(255,255,255,.65);
  --glass-hi:inset 0 1px 0 rgba(255,255,255,.7);
  --float:0 10px 30px rgba(5,57,107,.16), 0 2px 8px rgba(5,57,107,.08);
  --float-s:0 6px 18px rgba(5,57,107,.14);
}
.ref-dv .glass{background:var(--glass-bg);backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6);border:1px solid var(--glass-line);box-shadow:var(--glass-hi),var(--float-s)}
.ref-dv .demo{border:1px solid var(--rule);background:var(--tint2);padding:28px;display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start;margin-bottom:8px;border-radius:var(--r-m)}
.ref-dv .demo .device{background:var(--paper);border:1px solid var(--rule2);border-radius:var(--r-l);width:min(360px,100%);padding:18px 16px}
/* stage: vivid content behind glass */
.ref-dv .stage{position:relative;overflow:hidden;border-radius:var(--r-l);margin-bottom:8px;padding:26px;min-height:340px;display:flex;flex-direction:column;justify-content:space-between;gap:18px}
.ref-dv .stage>:not(.sky){position:relative}

/* buttons — capsules */
.ref-dv button.btn{font:inherit;font-family:var(--jp);font-weight:700;font-size:0.875rem;border:0;border-radius:999px;background:#006BFF;color:#fff;padding:14px 26px;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),var(--float-s);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:transform .2s var(--spring),background .2s ease}
.ref-dv button.btn:hover{background:rgba(0,107,255,1)}
.ref-dv button.btn:active{transform:scale(.94)}
.ref-dv button.btn.sec{background:var(--glass-bg);color:var(--blue-dk);border:1px solid var(--glass-line);box-shadow:var(--glass-hi),var(--float-s);backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6)}
.ref-dv button.btn.danger{background:rgba(218,0,60,.92)}
.ref-dv button.btn:disabled{background:rgba(160,160,160,.4);color:rgba(255,255,255,.9);box-shadow:none;cursor:not-allowed;backdrop-filter:blur(10px)}
.ref-dv .icbtn{width:46px;height:46px;border-radius:999px;border:1px solid var(--glass-line);background:var(--glass-bg);backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6);box-shadow:var(--glass-hi),var(--float-s);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s var(--spring)}
.ref-dv .icbtn:active{transform:scale(.9)}
.ref-dv .icbtn .gicon{width:25px;height:25px}

/* surfaces */
.ref-dv .card{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-m);padding:20px;width:230px;font-size:0.78125rem}
.ref-dv .card.em{box-shadow:var(--float);border-color:transparent}
.ref-dv .card.dark{background:#141414;border-color:#141414;color:#fff}
.ref-dv .card .ck{font-family:var(--rm);font-size:0.6875rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);margin-bottom:8px}
.ref-dv .card.dark .ck{color:rgba(255,255,255,.5)}
.ref-dv .card h4{margin:0 0 4px;font-size:0.875rem;font-weight:900}
.ref-dv .card p{margin:0;color:var(--ink2);font-size:0.75rem;line-height:1.7}
.ref-dv .card.dark p{color:rgba(255,255,255,.72)}
.ref-dv .card.glassy{background:var(--glass-bg);border:1px solid var(--glass-line);backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6);box-shadow:var(--glass-hi),var(--float-s);color:var(--blue-dk)}
.ref-dv .card.glassy p{color:rgba(5,57,107,.8)}
.ref-dv .card.glassy .ck{color:rgba(5,57,107,.6)}

/* stat display */
.ref-dv .stat{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-m);padding:16px 16px 14px;min-width:150px}
.ref-dv .stat .v{font-family:var(--rm);font-weight:800;font-size:2rem;line-height:1;font-variant-numeric:tabular-nums}
.ref-dv .stat .v small{font-size:0.75rem;font-weight:700;color:var(--ink3);margin-left:3px}
.ref-dv .stat .d{font-family:var(--rm);font-weight:700;font-size:0.75rem;margin-top:6px}
.ref-dv .stat .d.up{color:var(--blue)}
.ref-dv .stat .d.down{color:var(--accent)}
.ref-dv .stat .l{font-size:0.6875rem;font-weight:500;color:var(--ink3);margin-top:3px;line-height:1.45}
.ref-dv .stat.hero-s{position:relative;overflow:hidden;border:0;color:#fff;box-shadow:var(--float)}
.ref-dv .stat.hero-s>div:not(.sky){position:relative}
.ref-dv .stat.hero-s .v,.ref-dv .stat.hero-s .l{text-shadow:0 1px 8px rgba(0,0,0,.3)}
.ref-dv .stat.hero-s .v{font-size:2.75rem}
.ref-dv .stat.hero-s .l{color:rgba(255,255,255,.85);font-family:var(--rm);font-size:0.6875rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600}

/* progress */
.ref-dv .pbarwrap{width:min(360px,100%);background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-m);padding:18px 16px}
.ref-dv .pbar-l{display:flex;justify-content:space-between;align-items:baseline;font-size:0.75rem;font-weight:700;margin-bottom:6px}
.ref-dv .pbar-l b{font-family:var(--rm);font-variant-numeric:tabular-nums;font-weight:800}
.ref-dv .pbar{height:16px;background:var(--tint2);position:relative;overflow:hidden;margin-bottom:12px;border-radius:999px}
.ref-dv .pbar>i{position:absolute;inset:0 auto 0 0;background:var(--blue);border-radius:999px}
.ref-dv .pbar.alt>i{background:var(--blue-dk)}
.ref-dv .ring{width:108px;height:108px}
.ref-dv .ring svg{transform:rotate(-90deg)}
.ref-dv .ring .bg{fill:none;stroke:var(--tint);stroke-width:11}
.ref-dv .ring .fg{fill:none;stroke:var(--blue);stroke-width:11;stroke-linecap:round}
.ref-dv .ringbox{display:flex;align-items:center;gap:16px;background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-m);padding:18px}
.ref-dv .ringbox .rv{font-family:var(--rm);font-weight:800;font-size:1.875rem;line-height:1;font-variant-numeric:tabular-nums}
.ref-dv .ringbox .rv small{font-size:0.75rem;color:var(--ink3)}
.ref-dv .ringbox .rl{font-size:0.6875rem;color:var(--ink3);margin-top:4px}

/* lists — inset grouped */
.ref-dv .group{background:var(--paper);border-radius:var(--r-m);overflow:hidden;border:1px solid var(--rule)}
.ref-dv .lrow{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:14px 16px;font-size:0.8125rem;position:relative}
.ref-dv .lrow+.lrow::before{content:"";position:absolute;left:16px;right:0;top:0;height:1px;background:var(--rule)}
.ref-dv .lrow .t1{font-weight:700}
.ref-dv .lrow .k{font-family:var(--rm);font-weight:800;font-size:1.0625rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.ref-dv .lrow .k small{display:block;font-size:0.6875rem;color:var(--ink3);text-align:right;font-weight:600}
.ref-dv .mchip{font-family:var(--rm);font-size:0.6875rem;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink2);background:var(--tint2);border:1px solid var(--tint);border-radius:999px;padding:2px 9px;white-space:nowrap;display:inline-block}
.ref-dv .mchip b{color:var(--blue);margin-right:3px;font-weight:800}

/* navigation — floating glass */
.ref-dv .navtop{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 12px 12px 20px;border-radius:999px;width:min(360px,100%)}
.ref-dv .navtop .ttl{font-family:var(--rm);font-weight:700;font-size:0.8125rem;letter-spacing:.12em;color:var(--blue-dk)}
.ref-dv .tabfloat{display:flex;gap:2px;padding:7px;border-radius:999px;width:min(340px,100%);margin:0 auto}
.ref-dv .tabfloat button{flex:1;background:none;border:0;border-radius:999px;min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-family:var(--jp);font-size:0.6875rem;font-weight:700;color:rgba(5,57,107,.75);cursor:pointer;transition:background .25s var(--spring),color .2s ease}
.ref-dv .tabfloat button svg{width:23px;height:23px}
.ref-dv .tabfloat button.on{background:#fff;color:var(--blue)}
.ref-dv .tabfloat button.ai{color:#fff;background:rgba(0,107,255,.88)}
/* dark scene (twilight / night) overrides */
.ref-dv .on-dark .glass{background:rgba(8,16,38,.38);border-color:rgba(255,255,255,.24);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),var(--float-s)}
.ref-dv .on-dark .navtop .ttl{color:#fff}
.ref-dv .on-dark .icbtn{color:#fff;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3)}
.ref-dv .on-dark .tabfloat button{color:rgba(255,255,255,.8)}
.ref-dv .on-dark .tabfloat button.on{background:rgba(255,255,255,.94);color:var(--blue)}

/* sheet */
.ref-dv .gsheet{border-radius:var(--r-l) var(--r-l) 0 0;padding:10px 20px 20px;width:min(360px,100%)}
.ref-dv .gsheet .grab{width:38px;height:5px;border-radius:99px;background:rgba(5,57,107,.25);margin:2px auto 12px}
.ref-dv .gsheet .dt{font-weight:900;font-size:0.9375rem;color:var(--blue-dk)}
.ref-dv .gsheet .dr{display:flex;justify-content:space-between;gap:14px;padding:9px 0;font-size:0.78125rem;color:var(--blue-dk);position:relative}
.ref-dv .gsheet .dr+.dr::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(5,57,107,.14)}
.ref-dv .gsheet .dr b{font-family:var(--rm);font-weight:800;font-variant-numeric:tabular-nums}

/* conversation */
.ref-dv .conv{display:flex;flex-direction:column;gap:10px}
.ref-dv .msg{max-width:85%;padding:11px 15px;font-size:0.78125rem;line-height:1.75;border-radius:var(--r-m)}
.ref-dv .msg.me{align-self:flex-end;background:var(--blue);color:#fff;border-bottom-right-radius:6px}
.ref-dv .msg.ai{align-self:flex-start;background:var(--tint2);border-bottom-left-radius:6px}
.ref-dv .composer{display:flex;gap:8px;margin-top:12px;padding:6px;border-radius:999px}
.ref-dv .composer input{flex:1;font:inherit;font-size:0.8125rem;padding:10px 16px;border:0;border-radius:999px;background:transparent;color:var(--ink)}
.ref-dv .composer input:focus{outline:none}
.ref-dv .composer button{font:inherit;font-weight:700;font-size:0.8125rem;border:0;background:var(--blue);color:#fff;border-radius:999px;width:40px;height:40px;cursor:pointer;flex:none}

/* forms */
.ref-dv .field label{display:block;font-size:0.6875rem;font-weight:700;letter-spacing:.04em;color:var(--ink2);margin:0 0 5px}
.ref-dv .field input{font:inherit;font-family:var(--jp);font-size:0.9375rem;width:100%;padding:12px 16px;border:1px solid var(--rule2);background:var(--paper);border-radius:var(--r-s);transition:border-color .2s,box-shadow .2s}
.ref-dv .field input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,107,255,.15)}
.ref-dv .field .err{border-color:var(--accent)}
.ref-dv .field .err:focus{box-shadow:0 0 0 3px rgba(218,0,60,.15)}
.ref-dv .field .errmsg{font-size:0.6875rem;color:var(--accent);font-weight:700;margin-top:4px}
.ref-dv .toastd{border-radius:999px;padding:12px 22px;font-size:0.8125rem;font-weight:700;display:inline-block;color:var(--blue-dk)}
.ref-dv .empty{border:1px dashed var(--rule2);border-radius:var(--r-m);padding:26px;text-align:center;width:min(360px,100%);background:var(--paper)}
.ref-dv .empty .ev{font-family:var(--rm);font-weight:800;font-size:1.5rem;color:var(--ink4)}
.ref-dv .empty p{margin:6px 0 12px;font-size:0.75rem;color:var(--ink3)}

/* ---------- dark mode ---------- */
.ref-dv .darkdemo{position:relative;overflow:hidden;background:#0A0A0A;border:1px solid #0A0A0A;padding:28px;display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start;margin-bottom:8px}
.ref-dv .darkdemo>:not(.sky){position:relative}
.ref-dv .dstat{background:rgba(10,18,40,.42);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.12);padding:14px 14px 12px;min-width:150px;color:#F5F5F5}
.ref-dv .dstat .v{font-family:var(--rm);font-weight:800;font-size:2rem;line-height:1;font-variant-numeric:tabular-nums}
.ref-dv .dstat .v small{font-size:0.75rem;font-weight:700;color:#8A8A8A;margin-left:3px}
.ref-dv .dstat .d{font-family:var(--rm);font-weight:700;font-size:0.75rem;margin-top:6px}
.ref-dv .dstat .d.up{color:#4DA3FF}
.ref-dv .dstat .d.down{color:#FF4D6D}
.ref-dv .dstat .l{font-size:0.6875rem;color:#8A8A8A;margin-top:3px}
.ref-dv .dbtn{font:inherit;font-family:var(--jp);font-weight:700;font-size:0.875rem;border:0;background:rgba(30,140,255,.88);box-shadow:inset 0 1px 0 rgba(255,255,255,.3);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;padding:13px 22px;cursor:pointer}
.ref-dv .dbtn.sec{background:rgba(255,255,255,.12);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:#fff;border:1px solid rgba(255,255,255,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.ref-dv .dlist{background:rgba(10,18,40,.42);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.12);border-radius:22px;overflow:hidden;width:min(300px,100%);color:#F5F5F5}
.ref-dv .dlist .lrow+.lrow::before{background:rgba(255,255,255,.14)}
.ref-dv .dlist .muted{color:#8A8A8A}
.ref-dv .darkdemo{border-radius:22px}
.ref-dv .dstat{border-radius:22px}
.ref-dv .dbtn{border-radius:999px;border-width:0}
.ref-dv .dbtn.sec{border:1px solid #333}

/* ---------- expressive layer / sky textures ---------- */
.ref-dv{--spring:cubic-bezier(.34,1.56,.64,1)}
.ref-dv .exdemo{position:relative;border:1px solid var(--rule);border-radius:var(--r-l);overflow:hidden;margin-bottom:8px;min-height:300px;display:flex;align-items:flex-end;justify-content:center;padding:26px}
.ref-dv .sky{position:absolute;inset:0;background-size:cover;background-position:center 40%;border-radius:inherit}
.ref-dv .sky.day{background-image:url(/sorah-pjt/design/sky-day.jpg)}
.ref-dv .sky.mo{background-image:url(/sorah-pjt/design/sky-morning.jpg)}
.ref-dv .sky.tw{background-image:url(/sorah-pjt/design/sky-twilight.jpg)}
.ref-dv .sky.night{background-image:url(/sorah-pjt/design/sky-night.jpg)}
@media(prefers-reduced-motion:no-preference){
  .ref-dv .sky{animation:none}
  @keyframes ref-dv-skydrift{from{transform:scale(1)}to{transform:scale(1.1)}}
}
/* dark glass — for twilight/night scenes */
.ref-dv .glass.gdark{background:rgba(8,16,38,.42);border-color:rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),var(--float-s)}
.ref-dv .skytiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:10px}
@media(max-width:700px){.ref-dv .skytiles{grid-template-columns:repeat(2,1fr)}}
.ref-dv .skytile{position:relative;border-radius:var(--r-m);overflow:hidden;min-height:150px;display:flex;align-items:flex-end;padding:14px}
.ref-dv .skytile .nm2{position:relative;font-family:var(--rm);font-weight:700;font-size:0.6875rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.35)}
.ref-dv .exhero{position:relative;color:#fff;text-align:left;align-self:flex-start;margin-right:auto}
.ref-dv .exhero .kk{font-family:var(--rm);font-size:0.6875rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.ref-dv .exhero .vv{font-family:var(--rm);font-weight:800;font-size:3.25rem;line-height:1;font-variant-numeric:tabular-nums;margin-top:8px}
.ref-dv .exhero .vv small{font-size:1rem;color:rgba(255,255,255,.75)}
.ref-dv .glassbar{position:relative;display:flex;gap:4px;padding:6px;border-radius:99px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.32);backdrop-filter:blur(14px) saturate(1.5);-webkit-backdrop-filter:blur(14px) saturate(1.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.ref-dv .glassbar button{font:inherit;font-family:var(--jp);font-size:0.75rem;font-weight:700;border:0;background:transparent;color:rgba(255,255,255,.85);padding:10px 18px;border-radius:99px;cursor:pointer;transition:background .25s var(--spring),transform .25s var(--spring)}
.ref-dv .glassbar button.on{background:rgba(255,255,255,.92);color:var(--blue-dk)}
.ref-dv .glassbar button:active{transform:scale(.94)}
.ref-dv .morph{font:inherit;font-family:var(--jp);font-weight:700;font-size:0.875rem;border:0;background:var(--blue);color:#fff;padding:14px 26px;border-radius:99px;cursor:pointer;transition:border-radius .35s var(--spring),transform .2s var(--spring),background .2s ease}
.ref-dv .morph:hover{border-radius:14px}
.ref-dv .morph:active{transform:scale(.93);border-radius:10px;background:var(--blue-dk)}
.ref-dv .seg{display:inline-flex;position:relative;background:var(--tint2);border:1px solid var(--tint);border-radius:99px;padding:4px}
.ref-dv .seg button{font:inherit;font-family:var(--jp);font-size:0.78125rem;font-weight:700;border:0;background:transparent;color:var(--ink3);padding:9px 20px;border-radius:99px;cursor:pointer;position:relative;z-index:1;transition:color .25s ease}
.ref-dv .seg button.on{color:#fff}
.ref-dv .seg .pill{position:absolute;top:4px;bottom:4px;border-radius:99px;background:var(--blue);transition:left .35s var(--spring),width .35s var(--spring)}
@media(prefers-reduced-motion:reduce){.ref-dv .glassbar button,.ref-dv .morph,.ref-dv .seg .pill{transition:none}}

/* ---------- DESIGN.md ---------- */
.ref-dv .mdblock{position:relative;border:1px solid var(--rule);background:#0F1115;margin-bottom:10px}
.ref-dv .mdblock pre{margin:0;padding:20px 18px;overflow-x:auto;font-family:"SF Mono",Menlo,Consolas,monospace;font-size:0.71875rem;line-height:1.75;color:#D6DEE8}
.ref-dv .mdblock .cbtn{position:absolute;top:10px;right:10px;font:inherit;font-family:var(--rm);font-size:0.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.25);padding:6px 12px;cursor:pointer}
.ref-dv .mdblock .cbtn:hover{background:rgba(255,255,255,.2)}

/* ---------- glass color-plane icons & sky type ---------- */
.ref-dv .gicon{width:52px;height:52px;display:block}
.ref-dv .gicon .sol{fill:var(--blue)}
.ref-dv .gicon .solst{stroke:var(--blue);fill:none;stroke-width:3.6;stroke-linecap:round;stroke-linejoin:round}
.ref-dv .gicon .fro{fill:#CBD9F9;fill-opacity:.82}
.ref-dv .gicon .wfro{fill:#fff;fill-opacity:.95}
.ref-dv .tabfloat .gicon{width:23px;height:23px}
.ref-dv .tabfloat button.ai .sol{fill:#fff}
.ref-dv .tabfloat button.ai .solst{stroke:#fff}
.ref-dv .tabfloat button.ai .fro{fill:#fff;fill-opacity:.38}
.ref-dv .iconsgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:8px}
@media(max-width:700px){.ref-dv .iconsgrid{grid-template-columns:repeat(2,1fr)}}
.ref-dv .icell{border:1px solid var(--rule);border-radius:var(--r-m);background:var(--paper);display:flex;flex-direction:column;align-items:center;gap:10px;padding:24px 10px 16px}
.ref-dv .icell .lb2{font-size:0.6875rem;font-weight:700;color:var(--ink2)}
.ref-dv .skytype{background-image:url(/sorah-pjt/design/sky-day.jpg);background-size:cover;background-position:center 30%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.ref-dv .skytype.tw{background-image:url(/sorah-pjt/design/sky-twilight.jpg)}
.ref-dv .skytype.nt{background-image:url(/sorah-pjt/design/sky-night.jpg)}
/* frost×solid plane applied to guide chrome */
.ref-dv .bar{position:relative;width:66px;height:10px;background:none;margin-bottom:26px}
.ref-dv .bar::before{content:"";position:absolute;left:0;top:0;width:42px;height:10px;border-radius:99px;background:var(--blue)}
.ref-dv .bar::after{content:"";position:absolute;left:24px;top:2.5px;width:42px;height:10px;border-radius:99px;background:#CBD9F9;opacity:.85;backdrop-filter:blur(2.5px);-webkit-backdrop-filter:blur(2.5px)}

/* do/dont */
.ref-dv .dd{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
@media(max-width:700px){.ref-dv .dd{grid-template-columns:1fr}}
.ref-dv .dd>div{border:1px solid var(--rule);padding:16px 18px;font-size:0.78125rem;line-height:1.8}
.ref-dv .dd .do{border-top:3px solid var(--blue)}
.ref-dv .dd .dont{border-top:3px solid var(--accent)}
.ref-dv .dd .h{font-family:var(--rm);font-size:0.6875rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px}
.ref-dv .dd .do .h{color:var(--blue)}
.ref-dv .dd .dont .h{color:var(--accent)}
.ref-dv .dd ul{margin:0;padding-left:1.2em}
.ref-dv .dd li{margin:4px 0}

/* refs */
.ref-dv .refs{font-size:0.78125rem;color:var(--ink2);line-height:2}
.ref-dv footer{border-top:1px solid var(--rule);margin-top:80px;padding:26px 22px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-family:var(--rm);font-size:0.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}

/* ── DV Library ── */
.ref-dv .thesis{background:#1F1F1F;color:#fff;padding:26px 30px;margin:0 0 30px;max-width:680px;font-size:0.9375rem;line-height:1.9}
.ref-dv td.nw,.ref-dv th.nw,.ref-dv td code{white-space:nowrap}
.ref-dv .thesis .lbl{display:block;font-family:Poppins,sans-serif;font-size:0.6875rem;letter-spacing:.2em;text-transform:uppercase;color:#B5B5B5;margin-bottom:8px}
.ref-dv .thesis b{color:#fff}
.ref-dv figure.diagram{margin:0 0 30px;max-width:880px}
.ref-dv figure.diagram img{display:block;width:100%;height:auto}
.ref-dv figure.diagram figcaption{font-size:0.75rem;color:#8a8a8a;line-height:1.7;margin-top:8px}
.ref-dv section .cols{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:0 0 12px}
.ref-dv section .cols h4{font-size:0.75rem;letter-spacing:.14em;text-transform:uppercase;color:#8a8a8a;margin:18px 0 8px;font-family:Poppins,sans-serif}
.ref-dv article.form{margin:0 0 72px;padding-top:24px;border-top:1px solid var(--rule,#e2e2e2)}
.ref-dv article.form h3{font-size:1.625rem;margin:8px 0 6px}
.ref-dv article.form h3 small{display:block;font-size:0.8125rem;font-weight:500;color:#8a8a8a;letter-spacing:.04em;margin-top:4px}
.ref-dv article.form p.def{font-size:1rem;line-height:1.8;margin:0 0 20px}
.ref-dv article.form .pair{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:0 0 20px}
.ref-dv article.form .pair.half{grid-template-columns:1fr 1fr;margin:0 0 24px}
.ref-dv article.form .pair.half figure:only-child{grid-column:1}
.ref-dv article.form figure{margin:0;background:#f6f6f6;padding:12px;border-radius:14px}
.ref-dv article.form figure img{width:100%;height:auto;display:block;border-radius:8px}
.ref-dv .pair.vids{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:0 0 24px}
.ref-dv .pair.vids figure{margin:0;background:#f6f6f6;padding:12px;border-radius:14px}
.ref-dv .pair.vids video{width:100%;height:auto;display:block;border-radius:8px;background:#fff}
.ref-dv .pair.vids figcaption{font-size:0.8125rem;line-height:1.7;margin-top:10px;color:#333}
.ref-dv .pair.vids figcaption b{font-family:Poppins,sans-serif;letter-spacing:.08em;margin-right:8px}
@media(max-width:640px){.ref-dv .pair.vids{grid-template-columns:1fr}}
.ref-dv article.form figure.nofig{display:flex;align-items:center;min-height:120px}
.ref-dv article.form figcaption{font-size:0.8125rem;line-height:1.7;margin-top:10px;color:#333}
.ref-dv article.form figcaption b{font-family:Poppins,sans-serif;letter-spacing:.08em;margin-right:8px}
.ref-dv article.form .cols{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:0 0 12px}
.ref-dv article.form h4{font-size:0.75rem;letter-spacing:.14em;text-transform:uppercase;color:#8a8a8a;margin:18px 0 8px;font-family:Poppins,sans-serif}
.ref-dv article.form ul.dl{list-style:none;padding:0;margin:0}
.ref-dv article.form ul.dl li{position:relative;padding:4px 0 4px 18px;font-size:0.875rem;line-height:1.75}
.ref-dv article.form ul.dl li::before{content:"—";position:absolute;left:0;color:#b5b5b5}
.ref-dv article.form table.kv{width:100%;border-collapse:collapse;font-size:0.8125rem}
.ref-dv article.form table.kv td{padding:6px 8px 6px 0;border-bottom:1px solid #ececec;vertical-align:top}
.ref-dv article.form ul.refs{list-style:none;padding:0;margin:0}
.ref-dv article.form ul.refs li{padding:6px 0;font-size:0.875rem;line-height:1.7;border-bottom:1px solid #f0f0f0}
.ref-dv article.form ul.refs .why{color:#666;font-size:0.8125rem}
.ref-dv article.form .meta{color:#8a8a8a;font-size:0.75rem}
.ref-dv .catnav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px}
.ref-dv .catnav a{font-size:0.75rem;padding:6px 10px;border:1px solid #e2e2e2;border-radius:999px;text-decoration:none;color:#1a1a1a}
.ref-dv .catnav a.pending{color:#b5b5b5;border-style:dashed}
.ref-dv ul.dash{list-style:none;margin:0 0 26px;padding:0;max-width:680px}
.ref-dv ul.dash li{padding-left:1.5em;text-indent:-1.5em;margin:0 0 8px;font-size:0.875rem;line-height:1.8}
.ref-dv ul.dash li::before{content:"— ";color:#8a8a8a}
.ref-dv main section>h2{margin-bottom:32px}
@media (max-width:720px){.ref-dv article.form .pair,.ref-dv article.form .cols,.ref-dv section .cols{grid-template-columns:1fr}}

/* Shared SDS reading surface. Only explicit visual specimens keep fixed colours. */
.reference-title{font-family:var(--sans);font-size:clamp(2rem,4.5vw,3.5rem);letter-spacing:-.025em;line-height:1.4}.reference-toc{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0 0 32px}.reference-toc a{display:flex;align-items:center;min-height:44px;font-size:.8125rem;max-width:100%}.reference-scope{background:transparent;color:var(--ink);padding:0;border-radius:0;margin-bottom:28px;--paper:var(--sorah-ui-background);--ink:var(--sorah-ui-ink);--ink2:var(--sorah-ui-secondary);--ink3:var(--sorah-ui-secondary);--ink4:var(--sorah-ui-secondary);--rule:var(--sorah-ui-border);--rule2:var(--sorah-ui-border);--blue:var(--sorah-ui-link);--blue-dk:var(--sorah-ui-link);--tint:var(--sorah-ui-surface);--tint2:var(--sorah-ui-surface)}.reference-scope a{color:var(--blue);text-decoration:underline}.reference-scope .reference-section{padding:32px 0;border:0}.reference-scope h3.sub{flex-wrap:wrap}.reference-scope h4{font-size:.875rem;color:var(--ink2)}.reference-scope .muted,.reference-scope .why,.reference-scope .meta{color:var(--ink2)}.reference-scope .scroll{overflow:auto;max-width:100%}.reference-scope table{width:100%;table-layout:auto}.reference-scope td,.reference-scope th{overflow-wrap:anywhere}.reference-scope img,.reference-scope video{max-width:100%;height:auto;display:block}.reference-scope p{font-size:.9375rem;line-height:1.85}.reference-scope .ref-context{border-left:3px solid var(--blue);padding:10px 16px;background:var(--panel);color:var(--ink);font-size:.8125rem}.reference-scope .device{max-width:100%}.reference-scope .btn.primary,.reference-scope .chat .user{background:#006BFF;color:#fff}.reference-scope .card.dark{background:#141f36;color:#f5f5f5}.reference-scope .card.dark p{color:#cbd5e1}.ref-scene-profiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.ref-scene-profiles span{display:block;padding:10px}.reference-rule{padding:20px 0;border-bottom:1px solid var(--rule)}.reference-form{border-top:1px solid var(--rule);padding:0;margin-top:22px}.reference-form summary{cursor:pointer;padding:22px 8px;min-height:44px;list-style:disclosure-closed}.reference-form[open] summary{list-style:disclosure-open}.reference-form summary h3{display:inline;font-size:1.2rem}.reference-form summary small{display:block;font-size:.8125rem;font-weight:400;color:var(--ink2)}.reference-form .form{padding:0 0 28px}.reference-form .cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.reference-form .pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:24px 0}.reference-form .pair figure{margin:0}.reference-form figcaption{font-size:.75rem;line-height:1.8;padding-top:10px}.reference-form .kv{font-size:.8125rem}.reference-form h4{margin-top:26px}.reference-search{margin:0 0 24px}.reference-search label{display:block;font-weight:700;margin-bottom:10px}.reference-search input{width:min(100%,520px);padding:14px;border:1px solid var(--rule);border-radius:14px;background:var(--paper);color:var(--ink);font:inherit}.reference-search p{font-size:.8125rem;color:var(--muted);margin-top:8px}.reference-link{display:block;text-decoration:none;color:var(--ink)}.reference-link p{margin-top:12px;color:var(--muted)}.detailed-guides h2{margin-bottom:22px}.reference-document>#reconciled .panel{margin-top:18px}.reference-document :focus-visible{outline:3px solid var(--action);outline-offset:2px}.reference-scope .lp .cap{color:#595959}.reference-scope .lp.on-ink .cap{color:#fff}.reference-scope .btn{min-height:44px}.reference-scope .lp svg{flex-shrink:0}
@media(max-width:700px){.reference-scope{padding:0}.reference-form .cols,.reference-form .pair,.ref-scene-profiles{grid-template-columns:1fr}.reference-scope .readout{flex-wrap:wrap}.reference-scope .lplates{grid-template-columns:1fr}.reference-scope .dd{grid-template-columns:1fr}.reference-scope table{font-size:.75rem}.reference-scope .sheet{width:100%}.reference-scope .reference-section{padding:24px 0}.reference-scope .tab-split{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.reference-document *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.hero h1.reference-title{font-family:var(--sans);font-size:clamp(2rem,4.5vw,3.5rem);line-height:1.4;letter-spacing:-.025em}.ref-ui button.btn:not(.sec):not(.danger):not(:disabled),.ref-ui .composer button,.ref-ui .msg.me{background:#006BFF;color:#fff}.reference-form[hidden]{display:none}.reference-document .reference-scope *{min-width:0}.reference-scope .sp-num,.reference-scope .stat .v{overflow-wrap:anywhere}.reference-scope .demo{flex-wrap:wrap}.reference-scope .lp{overflow:hidden}.reference-scope .lp svg{max-width:100%;height:auto}.reference-scope .reference-section>h2{scroll-margin-top:20px}
.reference-scope .composer{flex-wrap:wrap}.reference-input-label{flex-basis:100%;font-size:.75rem;color:var(--ink2)}.reference-scope input{min-height:44px}

/* Content glass is allowed; use an opaque fallback without backdrop filtering. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.ref-ui .card.glassy{background:var(--paper)}}
.ref-ui .icbtn{color:#006BFF}

.reference-scope .card.dark h4{color:#fff}

/* Reading text, metadata and figure frames use the same theme as the chapter pages. */
.reference-scope :is(figure.diagram figcaption,.cols h4,.form h4,.form h3 small,.form .meta,.form ul.refs .why){color:var(--ink2)}
.reference-scope :is(.form figure,.pair.vids figure){background:var(--panel)}
.reference-scope :is(.form figcaption,.pair.vids figcaption){color:var(--ink)}
.reference-scope :is(.form table.kv td,.form ul.refs li){border-color:var(--rule)}
.reference-scope .catnav a{color:var(--ink);border-color:var(--rule)}
.reference-scope .thesis{background:var(--panel);color:var(--ink)}
.reference-scope .thesis b{color:var(--ink)}
.reference-scope .thesis .lbl{color:var(--ink2)}
/* Light UI specimens are bounded examples, independent of the guide's reading theme. */
.reference-scope :is(.demo,.stage){--paper:#fff;--ink:#111;--ink2:#4a4a4a;--ink3:#767676;--ink4:#767676;--blue:#006BFF;--blue-dk:#05396B;--rule:#e5e5e5;--rule2:#d4d4d4;--tint:#e6f0ff;--tint2:#f2f7ff;color:var(--ink);color-scheme:light}
.reference-scope .lp:not(.on-ink):not(.on-blue){background:#fff;color:#231815}
.reference-scope .lp.on-blue{background:#00BFFF;color:#231815}
.reference-scope .lp.on-ink{background:#231815;color:#fff}
.reference-scope .scene-playback-example .muted{color:#CBD5E1}
.adopted-example{padding:24px;margin:22px 0;border:1px solid var(--rule);border-radius:22px;background:var(--sorah-ui-surface);color:var(--ink)}
.adopted-example label{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0}.adopted-example select{border-radius:12px;max-width:100%;font-size:1rem}
.reference-scope .adopted-value{font-size:2rem;font-weight:700;margin:14px 0;font-variant-numeric:tabular-nums}.adopted-value small{font-size:.875rem}
.adopted-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.adopted-example button[aria-disabled=true]{opacity:.65;cursor:wait}.adopted-example [role=alert]{color:var(--sorah-ui-danger)}
.adopted-example details summary{min-height:44px;padding:10px 0;cursor:pointer;color:var(--blue)}.adopted-example dialog{color:var(--ink);background:var(--paper);border:1px solid var(--rule);border-radius:22px;max-width:min(90vw,500px);padding:24px}.adopted-example dialog::backdrop{background:#0007}.adopted-example dialog form{margin-top:18px}