/* =========================================================================
   BACKBENCH — Pro and AI Studio (all themes; Premium Glass gets its own
   finish at the bottom). Colours come from the theme tokens; the only fixed
   colours are Pro's gold and the printed-paper look of a sample paper.
   ========================================================================= */
:root{--pro-1:#FFE08A;--pro-2:#F4B940;--pro-3:#C98A12;--pro-tx:#2A1C00;--bb-pro:62}

/* ---- the little crown chips ---- */
.chip-pro{gap:5px;font-weight:800;letter-spacing:.02em}
.chip-pro svg{width:14px;height:14px}
.chip-pro.on{background:linear-gradient(180deg,var(--pro-1),var(--pro-2))!important;color:var(--pro-tx)!important;border-color:transparent!important;
  box-shadow:0 4px 14px -6px rgba(244,185,64,.8)!important}
.chip-pro.on svg{color:var(--pro-tx)}
@media (max-width:420px){.chip-pro span{display:none}.chip-pro{padding:6px 8px}}
.pro-pill{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:99px;font-weight:800;font-size:.84rem}
.pro-pill.on{background:linear-gradient(180deg,var(--pro-1),var(--pro-2));color:var(--pro-tx)}
.pro-pill svg{width:16px;height:16px}
.more-pro.card{display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;font:inherit;color:inherit;margin-bottom:16px;
  border-color:color-mix(in srgb,var(--pro-2) 45%,var(--line));
  background:linear-gradient(120deg,color-mix(in srgb,var(--pro-2) 14%,var(--bg-2)),var(--bg-2) 60%)}
.more-pro svg:first-child{width:40px;height:40px;padding:9px;border-radius:13px;flex:none;
  background:linear-gradient(180deg,var(--pro-1),var(--pro-2));color:var(--pro-tx)}
.more-pro div{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.more-pro span:not(.more-chev){font-size:.78rem;color:var(--tx-3)}

/* ======================= THE PRO SCREEN ======================= */
.pv{max-width:1180px}
.pv-skel{height:220px;border-radius:24px;background:linear-gradient(90deg,var(--bg-3),var(--bg-2),var(--bg-3));background-size:200% 100%;animation:pvSk 1.3s linear infinite}
@keyframes pvSk{to{background-position:-200% 0}}
.pv-hero{position:relative;overflow:hidden;display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;
  padding:clamp(20px,3.6vw,34px);border-radius:28px;margin-bottom:22px;color:#fff;
  background:radial-gradient(120% 140% at 0% 0%,#3B3FE0 0%,#1D2B6B 45%,#0E1428 100%);
  box-shadow:0 30px 60px -34px rgba(25,40,120,.9)}
.pv-hero::before{content:"";position:absolute;right:-60px;top:-80px;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,224,138,.45),transparent 65%);pointer-events:none}
.pv-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.08) 45%,transparent 60%);
  background-size:250% 100%;animation:pvShine 6s ease-in-out infinite;pointer-events:none}
