/* Controls for the three demo pages: product bar, questions, buttons.
   Corners: buttons 6px, fields 8px, bars and panels 12px. Loaded last, so it wins over page styles. */
:root{--sh-ink:#1B1B1B;--sh-cream:#F2EFE6;--sh-org:#FF5A1F;--sh-org-d:#E94E17;
 --sh-sans:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;--sh-disp:"Space Grotesk","Helvetica Neue",Arial,sans-serif;--sh-ease:cubic-bezier(.2,.7,.3,1);
 --sh-glass:rgba(250,250,248,.5);--sh-glass-dk:rgba(26,26,28,.36);--sh-panel:rgba(250,250,248,.86);--sh-panel-dk:rgba(30,30,32,.86);
 /* the mobile drawer is solid: inside the bar's backdrop-filter its own blur only sees the bar */
 --sh-drawer:#FAFAF8;--sh-drawer-dk:#1E1E20}

/* ---------- buttons and fields: one corner everywhere ---------- */
.bx,.btn,.sb,.mood{border-radius:6px !important}
.wl{border-radius:8px !important}
.wl .bx,.wl .btn,.wl button{border-radius:6px !important}
.seg,.looks{border-radius:8px !important}
.seg button,.looks button{border-radius:6px !important}
.sb{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border:0;cursor:pointer;white-space:nowrap;text-decoration:none;font:500 14px/1 var(--sh-sans);letter-spacing:-.005em;background:var(--sh-org);color:#fff;transition:background .2s,transform .15s}
@media (hover:hover) and (pointer:fine){.sb:hover{background:var(--sh-org-d)}}.sb:active{transform:scale(.98)}
.sb.ink{background:var(--sh-ink);color:#fff}@media (hover:hover) and (pointer:fine){.sb.ink:hover{background:#000}}
.sb.cream{background:var(--sh-cream);color:var(--sh-ink)}@media (hover:hover) and (pointer:fine){.sb.cream:hover{background:#fff}}
.sb[aria-disabled="true"]{background:rgba(127,127,127,.16);color:inherit;cursor:default}
.sb[aria-disabled="true"] i{width:6px;height:6px;border-radius:50%;background:var(--sh-org)}

/* ---------- the corner brackets around the phone are gone ---------- */
#hud{display:none !important}

/* ---------- glass: soft frost, no outline ---------- */
.pb{-webkit-backdrop-filter:blur(20px) saturate(1.7);backdrop-filter:blur(20px) saturate(1.7);background:var(--sh-glass);color:var(--sh-ink);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 12px 32px -24px rgba(0,0,0,.4);transition:background-color .4s,color .4s,box-shadow .4s,transform .5s var(--sh-ease)}
.pb.dk{background:var(--sh-glass-dk);color:var(--sh-cream);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 12px 32px -24px rgba(0,0,0,.7)}

/* ---------- product bar: shows once the first screen is behind you ---------- */
.pb{position:fixed;z-index:89;top:12px;left:50%;transform:translate(-50%,calc(-100% - 24px));width:min(1240px,calc(100% - 24px));height:52px;box-sizing:border-box;display:flex;align-items:center;gap:6px;padding:0 6px 0 20px;border-radius:12px}
.pb.is-shown{transform:translate(-50%,0)}
.pb .nm{margin-right:auto;font:500 15px/1 var(--sh-sans);color:inherit;text-decoration:none;white-space:nowrap}
.pb .ls{display:flex;align-items:center;gap:2px}
.pb .ls a{display:inline-flex;align-items:center;height:34px;padding:0 11px;border-radius:6px;font:400 13.5px/1 var(--sh-sans);color:inherit;opacity:.66;text-decoration:none;white-space:nowrap;transition:background .2s,opacity .2s}
@media (hover:hover) and (pointer:fine){.pb .ls a:hover{opacity:1;background:rgba(0,0,0,.05)}}@media (hover:hover) and (pointer:fine){.pb.dk .ls a:hover{background:rgba(255,255,255,.08)}}
.pb .ls a.on{opacity:1;background:rgba(0,0,0,.06)}.pb.dk .ls a.on{background:rgba(255,255,255,.1)}
.pb .cta{display:flex;align-items:center;gap:6px;margin-left:8px}
.pb .cta .sb{display:inline-flex}
.pb .tog{all:unset;box-sizing:border-box;cursor:pointer;display:none;align-items:center;gap:6px;height:36px;padding:0 10px;border-radius:6px;font:400 14px/1 var(--sh-sans);color:inherit;opacity:.8}
.pb .tog svg{width:9px;height:9px;transition:transform .2s}.pb.open .tog svg{transform:rotate(180deg)}
@media (max-width:900px){
 .pb{padding-left:16px}
 .pb .tog{display:inline-flex}
 .pb .ls{display:none;position:absolute;top:calc(100% + 8px);left:0;right:0;flex-direction:column;align-items:stretch;padding:6px;border-radius:12px;background:var(--sh-panel);color:var(--sh-ink);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:0 24px 50px -24px rgba(0,0,0,.4)}
 .pb.dk .ls{background:var(--sh-panel-dk);color:var(--sh-cream)}
 .pb.open .ls{display:flex}
 .pb .ls a{height:44px;font-size:15px;opacity:.8}
 .pb .cta{margin-left:0}.pb .cta .sb{height:38px;padding:0 14px}
}

/* ---------- questions ---------- */
.qa{position:relative;max-width:1000px;margin:0 auto;padding:120px max(20px,env(safe-area-inset-left,0px)) 80px;box-sizing:content-box}
.qa h2{margin:0;font:400 clamp(36px,4vw,60px)/1 var(--sh-disp);letter-spacing:-.045em}
.qa-list{margin-top:40px;border-top:1px solid rgba(0,0,0,.12)}
.qa details{border-bottom:1px solid rgba(0,0,0,.12)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font:400 clamp(18px,1.6vw,22px)/1.3 var(--sh-disp);letter-spacing:-.02em}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";width:11px;height:11px;flex:none;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-3px);transition:transform .3s var(--sh-ease)}
.qa details[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.qa details p{margin:0 0 22px;max-width:62ch;font:400 16px/1.5 var(--sh-sans);opacity:.6}

/* Before and after the Taku OS repo is public (TAKU_OS_REPO_PUBLIC): each page shows one of a pair of entries */
.tk[data-repo="pre"] .rp-live,.tk[data-repo="live"] .rp-pre{display:none !important}

.pb a:focus-visible,.pb button:focus-visible{outline:2px solid var(--sh-org);outline-offset:2px}