@keyframes pvShine{0%,60%{background-position:120% 0}100%{background-position:-120% 0}}
.pv-hero.is-pro{background:radial-gradient(120% 140% at 0% 0%,#6B4B00 0%,#2C1F05 50%,#120D04 100%)}
.pv-crown{position:relative;z-index:1;width:74px;height:74px;border-radius:24px;display:grid;place-items:center;
  background:linear-gradient(180deg,var(--pro-1),var(--pro-2));color:var(--pro-tx);box-shadow:0 14px 30px -12px rgba(244,185,64,.9),inset 0 1px 0 rgba(255,255,255,.6)}
.pv-crown svg{width:38px;height:38px;fill:none;stroke:currentColor;stroke-width:1.7}
.pv-ht{position:relative;z-index:1;min-width:0}
.pv-ht .lab{color:var(--pro-1)!important;margin:0}
.pv-ht h1{font-size:clamp(1.7rem,5vw,2.6rem);line-height:1.04;margin:.18em 0 .3em;letter-spacing:-.03em;color:#fff}
.pv-ht p{margin:0;color:rgba(255,255,255,.78);max-width:56ch;line-height:1.55}
.pv-up{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.pv-up .chip{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.2)}
.pv-ring{position:relative;z-index:1;width:96px;height:96px;display:grid;place-items:center}
.pv-ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.pv-rb{fill:none;stroke:rgba(255,255,255,.15);stroke-width:3.5}
.pv-rf{fill:none;stroke:var(--pro-1);stroke-width:3.5;stroke-linecap:round;transition:stroke-dashoffset 1s var(--ease)}
.pv-ring b{font-family:"JetBrains Mono",monospace;font-size:1.6rem;font-weight:500;text-align:center;line-height:1;color:#fff}
.pv-ring b i{display:block;font-style:normal;font-size:.62rem;font-family:inherit;opacity:.7;letter-spacing:.1em;text-transform:uppercase;margin-top:3px}
@media (max-width:640px){.pv-hero{grid-template-columns:1fr;text-align:left}.pv-crown{width:56px;height:56px;border-radius:18px}.pv-crown svg{width:28px;height:28px}
  .pv-ring{position:absolute;right:16px;top:16px;width:70px;height:70px}.pv-ring b{font-size:1.2rem}}

.pv-grid{display:grid;gap:22px;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:start}
@media (max-width:980px){.pv-grid{grid-template-columns:minmax(0,1fr)}}
.pv-buy,.pv-side{min-width:0}
.pv-plans{display:grid;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:14px}
@media (max-width:640px){.pv-plans{grid-template-columns:1fr}}
.pv-plan{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;padding:18px 16px 16px;border-radius:22px;cursor:pointer;
  border:1.5px solid var(--line);background:var(--bg-2);color:var(--tx);font:inherit;transition:transform .25s var(--pop),border-color .2s,box-shadow .25s}
.pv-plan:hover{transform:translateY(-2px);border-color:var(--line-2)}
.pv-plan.on{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent),0 18px 36px -24px color-mix(in srgb,var(--accent) 70%,transparent)}
.pv-badge{position:absolute;top:-10px;right:12px;padding:3px 10px;border-radius:99px;font-size:.64rem;font-weight:800;letter-spacing:.04em;
  background:linear-gradient(180deg,var(--pro-1),var(--pro-2));color:var(--pro-tx);box-shadow:0 6px 14px -6px rgba(244,185,64,.8)}
.pv-radio{width:20px;height:20px;border-radius:50%;border:2px solid var(--line-2);margin-bottom:8px;transition:all .2s}
.pv-plan.on .pv-radio{border-color:var(--accent);background:radial-gradient(circle,var(--accent) 45%,transparent 50%)}
.pv-pt{font-size:.92rem}
.pv-big{font-family:"Bricolage Grotesque",sans-serif;font-size:2rem;font-weight:800;letter-spacing:-.03em;line-height:1.05}
.pv-big small{font-size:.9rem;font-weight:700;opacity:.7;margin-left:2px}
.pv-per{font-family:"JetBrains Mono",monospace;font-size:.78rem;color:var(--ok);font-weight:600}
.pv-sub{font-size:.76rem;color:var(--tx-3);line-height:1.4;margin-top:4px}
@media (max-width:640px){.pv-plan{display:grid;grid-template-columns:auto 1fr auto;column-gap:12px;align-items:center;padding:14px 16px}
  .pv-radio{grid-row:1/3;margin:0}.pv-pt{grid-column:2}.pv-big{grid-column:3;grid-row:1/3;font-size:1.6rem;text-align:right}
  .pv-per{grid-column:2;grid-row:2}.pv-sub{grid-column:1/-1;margin-top:6px}}

.pv-exam{margin-bottom:14px;display:flex;flex-direction:column;gap:14px;animation:mobIn .35s var(--ease) both}
.pv-exh{display:flex;gap:12px;align-items:flex-start}
.pv-exh svg{width:36px;height:36px;padding:8px;border-radius:12px;flex:none;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}
.pv-exh b{display:block}
.pv-exh span{font-size:.8rem;color:var(--tx-3)}
.pv-dates{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:10px;align-items:end}
.pv-dates .inp{min-width:0;width:100%}
.pv-arrow{padding-bottom:12px;color:var(--tx-3);font-size:1.2rem}
.pv-dates .inp{font-family:"JetBrains Mono",monospace}
.pv-quick{display:flex;gap:6px;flex-wrap:wrap}
.pv-days{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.pv-days::-webkit-scrollbar{display:none}
.pv-days i{flex:0 0 auto;min-width:34px;padding:6px 0;border-radius:10px;text-align:center;font-style:normal;font-size:.6rem;color:var(--tx-3);
  background:color-mix(in srgb,var(--accent) 12%,transparent);border:1px solid color-mix(in srgb,var(--accent) 25%,transparent);animation:pvDay .4s var(--ease) both}
.pv-days i b{display:block;font-size:.86rem;color:var(--tx);font-family:"JetBrains Mono",monospace}
.pv-days i:first-child,.pv-days i:last-child{background:color-mix(in srgb,var(--accent) 26%,transparent)}
@keyframes pvDay{from{opacity:0;transform:scale(.8)}}
.pv-calc{display:flex;justify-content:space-between;align-items:baseline;padding-top:12px;border-top:1px dashed var(--line-2)}
.pv-calc span{color:var(--tx-2);font-size:.88rem}
.pv-calc b{font-family:"Bricolage Grotesque",sans-serif;font-size:1.6rem}
.pv-adv{margin:0;font-size:.84rem;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--ok) 12%,transparent);color:var(--tx)}
.pv-adv.bad{background:color-mix(in srgb,var(--bad) 12%,transparent);color:var(--bad)}
.linkish{border:0;background:none;padding:0;color:var(--accent);font:inherit;font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.pv-cta{width:100%;justify-content:center;font-size:1rem;padding:15px 20px;gap:10px}
.pv-cta svg{width:19px;height:19px}
.pv-fine{text-align:center;margin-top:10px}
.pv-cmp{padding:6px 18px 16px!important}
.pv-cr{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line);font-size:.84rem}
.pv-cr:last-of-type{border-bottom:0}
.pv-cr em{font-style:normal;color:var(--tx-3);font-size:.78rem}
.pv-cr .pv-pc{color:var(--tx);font-weight:700}
.pv-ch{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase}
.pv-ch b.pv-pc{color:var(--pro-3)}
.pv-faq{margin-top:22px;display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.pv-welcome{text-align:center}
.pv-welcome svg{width:56px;height:56px;padding:12px;border-radius:18px;background:linear-gradient(180deg,var(--pro-1),var(--pro-2));color:var(--pro-tx);margin:0 auto 6px;display:block}
.pw{text-align:center}
.pw-crown svg{width:52px;height:52px;padding:12px;border-radius:17px;background:linear-gradient(180deg,var(--pro-1),var(--pro-2));color:var(--pro-tx)}
.pw p{margin:.6em 0}
.pw-plans{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:10px 0}
.pw-plans span{padding:6px 10px;border-radius:12px;background:var(--bg-3);font-size:.78rem;color:var(--tx-2)}
.pw-plans b{color:var(--tx);font-family:"JetBrains Mono",monospace}

/* ======================= AI STUDIO ======================= */
.ai-subs{margin-bottom:16px}
@media (max-width:960px){.ai-subs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--gut)*-1);padding:2px var(--gut) 6px}
  .ai-subs::-webkit-scrollbar{display:none}.ai-subs .chip{flex:none;white-space:nowrap}}
.ai-hero{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 28px;align-items:center;
  padding:clamp(20px,3.4vw,30px);border-radius:26px;margin-bottom:16px;border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));
  background:radial-gradient(90% 140% at 100% 0%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 60%),var(--bg-2)}
.ai-hero::after{content:"";position:absolute;width:220px;height:220px;right:-40px;bottom:-110px;border-radius:50%;
  background:conic-gradient(from 0deg,color-mix(in srgb,var(--accent) 40%,transparent),color-mix(in srgb,var(--pro-2) 30%,transparent),color-mix(in srgb,var(--accent) 40%,transparent));
  filter:blur(40px);opacity:.55;animation:aiSpin 12s linear infinite;pointer-events:none}
@keyframes aiSpin{to{transform:rotate(360deg)}}
.ai-hero-t{position:relative;z-index:1;min-width:0}
.ai-hero-t .lab{display:inline-flex;align-items:center;gap:6px;margin:0;color:var(--accent)}
.ai-hero-t .lab svg{width:15px;height:15px}
.ai-hero-t h2{font-size:clamp(1.4rem,4.4vw,2rem);line-height:1.1;margin:.25em 0 .35em;letter-spacing:-.02em}
.ai-hero-t h2 em{font-style:normal;color:var(--accent)}
.ai-hero-t p{margin:0 0 12px;color:var(--tx-2);max-width:52ch;line-height:1.5}
.ai-src{display:inline-flex;align-items:center;gap:7px;font-size:.78rem;color:var(--tx-3);padding:6px 11px;border-radius:99px;background:color-mix(in srgb,var(--tx) 6%,transparent)}
.ai-src svg{width:14px;height:14px}
.ai-hero-r{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.ai-hero-r .tiny{margin:0}
.ai-q b{display:block;font-family:"Bricolage Grotesque",sans-serif;font-size:3rem;line-height:1;letter-spacing:-.04em}
.ai-q span{font-size:.76rem;color:var(--tx-3)}
@media (max-width:700px){.ai-hero{grid-template-columns:1fr}.ai-hero-r{flex-direction:row;flex-wrap:wrap;justify-content:space-between;text-align:left}
  .ai-hero-r .btn{flex:1 1 100%;justify-content:center}.ai-q{display:flex;align-items:baseline;gap:8px}.ai-q b{font-size:2.2rem}}
.ai-tools{display:grid;gap:12px;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:24px}
@media (max-width:960px){.ai-tools{grid-template-columns:1fr 1fr}}
.ai-tool{display:flex;flex-direction:column;align-items:flex-start;gap:5px;text-align:left;padding:16px;border-radius:22px;border:1px solid var(--line);
  background:var(--bg-2);color:var(--tx);font:inherit;cursor:pointer;transition:transform .25s var(--pop),border-color .2s,box-shadow .25s;min-width:0}
.ai-tool:hover{transform:translateY(-3px);border-color:var(--line-2);box-shadow:0 18px 32px -24px rgba(0,0,0,.5)}
.ai-tool:active{transform:scale(.97)}
.ai-tool b{font-size:.96rem;margin-top:6px}
.ai-tool>span:not(.ai-ti){font-size:.76rem;color:var(--tx-3);line-height:1.4}
.ai-ti{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent)}
.ai-ti svg{width:21px;height:21px}
.ai-ti.big{width:64px;height:64px;border-radius:20px;margin:0 auto 6px}
.ai-ti.big svg{width:30px;height:30px}
.ai-tool:nth-child(2) .ai-ti{background:color-mix(in srgb,var(--ok) 15%,transparent);color:var(--ok)}
.ai-tool:nth-child(3) .ai-ti{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}
.ai-tool:nth-child(4) .ai-ti{background:color-mix(in srgb,var(--accent-2,var(--accent)) 16%,transparent);color:var(--accent-2,var(--accent))}
.ai-left{margin-top:auto;padding-top:8px;font-style:normal;font-size:.68rem;font-weight:700;color:var(--tx-2)}
.ai-plist{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr))}
.ai-pp.card{display:flex;align-items:center;gap:12px;text-align:left;cursor:pointer;font:inherit;color:inherit;width:100%;padding:14px 16px}
.ai-pp div{flex:1;min-width:0}
.ai-pp b{display:block;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-pp div span{font-size:.74rem;color:var(--tx-3)}
.ai-ppi{width:38px;height:44px;border-radius:8px;display:grid;place-items:center;flex:none;background:#FFFDF8;color:#1b1b22;box-shadow:0 4px 10px -4px rgba(0,0,0,.4)}
.ai-ppi svg{width:20px;height:20px}
.ai-back{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.ai-crumb{font-size:.8rem;color:var(--tx-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* builder */
.pb-grid{display:grid;gap:14px;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);align-items:start;margin-bottom:14px}
@media (max-width:980px){.pb-grid{grid-template-columns:1fr}}
.pb-card{display:flex;flex-direction:column;gap:14px}
.pb-h{display:flex;gap:12px;align-items:flex-start}
.pb-h b{display:block}
.pb-h span{font-size:.8rem;color:var(--tx-3)}
.pb-n{width:30px;height:30px;border-radius:50%;display:grid!important;place-items:center;flex:none;font-weight:800;font-size:.86rem!important;
  background:var(--solid);color:var(--solid-tx)!important}
.ai-srcs{display:flex;flex-direction:column;gap:6px;max-height:420px;overflow:auto}
.ai-srow{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;border:1px solid var(--line);cursor:pointer;transition:background .2s}
.ai-srow:hover{background:color-mix(in srgb,var(--tx) 4%,transparent)}
.ai-srow input{width:18px;height:18px;accent-color:var(--accent);flex:none}
.ai-si{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;flex:none;background:color-mix(in srgb,var(--tx) 6%,transparent);color:var(--tx-2)}
.ai-si svg{width:16px;height:16px}
.ai-srow>span:last-child{min-width:0;display:flex;flex-direction:column}
.ai-srow b{font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-srow em{font-style:normal;font-size:.72rem;color:var(--tx-3)}
.pb-pre{margin:0}
.pb-secs{display:flex;flex-direction:column;gap:8px}
.pb-sec{display:grid;grid-template-columns:56px minmax(0,1.3fr) repeat(3,minmax(0,.8fr)) auto;gap:8px;align-items:end;padding:10px;border-radius:14px;
  background:color-mix(in srgb,var(--tx) 4%,transparent);border:1px solid var(--line);animation:mobIn .3s var(--ease) both}
.pb-sec label{display:flex;flex-direction:column;gap:3px;min-width:0}
.pb-sec label span{font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-3);white-space:nowrap}
.pb-sec .inp{padding:8px 10px;font-size:.86rem;min-width:0}
.pb-nm{text-align:center;font-weight:800}
.pb-x{padding:8px!important}
@media (max-width:640px){.pb-sec{grid-template-columns:repeat(6,minmax(0,1fr))}.pb-nm{grid-column:span 1}.pb-sec select{grid-column:span 4}.pb-x{grid-column:6;grid-row:1;justify-self:end}.pb-nm{grid-row:1}.pb-sec select{grid-row:1}
  .pb-sec label{grid-column:span 2}}
.pb-meta{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:end}
@media (max-width:640px){.pb-meta{grid-template-columns:1fr 1fr}.pb-meta .f:nth-child(2){grid-column:1/-1;grid-row:1}}
.pb-total{text-align:right}
.pb-total .lab{margin:0}
.pb-total b{display:block;font-size:2rem;line-height:1;letter-spacing:-.04em}
.pb-go{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  border-color:color-mix(in srgb,var(--accent) 40%,var(--line))!important}
.pb-go b{display:block}
.pb-go span{font-size:.78rem;color:var(--tx-3)}
@media (max-width:640px){.pb-go .btn{width:100%;justify-content:center}}

/* waiting */
.ai-wait{position:fixed;inset:0;z-index:150;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;text-align:center;
  background:color-mix(in srgb,var(--bg) 80%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);animation:mtIn .3s ease both;transition:opacity .3s}
.ai-wait.out{opacity:0}
.ai-wait b{font-family:"Bricolage Grotesque",sans-serif;font-size:1.5rem}
.ai-step{color:var(--tx-2);font-size:.9rem;min-height:1.4em;animation:aiFade .5s ease}
@keyframes aiFade{from{opacity:0;transform:translateY(4px)}}
.ai-orb{position:relative;width:92px;height:92px;margin-bottom:8px}
.ai-orb i{position:absolute;inset:0;border-radius:50%;mix-blend-mode:screen;filter:blur(1px);animation:aiOrb 2.6s ease-in-out infinite}
.ai-orb i:nth-child(1){background:radial-gradient(circle at 30% 30%,#8FB8FF,#2D7FFF 60%,transparent 70%)}
.ai-orb i:nth-child(2){background:radial-gradient(circle at 70% 40%,#FFE08A,#F4B940 55%,transparent 70%);animation-delay:-.9s}
.ai-orb i:nth-child(3){background:radial-gradient(circle at 45% 75%,#7BE3AE,#12A36B 55%,transparent 70%);animation-delay:-1.7s}
@keyframes aiOrb{0%,100%{transform:scale(.72) translate(0,0)}33%{transform:scale(.9) translate(8px,-6px)}66%{transform:scale(.8) translate(-8px,6px)}}
.ai-bar{width:min(260px,70vw);height:4px;border-radius:99px;overflow:hidden;background:color-mix(in srgb,var(--tx) 10%,transparent)}
.ai-bar i{display:block;height:100%;width:40%;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--pro-2));animation:aiBar 1.6s ease-in-out infinite}
@keyframes aiBar{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}

/* ---- the paper ---- */
.pp-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.pp-bar .btn svg{width:15px;height:15px}
@media (max-width:640px){.pp-bar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--gut)*-1);padding:2px var(--gut) 6px;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--gut),#000 calc(100% - 28px),transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 var(--gut),#000 calc(100% - 28px),transparent 100%)}
  .pp-bar::-webkit-scrollbar{display:none}.pp-bar .btn{flex:none;white-space:nowrap}}
.pp-grid{display:grid;gap:18px;grid-template-columns:minmax(0,1fr) 300px;align-items:start}
@media (max-width:1100px){.pp-grid{grid-template-columns:1fr}}
.pp-sheet{background:#FFFDF8;color:#1C1B22;border-radius:6px;padding:clamp(22px,5vw,56px) clamp(18px,5vw,60px);
  box-shadow:0 1px 0 rgba(0,0,0,.05),0 30px 60px -30px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.06);
  font-family:"Georgia","Times New Roman",serif;line-height:1.6;animation:ppIn .6s var(--ease) both;
  background-image:linear-gradient(transparent 0,transparent 100%)}
@keyframes ppIn{from{opacity:0;transform:translateY(16px) rotate(-.4deg)}}
.pp-head{text-align:center;border-bottom:2px solid #1C1B22;padding-bottom:16px;margin-bottom:18px}
.pp-uni{font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.pp-course{font-size:.86rem;color:#4a4854;margin-top:2px}
.pp-head h2{font-family:inherit;font-size:clamp(1.3rem,4vw,1.8rem);margin:.35em 0 .1em;line-height:1.2;color:#1C1B22}
.pp-tag{display:inline-block;margin-top:6px;padding:2px 10px;border-radius:99px;font:600 .66rem "Instrument Sans",sans-serif;letter-spacing:.06em;text-transform:uppercase;background:#EFEBE0;color:#6b6776}
.pp-tm{display:flex;justify-content:space-between;margin-top:14px;font-weight:700;font-size:.92rem}
.pp-ins{text-align:left;margin:12px 0 0;padding-left:20px;font-size:.86rem;font-style:italic;color:#3d3b45}
.pp-sec{margin-top:22px}
.pp-sh{display:flex;justify-content:space-between;align-items:baseline;gap:10px;border-bottom:1px solid #d9d4c5;padding-bottom:6px}
.pp-sh h3{margin:0;font-family:inherit;font-size:1.1rem;text-transform:uppercase;letter-spacing:.06em;color:#1C1B22}
.pp-sh span{font-family:"JetBrains Mono",monospace;font-size:.8rem;color:#4a4854;white-space:nowrap}
.pp-si{margin:8px 0 4px;font-style:italic;font-size:.9rem;color:#3d3b45}
.pp-q{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:6px;padding:10px 0;border-bottom:1px dotted #e3ddcc;animation:mobIn .4s var(--ease) both}
.pp-q:last-child{border-bottom:0}
.pp-no{font-weight:700}
.pp-qt p{margin:0}
.pp-m{font-family:"JetBrains Mono",monospace;font-size:.82rem;font-weight:600;color:#4a4854;white-space:nowrap}
.pp-lk{display:inline-block;font:700 .62rem "Instrument Sans",sans-serif;font-style:normal;letter-spacing:.04em;padding:1px 7px;border-radius:99px;
  background:#FFF1C9;color:#8A5B00;vertical-align:2px;margin-left:4px}
.pp-op{margin:6px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;font-size:.94rem}
@media (max-width:560px){.pp-op{grid-template-columns:1fr}}
.pp-hint{display:none;margin-top:8px;padding:9px 12px;border-radius:8px;background:#EEF4FF;border-left:3px solid #2D7FFF;font:500 .84rem/1.5 "Instrument Sans",sans-serif;color:#1f2a44}
.pp-hint b{color:#2D7FFF;margin-right:4px}
.pp-sheet.hints .pp-hint{display:block;animation:mobIn .3s var(--ease) both}
.pp-unit{display:none;margin-top:6px;font:600 .66rem "Instrument Sans",sans-serif;color:#8a8694;letter-spacing:.06em;text-transform:uppercase}
.pp-sheet.hints .pp-unit{display:inline-block}
.pp-end{text-align:center;margin-top:26px;font-size:.84rem;color:#6b6776;letter-spacing:.2em}
.pp-side{display:flex;flex-direction:column;gap:12px;position:sticky;top:90px}
@media (max-width:1100px){.pp-side{position:static}}
.pp-side .lab{display:inline-flex;align-items:center;gap:6px}
.pp-side .lab svg{width:14px;height:14px}
.pp-st{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.pp-st div{text-align:center;padding:10px 4px;border-radius:12px;background:color-mix(in srgb,var(--tx) 5%,transparent)}
.pp-st b{display:block;font-family:"JetBrains Mono",monospace;font-size:1.3rem;font-weight:500}
.pp-st span{font-size:.66rem;color:var(--tx-3)}
.pp-tp{display:grid;grid-template-columns:1fr auto;gap:4px 10px;margin-top:10px;font-size:.82rem}
.pp-tp b{font-family:"JetBrains Mono",monospace;font-size:.78rem}
.pp-tp i{grid-column:1/-1;height:6px;border-radius:99px;background:color-mix(in srgb,var(--tx) 8%,transparent);overflow:hidden}
.pp-tp em{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--ok));transform-origin:left;animation:saGrow .9s var(--ease) both}
.pp-tips{margin:10px 0 0;padding-left:18px;font-size:.84rem;line-height:1.5;color:var(--tx-2)}
.pp-tips li{margin-bottom:6px}
.pp-timer{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:95;display:flex;align-items:center;gap:10px;
  padding:6px 6px 6px 14px;border-radius:99px;background:color-mix(in srgb,var(--bg-2) 92%,transparent);border:1px solid var(--line-2);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 14px 30px -14px rgba(0,0,0,.6);animation:mobIn .4s var(--ease) both}
@media (min-width:961px){.pp-timer{bottom:auto;top:14px;left:auto;right:24px;transform:none}}
.pp-tt{display:flex;align-items:center;gap:7px}
.pp-tt svg{width:17px;height:17px;color:var(--accent)}
.pp-tt b{font-family:"JetBrains Mono",monospace;font-size:1.05rem;font-variant-numeric:tabular-nums}
.pp-timer.low .pp-tt b,.pp-timer.low svg{color:var(--bad)}
@media print{
  html.pp-printing body *{visibility:hidden!important}
  html.pp-printing .pp-sheet,html.pp-printing .pp-sheet *{visibility:visible!important}
  html.pp-printing .pp-sheet{position:absolute;left:0;top:0;width:100%;box-shadow:none;border-radius:0;padding:24px 32px;animation:none}
  html.pp-printing .pp-q{animation:none;break-inside:avoid}
  html.pp-printing .lq,html.pp-printing .tabs,html.pp-printing .mtop{display:none!important}
}

/* ---- ask ---- */
.ask-wrap{display:flex;flex-direction:column;gap:12px;max-width:860px}
.ask-log{display:flex;flex-direction:column;gap:14px;min-height:40vh;max-height:62vh;overflow:auto;padding:4px 2px}
.ask-m{display:flex;gap:10px;align-items:flex-start;animation:mobIn .35s var(--ease) both}
.ask-m.me{justify-content:flex-end}
.ask-m.me .ask-b{background:var(--solid);color:var(--solid-tx);border-radius:18px 18px 4px 18px;max-width:80%}
.ask-m.ai .ask-b{background:var(--bg-2);border:1px solid var(--line);border-radius:18px 18px 18px 4px;max-width:88%}
.ask-b{padding:11px 15px;font-size:.92rem;line-height:1.55;min-width:0;overflow-wrap:anywhere}
.ask-b p{margin:.3em 0}
.ask-b ul,.ask-b ol{margin:.3em 0;padding-left:20px}
.ask-av{width:32px;height:32px;border-radius:11px;display:grid;place-items:center;flex:none;background:linear-gradient(135deg,var(--accent),var(--pro-2));color:#fff}
.ask-av svg{width:17px;height:17px}
.ask-src{font-size:.72rem;color:var(--warn);margin:8px 0 0!important}
.ask-fu{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.ask-fu .chip{font-size:.76rem;text-align:left;white-space:normal}
.ask-empty{text-align:center;margin:auto;padding:30px 10px;max-width:460px}
.ask-empty .ai-ti{margin:0 auto 10px}
.ask-empty h3{margin:0 0 4px}
.ask-empty p{color:var(--tx-3);margin:0}
.ask-empty .ask-fu{justify-content:center}
.ai-from{max-width:520px}
.ask-in{display:flex;gap:8px;position:sticky;bottom:calc(92px + env(safe-area-inset-bottom));z-index:4;padding:6px;border-radius:99px;
  background:color-mix(in srgb,var(--bg-2) 92%,transparent);border:1px solid var(--line-2);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
@media (min-width:961px){.ask-in{bottom:16px}}
.ask-in .inp{border:0;background:transparent;border-radius:99px}
.ask-in .btn{border-radius:99px;padding:10px 14px}
.ask-send{width:18px;height:18px;transform:rotate(180deg)}

/* ---- setup cards, quiz, cards, sheet ---- */
.ai-setup{max-width:560px;margin:10px auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;padding:clamp(22px,4vw,34px)!important}
.ai-setup h2{margin:0;font-size:clamp(1.4rem,4.4vw,1.8rem)}
.ai-setup p{margin:0;color:var(--tx-2);line-height:1.5}
.ai-setup .f{width:100%;text-align:left}
.ai-setup>.btn{width:100%;justify-content:center}
.qz{max-width:720px;margin:0 auto}
.qz-top{display:flex;align-items:center;gap:12px;margin-bottom:12px;font-size:.8rem;color:var(--tx-3);font-weight:700}
.qz-prog{flex:1;height:6px;border-radius:99px;background:color-mix(in srgb,var(--tx) 8%,transparent);overflow:hidden}
.qz-prog i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--ok));transition:width .5s var(--ease)}
.qz-card{display:flex;flex-direction:column;gap:14px;animation:mobIn .35s var(--ease) both}
.qz-q{margin:0;font-size:clamp(1.05rem,3.6vw,1.3rem);line-height:1.4}
.qz-ops{display:flex;flex-direction:column;gap:8px}
.qz-op{display:flex;align-items:center;gap:12px;text-align:left;padding:13px 14px;border-radius:14px;border:1.5px solid var(--line);background:var(--bg-2);
  color:var(--tx);font:inherit;font-size:.92rem;cursor:pointer;transition:all .2s}
.qz-op:hover:not([disabled]){border-color:var(--accent);transform:translateX(3px)}
.qz-l{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;flex:none;font-weight:800;font-size:.8rem;background:color-mix(in srgb,var(--tx) 7%,transparent)}
.qz-op.ok{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,var(--bg-2))}
.qz-op.ok .qz-l{background:var(--ok);color:#fff}
.qz-op.bad{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 10%,var(--bg-2));animation:qzShake .4s}
.qz-op.bad .qz-l{background:var(--bad);color:#fff}
.qz-op.dim{opacity:.55}
@keyframes qzShake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.qz-why{padding:12px 14px;border-radius:14px;font-size:.88rem;line-height:1.5;background:color-mix(in srgb,var(--ok) 10%,transparent)}
.qz-why.bad{background:color-mix(in srgb,var(--bad) 9%,transparent)}
.qz-why b{margin-right:4px}
.qz-ring{--p:0;width:120px;height:120px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--ok) calc(var(--p)*1%),color-mix(in srgb,var(--tx) 8%,transparent) 0)}
.qz-ring b{width:94px;height:94px;border-radius:50%;display:grid;place-items:center;background:var(--bg-2);font-family:"JetBrains Mono",monospace;font-size:1.5rem}
.qz-review{max-width:720px;margin:16px auto 0}
.cd-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}
.cd{position:relative;min-height:150px;border:0;padding:0;background:none;cursor:pointer;perspective:900px;font:inherit;color:inherit;animation:mobIn .4s var(--ease) both}
.cd span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:18px;border-radius:18px;font-size:.92rem;line-height:1.45;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform .55s cubic-bezier(.3,1.3,.45,1);border:1px solid var(--line)}
.cd-f{background:var(--bg-2);font-weight:700}
.cd-b{background:color-mix(in srgb,var(--accent) 12%,var(--bg-2));transform:rotateY(180deg)}
.cd.flip .cd-f{transform:rotateY(180deg)}
.cd.flip .cd-b{transform:rotateY(360deg)}
.sh-grid{display:grid;gap:14px;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:start}
@media (max-width:960px){.sh-grid{grid-template-columns:1fr}}
.sh-pts{margin:10px 0 0;padding-left:22px;line-height:1.6}
.sh-pts li{margin-bottom:8px}
.sh-side{display:flex;flex-direction:column;gap:12px}
.sh-t{padding:8px 0;border-bottom:1px solid var(--line)}
.sh-t:last-child{border-bottom:0}
.sh-t b{display:block;font-size:.88rem}
.sh-t span{font-size:.8rem;color:var(--tx-2)}
.sh-f{padding:8px 10px;border-radius:10px;background:color-mix(in srgb,var(--tx) 5%,transparent);margin:8px 0 0;font-size:.84rem}

/* ======================= PREMIUM GLASS FINISH ======================= */
html:root[data-theme="premium"] .pv-plan,html:root[data-theme="premium"] .ai-tool,html:root[data-theme="premium"] .ai-hero,
html:root[data-theme="premium"] .qz-op,html:root[data-theme="premium"] .ai-srow,html:root[data-theme="premium"] .pb-sec{
  background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.035))!important;border-color:rgba(255,255,255,.09)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
html:root[data-theme="premium"] .pv-plan.on{border-color:rgba(143,184,255,.7)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 0 3px rgba(143,184,255,.18),0 20px 40px -26px rgba(143,184,255,.8)!important}
html:root[data-theme="premium"] .ai-hero{background:radial-gradient(90% 140% at 100% 0%,rgba(143,184,255,.2),transparent 60%),linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03))!important}
html:root[data-theme="premium"] .ask-m.ai .ask-b{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1)}
html:root[data-theme="premium"] .ask-in,html:root[data-theme="premium"] .pp-timer{background:rgba(18,22,30,.78);border-color:rgba(255,255,255,.12)}
html:root[data-theme="premium"] .cd-f{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.1)}
html:root[data-theme="premium"] .cd-b{background:rgba(143,184,255,.14);border-color:rgba(143,184,255,.25)}
html:root[data-theme="premium"] .pv-hero{box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 30px 60px -34px rgba(0,0,0,.9)}
@media (prefers-reduced-motion:reduce){.pv-hero::after,.ai-hero::after,.ai-orb i,.ai-bar i,.pv-skel{animation:none}}

/* the header crown sits in a row of glass chips that Premium flattens; Pro keeps its gold */
html:root[data-theme="premium"] .mtop .chip-pro.on,html:root[data-theme="premium"] .chip-pro.on{
  background:linear-gradient(180deg,var(--pro-1),var(--pro-2))!important;border-color:transparent!important;color:var(--pro-tx)!important;
  box-shadow:0 4px 14px -6px rgba(244,185,64,.8),inset 0 1px 0 rgba(255,255,255,.6)!important}
html:root[data-theme="premium"] .chip-pro.on svg{color:var(--pro-tx)!important;stroke:var(--pro-tx)!important}
html:root[data-theme="premium"] .chip-pro:not(.on) svg{color:var(--pro-1)}

/* =========================================================================
   v65 · THE DESKTOP SHELL
   The rail was a scrolling list inside a darker box inside the rail, with a
   scrollbar always showing and the last sections cut off at 1080p. Now the
   whole list fits on a normal monitor, the box is gone (the rail itself is
   the one pane), the scrollbar only appears when a short screen needs it and
   you are over the rail, and Ctrl/⌘ K jumps anywhere.
   ========================================================================= */
@media (min-width:961px){
  .rail{padding:16px 12px 10px}
  .rail .brand{padding:2px 10px 2px}
  .rail-scroll{margin:14px -6px 0;padding:0 6px 8px;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 8px,#000 calc(100% - 18px),transparent 100%);
            mask-image:linear-gradient(180deg,transparent 0,#000 8px,#000 calc(100% - 18px),transparent 100%)}
  .rail-scroll::-webkit-scrollbar{width:0}
  .rail:hover .rail-scroll{scrollbar-width:thin}
  .rail:hover .rail-scroll::-webkit-scrollbar{width:4px}
  .nav{gap:0}
  .nav-g{padding:12px 12px 5px;font-size:.58rem;letter-spacing:.17em;line-height:1.1}
  .nav>.nav-g:first-of-type,.nav>.nav-ind+.nav-g{padding-top:8px}
  .nv{padding:7px 12px;gap:11px;font-size:.865rem;line-height:1.2;min-height:32px;border-radius:10px}
  .nv .nv-i,.nv>svg{width:17px;height:17px}
  .nav-ind{border-radius:10px}
  /* "You" is the account block at the bottom of the rail already */
  .nav .nv[data-go="me"]{display:none}
  .rail-foot{padding-top:9px;gap:6px}
  .rail-me{padding:7px 9px}
  .rail-by{margin-top:4px}

  /* ---- premium: one pane, lit from the left edge ---- */
  html:root[data-theme="premium"] .nav{background:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border:0!important}
  html:root[data-theme="premium"] .rail{
    background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012) 40%,rgba(255,255,255,.02))!important;
    box-shadow:inset -1px 0 0 rgba(255,255,255,.06)!important}
  html:root[data-theme="premium"] .nav-ind{
    background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.06))!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 8px 20px -12px rgba(0,0,0,.9)!important}
  html:root[data-theme="premium"] .nv[aria-current="page"] .nv-i{color:var(--accent)}
  html:root[data-theme="premium"] .nav-g{color:rgba(255,255,255,.38)}

  /* ---- Paper and Ink: a quieter rail, the page is the star ---- */
  :root[data-theme="dark"] .rail{background:linear-gradient(180deg,#0E0F16,#0A0B10)}
  :root[data-theme="light"] .rail,:root:not([data-theme]) .rail{box-shadow:inset -1px 0 0 rgba(255,255,255,.5)}

  /* ---- the top bar on a desktop ---- */
  .mtop{min-height:60px}
  .mtop-t{font-size:1.06rem}
}

/* ---- Jump to: the button in the top bar ---- */
.mtop-k{display:inline-flex;align-items:center;gap:9px;height:34px;padding:0 8px 0 12px;margin-right:4px;min-width:230px;
  border-radius:11px;border:1px solid var(--line);background:color-mix(in srgb,var(--bg-2) 80%,transparent);color:var(--tx-3);
  font:inherit;font-size:.83rem;cursor:pointer;transition:border-color .18s,color .18s,background .18s,transform .2s var(--pop)}
.mtop-k:hover{border-color:var(--line-2);color:var(--tx-2);transform:translateY(-1px)}
.mtop-k svg{width:15px;height:15px;flex:none}
.mtop-k span{flex:1;text-align:left}
.mtop-k kbd,.jp kbd{font-family:"JetBrains Mono",monospace;font-size:.66rem;font-weight:600;padding:2px 6px;border-radius:6px;
  border:1px solid var(--line);background:var(--bg-3);color:var(--tx-3);line-height:1.4}
@media (max-width:1180px){.mtop-k{min-width:0}.mtop-k span{display:none}}
@media (max-width:960px){.mtop-k{display:none}}
html:root[data-theme="premium"] .mtop-k{background:rgba(255,255,255,.035)!important;border-color:var(--line-2)!important}
:root[data-theme="sticker"] .mtop-k{border:1.5px solid var(--key);background:var(--bg-2)}

/* ---- Jump to: the palette ---- */
.jp{position:fixed;inset:0;z-index:300;display:grid;place-items:start center;padding:14vh 16px 16px;
  background:color-mix(in srgb,#000 42%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  animation:jpFade .18s ease both}
.jp.out{animation:jpFade .16s ease reverse both}
.jp-box{width:min(600px,100%);max-height:min(560px,72vh);display:flex;flex-direction:column;overflow:hidden;
  border-radius:20px;border:1px solid var(--line-2);background:var(--bg-2);color:var(--tx);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7),0 0 0 1px rgba(0,0,0,.04);animation:jpIn .32s cubic-bezier(.2,.9,.25,1.05) both}
.jp-in{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.jp-in svg{width:19px;height:19px;color:var(--tx-3);flex:none}
.jp-in input{flex:1;min-width:0;border:0;outline:0;background:none;color:var(--tx);font:inherit;font-size:1.05rem}
.jp-in input::placeholder{color:var(--tx-3)}
.jp-list{overflow-y:auto;padding:8px;scrollbar-width:thin}
.jp-g{margin:10px 10px 4px;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-3);font-weight:700}
.jp-g:first-child{margin-top:4px}
.jp-i{display:flex;align-items:center;gap:12px;width:100%;padding:9px 10px;border:0;border-radius:12px;background:none;
  color:var(--tx-2);font:inherit;font-size:.92rem;text-align:left;cursor:pointer}
.jp-i b{font-weight:600;flex:1;min-width:0}
.jp-ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;background:var(--bg-3);color:var(--tx-3)}
.jp-ic svg{width:16px;height:16px}
.jp-i.on{background:color-mix(in srgb,var(--accent) 13%,transparent);color:var(--tx)}
.jp-i.on .jp-ic{background:var(--accent);color:#fff}
.jp-sub,.jp-here{font-style:normal;font-size:.72rem;color:var(--tx-3)}
.jp-here{color:var(--accent);font-weight:700}
.jp-none{padding:22px 12px;text-align:center;color:var(--tx-3);font-size:.9rem}
.jp-foot{display:flex;gap:16px;padding:10px 16px;border-top:1px solid var(--line);font-size:.72rem;color:var(--tx-3)}
.jp-foot span{display:inline-flex;align-items:center;gap:4px}
@keyframes jpFade{from{opacity:0}}
@keyframes jpIn{from{opacity:0;transform:translateY(-10px) scale(.97)}}
html:root[data-theme="premium"] .jp-box{background:rgba(18,20,26,.82);-webkit-backdrop-filter:blur(30px) saturate(1.6);backdrop-filter:blur(30px) saturate(1.6);
  border-color:rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 40px 90px -30px rgba(0,0,0,.9)}
html:root[data-theme="premium"] .jp-i.on{background:rgba(255,255,255,.08)}
html:root[data-theme="premium"] .jp-i.on .jp-ic{background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.1));color:var(--tx)}
:root[data-theme="sticker"] .jp-box{border:1.5px solid var(--key);box-shadow:0 5px 0 -1px var(--key),0 40px 90px -30px rgba(0,0,0,.8)}
:root[data-theme="sticker"] .jp-i.on{background:color-mix(in srgb,var(--yel) 22%,transparent)}
:root[data-theme="sticker"] .jp-i.on .jp-ic{background:var(--yel);color:#1A1203}
@media (prefers-reduced-motion:reduce){.jp,.jp-box,.jp.out{animation:none}}

/* =========================================================================
   v66 · AI Studio header, preview strip, the paper's go-bar
   ========================================================================= */
/* the preview note is one quiet line, not a paragraph */
.mt-strip.pv-strip{padding:7px 8px 7px 12px;border-radius:99px;font-size:.74rem;gap:8px;margin-bottom:12px;width:fit-content;max-width:100%}
.mt-strip.pv-strip span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;font-weight:600}
.mt-strip.pv-strip i{width:7px;height:7px}
.pv-go{flex:none;padding:4px 10px;border-radius:99px;font-size:.7rem;font-weight:800;text-decoration:none;
  background:var(--accent);color:#fff;letter-spacing:.01em}
.pv-go:hover{filter:brightness(1.1)}
:root[data-theme="light"] .pv-go,:root:not([data-theme]) .pv-go{background:var(--solid);color:var(--solid-tx)}
:root[data-theme="sticker"] .pv-go{background:var(--yel);color:#1A1203;border:1.5px solid var(--key)}

/* AI Studio: title and the crown on one line, the line under it full width */
.ai-head{display:block!important}
.ai-head-r{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ai-head-r h1{margin:0}
.ai-head .lead{margin-top:8px}
.ai-gopro{border:0;cursor:pointer;font:inherit;font-weight:800;font-size:.84rem;
  background:linear-gradient(180deg,var(--pro-1),var(--pro-2));color:var(--pro-tx);
  box-shadow:0 8px 20px -10px rgba(244,185,64,.9),inset 0 1px 0 rgba(255,255,255,.55);transition:transform .2s var(--pop),box-shadow .2s}
.ai-gopro:hover{transform:translateY(-2px);box-shadow:0 12px 26px -10px rgba(244,185,64,1),inset 0 1px 0 rgba(255,255,255,.55)}
.ai-gopro svg{color:var(--pro-tx)}
:root[data-theme="sticker"] .ai-gopro{border:1.5px solid var(--key);box-shadow:0 3px 0 -1px var(--key)}
@media (max-width:960px){
  .ai-subs{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--gut),#000 calc(100% - 28px),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 var(--gut),#000 calc(100% - 28px),transparent 100%)}
}

/* ---- under the floating dock: the strip between the dock and the bottom of
   the screen used to show the page clearly through the gap. It is frosted
   and shaded now, in every theme, and fades out above the dock. ---- */
.dock-scrim{display:none}
@media (max-width:960px){
  .dock-scrim{display:block;position:fixed;left:0;right:0;bottom:0;z-index:59;pointer-events:none;
    height:calc(62px + env(safe-area-inset-bottom));
    background:linear-gradient(to top,color-mix(in srgb,var(--bg) 94%,#000 6%) 0%,color-mix(in srgb,var(--bg) 78%,transparent) 50%,transparent 100%);
    -webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);
    -webkit-mask-image:linear-gradient(to top,#000 50%,transparent);mask-image:linear-gradient(to top,#000 50%,transparent)}
  html:root[data-theme="premium"] .dock-scrim,:root[data-theme="dark"] .dock-scrim,:root[data-theme="sticker"] .dock-scrim{
    background:linear-gradient(to top,rgba(3,4,7,.92) 0%,rgba(3,4,7,.62) 50%,transparent 100%)}
  body.onb .dock-scrim{display:none}
}

/* =========================================================================
   v67 · PAPER — a real sheet of paper. No purple, no neon: black ink, a
   pencil-grey second colour, warm off-white stock. The subject inks stay
   (they are the highlighters on the page); everything else is ink.
   ========================================================================= */
:root[data-theme="light"]{
  --accent:#23211C; --accent-2:#8A7B61;
  --bg:#F6F2E8; --bg-2:#FFFDF7; --bg-3:#EEE9DC; --bg-4:#E3DDCC;
  --line:#E0D9C8; --line-2:#C9C0AA;
  --tx:#1B1A17; --tx-2:#55524A; --tx-3:#86816F;
  --rail-bg:#F0EBDF;
  --mark-1:rgba(250,210,70,.42);
}
:root[data-theme="light"] .bg-paper{
  background:radial-gradient(120% 62% at 50% -12%,rgba(255,248,228,.9),transparent 62%)}
:root[data-theme="light"] .bg-paper::after{box-shadow:inset 0 0 200px -70px rgba(110,86,40,.22)}
/* the few places that were written in a colour rather than a token */
:root[data-theme="light"] .ai-hero,:root[data-theme="light"] .pv-plan.on{box-shadow:var(--sh)}
:root[data-theme="light"] .ai-hero{background:linear-gradient(180deg,var(--bg-2),color-mix(in srgb,var(--bg-2) 70%,var(--bg-3)))!important}
:root[data-theme="light"] .ai-hero::before,:root[data-theme="light"] .ai-hero::after{display:none!important}
:root[data-theme="light"] .ai-hero-t em,:root[data-theme="light"] .ai-hero h2 em{color:var(--tx);font-style:italic;
  background:linear-gradient(transparent 62%,var(--mark-1) 62%);padding:0 .08em}
:root[data-theme="light"] .pv-plan.on{border-color:var(--tx)}
:root[data-theme="light"] .pv-plan.on .pv-radio{border-color:var(--tx);background:radial-gradient(circle,var(--tx) 45%,transparent 50%)}
:root[data-theme="light"] .av{background:linear-gradient(140deg,#3A3730,#1B1A17)}
:root[data-theme="light"] .chip-coin{background:var(--bg-2);border-color:var(--line-2)}
:root[data-theme="light"] .chip-coin svg{color:var(--warn)}
:root[data-theme="light"] .nv-mt.nv-pv,:root[data-theme="light"] .mt-strip.pv-strip{
  background:color-mix(in srgb,var(--tx) 6%,transparent);border-color:var(--line-2);color:var(--tx)}
:root[data-theme="light"] .mt-strip.pv-strip b{color:var(--tx)}
:root[data-theme="light"] .jp-i.on{background:color-mix(in srgb,var(--tx) 7%,transparent)}
:root[data-theme="light"] .jp-i.on .jp-ic{background:var(--tx);color:var(--bg-2)}
:root[data-theme="light"] .jp-here{color:var(--tx)}
:root[data-theme="light"] .pv-hero{background:radial-gradient(120% 140% at 0% 0%,#3A362D 0%,#211F1A 50%,#151411 100%);
  box-shadow:0 30px 60px -34px rgba(40,30,10,.7)}
:root[data-theme="light"] .pv-hero::before{background:radial-gradient(circle,rgba(255,224,138,.28),transparent 65%)}
/* Premium Glass: the Pro card is a pane of dark glass lit by gold, not a
   blue poster pasted on top of the glass */
html:root[data-theme="premium"] .pv-hero{
  background:radial-gradient(90% 120% at 100% 0%,rgba(255,214,120,.22),transparent 58%),
             radial-gradient(80% 120% at 0% 100%,rgba(99,205,240,.14),transparent 60%),
             linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.03))!important;
  border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(30px) saturate(1.5);backdrop-filter:blur(30px) saturate(1.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 30px 60px -34px rgba(0,0,0,.9)!important}
html:root[data-theme="premium"] .pv-hero.is-pro{
  background:radial-gradient(100% 140% at 0% 0%,rgba(255,200,90,.3),transparent 60%),
             linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.03))!important}