:root{
  --bg:#f5f3ee; --fg:#26241f; --muted:#9b958a; --card:#fbfaf6; --line:#e3ded3;
  --dent:rgba(70,55,30,.17); --dent-hi:rgba(255,255,255,.75); --dome-hi:rgba(255,255,255,1); --dome-lo:rgba(70,55,30,.26); --flap-bg:#2b2925; --flap-fg:#f1ede3; --flap-split:#14130f;
  --reel-bg:#fbf6e8; --reel-edge:#c9b27c; --lock:#b9573c;
  --ui-font:ui-sans-serif,system-ui,-apple-system,sans-serif; --phrase-font:Georgia,'Iowan Old Style',serif; --phrase-weight:400;
  --tile-font:ui-monospace,'SF Mono',Menlo,monospace; --tile-weight:500; --ui-case:none; --ui-tracking:0; --reel-shade:.7; --slot-ink:var(--fg); --slot-size:.8em; --led-on:var(--bg); --led-bg:var(--fg); --nx-ink:#ffa24a; --nx-glow:#ff6a00;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#151412; --fg:#e9e5da; --muted:#7d786d; --card:#1d1b18; --line:#2f2c27;
    --dent:rgba(0,0,0,.55); --dent-hi:rgba(255,255,255,.05); --dome-hi:rgba(255,255,255,.14); --dome-lo:rgba(0,0,0,.5); --flap-bg:#34312c; --reel-bg:#27231b; --reel-edge:#5b4e30; --lock:#e08a6f}}
:root[data-theme=dark]{--bg:#151412; --fg:#e9e5da; --muted:#7d786d; --card:#1d1b18; --line:#2f2c27;
    --dent:rgba(0,0,0,.55); --dent-hi:rgba(255,255,255,.05); --dome-hi:rgba(255,255,255,.14); --dome-lo:rgba(0,0,0,.5); --flap-bg:#34312c; --reel-bg:#27231b; --reel-edge:#5b4e30; --lock:#e08a6f}
:root{color-scheme:light dark}:root[data-theme=light]{color-scheme:light}:root[data-theme=dark]{color-scheme:dark}

/* style: pantopicon - white page, black text, brand red tiles, Arial */
:root[data-style=pantopicon]{
  --bg:#fff; --fg:#111; --muted:#8c8c8c; --card:#fff; --line:#e8e8e8; --lock:#111;
  --flap-bg:#D52216; --flap-fg:#fff; --flap-split:var(--bg); --reel-bg:#D52216; --reel-shade:.34; --slot-ink:#D52216; --slot-size:1em; --led-on:var(--bg); --led-bg:#D52216; --nx-ink:#ff6a52; --nx-glow:#D52216;
  --dent:rgba(0,0,0,.14); --dent-hi:rgba(255,255,255,1); --dome-hi:rgba(255,255,255,1); --dome-lo:rgba(0,0,0,.13);
  --ui-font:Arial,'Helvetica Neue',Helvetica,sans-serif; --phrase-font:Arial,'Helvetica Neue',Helvetica,sans-serif; --phrase-weight:400;
  --tile-font:Arial,'Helvetica Neue',Helvetica,sans-serif; --tile-weight:700; --ui-case:uppercase; --ui-tracking:.08em}
@media (prefers-color-scheme:dark){:root[data-style=pantopicon]:not([data-theme=light]){
  --bg:#0d0d0d; --fg:#f3f3f3; --muted:#7c7c7c; --card:#161616; --line:#262626; --lock:#fff;
  --dent:rgba(0,0,0,.6); --dent-hi:rgba(255,255,255,.05); --dome-hi:rgba(255,255,255,.12); --dome-lo:rgba(0,0,0,.55)}}
:root[data-style=pantopicon][data-theme=dark]{
  --bg:#0d0d0d; --fg:#f3f3f3; --muted:#7c7c7c; --card:#161616; --line:#262626; --lock:#fff;
  --dent:rgba(0,0,0,.6); --dent-hi:rgba(255,255,255,.05); --dome-hi:rgba(255,255,255,.12); --dome-lo:rgba(0,0,0,.55)}
:root[data-style=pantopicon] #stage{text-transform:uppercase}
/* in the phrase, tiles use exactly the phrase's type size and tracking so everything reads as one line (baselines are matched in JS: align()) */
:root[data-style=pantopicon] .phrase{font-size:clamp(20px,2.8vw,30px);letter-spacing:.04em}
:root[data-style=pantopicon] .phrase .flap,:root[data-style=pantopicon] .phrase .reel{font-size:1em;letter-spacing:inherit}
:root[data-style=pantopicon] .phrase .flap{line-height:1.15;padding:.18em .5em}
:root[data-style=pantopicon] .phrase .reel{--h:1.5em;padding:0 .5em}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.5 var(--ui-font)}
main{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 20px;gap:28px}
#stage{width:100%;display:flex;justify-content:center}
body.drag main{outline:1px dashed var(--muted);outline-offset:-12px}

/* quiet controls */
.spin{position:relative;isolation:isolate;border:0;background:transparent;color:var(--muted);width:72px;height:72px;border-radius:50%;font:inherit;font-size:13px;letter-spacing:.06em;text-transform:var(--ui-case);cursor:pointer;
  transition:color .4s}
/* hover / focus: the page itself swells into a soft dome lit from above: a glow along the top, shading that deepens toward the bottom, no outline.
   The layer is a little larger than the button and masked to fade out, so the edge stays continuous with the background.
   ::before = swell; ::after = the same surface pressed in (lighting flipped) */
.spin::before,.spin::after{content:"";position:absolute;inset:-10px;z-index:-1;opacity:0;pointer-events:none;transition:opacity .7s ease;border-radius:50%;
  -webkit-mask-image:radial-gradient(circle closest-side,#000 58%,transparent 100%);mask-image:radial-gradient(circle closest-side,#000 58%,transparent 100%)}
.spin::before{background:
  radial-gradient(circle 32px at 50% 25%,var(--dome-hi),transparent),
  linear-gradient(to bottom,transparent 26%,var(--dome-lo) 86%,transparent 100%)}
.spin::after{background:
  radial-gradient(circle 32px at 50% 75%,var(--dome-hi),transparent),
  linear-gradient(to top,transparent 26%,var(--dome-lo) 86%,transparent 100%)}
.spin:focus-visible:not(:disabled){color:var(--fg);outline:0}
.spin:focus-visible:not(:disabled)::before{opacity:1}
@media (hover:hover){.spin:hover:not(:disabled){color:var(--fg)}.spin:hover:not(:disabled)::before{opacity:1}}
.spin:active:not(:disabled)::before{opacity:0;transition-duration:.15s}
.spin:active:not(:disabled)::after{opacity:1;transition-duration:.15s}
.spin:disabled{opacity:.4;cursor:default}
.bar{position:fixed;left:20px;right:20px;bottom:16px;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;align-items:center;color:var(--muted);font-size:12px;text-transform:var(--ui-case);letter-spacing:var(--ui-tracking)}
.tools{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}
.bar .sep{opacity:.5}
.link{border:0;background:none;color:inherit;font:inherit;text-transform:inherit;letter-spacing:inherit;cursor:pointer;padding:2px 0}
.link:hover{color:var(--fg)}
.link[aria-pressed=true]{color:var(--fg);text-decoration:underline;text-underline-offset:4px}
.switch{display:inline-flex;align-items:center;gap:7px;cursor:pointer;user-select:none}
.switch input{appearance:none;width:42px;height:26px;border-radius:13px;background:var(--line);position:relative;margin:0;cursor:pointer;transition:background .2s}
.switch input::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--bg);transition:transform .2s}
.switch input:checked{background:var(--fg)}
.switch input:checked::after{transform:translateX(16px)}
.tplRow{flex:0 1 440px;min-width:220px}
.tplRow textarea{resize:none;display:block;overflow:hidden;line-height:1.5;width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--fg);font:inherit;font-size:13px;text-align:right;padding:4px 2px;outline:none}
.tplRow textarea:focus{border-color:var(--muted)}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);color:var(--muted);font-size:12px;opacity:0;transition:opacity .25s;pointer-events:none}
.toast.on{opacity:1}

/* separate slots */
.row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.slot{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px 12px;width:auto;display:flex;flex-direction:column;align-items:center;gap:8px}
.slot .top{align-self:stretch;gap:10px}
.slot .top{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.slot{cursor:pointer;transition:border-color .2s}
.slot:has(.locked){border-color:var(--lock)}
.slot:has(.locked) .top::after{content:"locked";color:var(--lock)}
.slot .cellwrap{min-height:84px;display:flex;align-items:center;justify-content:center}
.phrase .line{display:block;min-height:1em}
.phrase{font-size:clamp(22px,3.4vw,34px);line-height:2.3;text-align:center;max-width:820px;margin:0;font-family:var(--phrase-font);font-weight:var(--phrase-weight)}

/* skin: split-flap */
.flap{display:inline-block;vertical-align:middle;background:var(--flap-bg);color:var(--flap-fg);font:var(--tile-weight) .72em/1.25 var(--tile-font);
  padding:.28em .6em;border-radius:.3em;position:relative;text-align:center;white-space:nowrap;perspective:300px;box-shadow:0 .1em .25em rgba(0,0,0,.18)}
.flap::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:var(--flap-split);transform:translateY(-1px);z-index:0}
.slot .flap{font-size:var(--card-fs,14px);min-height:72px;display:inline-flex;align-items:center;justify-content:center}
.flap .txt{display:inline-block;position:relative;z-index:1}
.flap,.reel{overflow:hidden;transition:width .35s cubic-bezier(.4,0,.2,1)}
.flap.tick .txt{animation:flip .09s ease-out}
@keyframes flip{0%{transform:rotateX(-80deg);opacity:.4}100%{transform:rotateX(0);opacity:1}}
.flap.locked{box-shadow:0 0 0 2px var(--lock)}

/* skins: scramble + odometer (text slots, no tile) */
.tx{display:inline-block;position:relative;overflow:clip;white-space:pre;vertical-align:baseline;color:var(--slot-ink);font:var(--tile-weight) var(--slot-size)/1.3 var(--tile-font);
  border-bottom:2px dotted color-mix(in srgb,var(--muted) 70%,transparent);transition:width .35s cubic-bezier(.4,0,.2,1)}
.tx.locked{border-bottom-style:solid;border-bottom-color:var(--lock)}
.tx .probe{position:absolute;left:0;top:0;visibility:hidden;white-space:nowrap;pointer-events:none}
.tx .ch{display:inline-block;position:relative;overflow:clip;height:1.3em;vertical-align:baseline}
.tx .ch .base{visibility:hidden}
.tx .ch .strip{position:absolute;left:0;right:0;top:0;will-change:transform}
.tx .ch .it{display:block;height:1.3em;line-height:1.3em;text-align:center}
.slot .tx{font-size:var(--card-fs,14px)}

/* skin: dot-matrix LED (canvas) */
.led{display:inline-block;position:relative;overflow:hidden;height:calc(11 * .105em);vertical-align:-.21em;font-size:var(--slot-size);background:var(--led-bg);border-radius:.22em;
  box-shadow:0 .08em .2em rgba(0,0,0,.25);transition:width .35s cubic-bezier(.4,0,.2,1)}
.led canvas{display:block}
.led.locked{box-shadow:0 0 0 2px var(--lock)}
.slot .led{font-size:var(--card-fs,14px)}

/* skin: nixie - one dark glass housing per value, faint seams between the character cells */
.nx{display:inline-block;position:relative;white-space:nowrap;padding:0 .18em;border-radius:.42em;font:var(--tile-weight) var(--slot-size)/1 var(--tile-font);
  background:radial-gradient(ellipse at 50% 30%,#2b1d13 0,#150e09 62%,#0a0705 100%);
  box-shadow:inset 0 0 .5em rgba(255,150,60,.12),inset 0 .1em .12em rgba(255,255,255,.07),0 .06em .2em rgba(0,0,0,.3)}
.nx::after{content:"";position:absolute;left:.35em;right:.35em;top:.1em;height:.16em;border-radius:.1em;background:linear-gradient(rgba(255,255,255,.2),transparent);pointer-events:none}
.nx .tube,.nx .gap{display:inline-block;height:1.5em;line-height:1.5em;text-align:center;vertical-align:baseline;box-shadow:inset 1px 0 0 rgba(255,255,255,.06)}
.nx .tube{width:.66em;color:var(--nx-ink);text-shadow:0 0 .1em var(--nx-glow),0 0 .38em var(--nx-glow)}
.nx .gap{width:.5em}
.nx .gap::before{content:"\00a0"}
.nx :first-child{box-shadow:none}
.nx .tube.ignite .g{animation:ignite .24s ease-out}
.nx.locked{box-shadow:0 0 0 2px var(--lock),inset 0 0 .5em rgba(255,150,60,.12)}
/* idle: a barely visible, irregular flicker, every tube on its own rhythm (set in JS) */
.nx.idle .g{animation:nxflicker var(--fd,5s) linear infinite}
@keyframes nxflicker{0%,100%{opacity:1}6%{opacity:.95}8%{opacity:1}29%{opacity:.97}31%{opacity:.89}33%{opacity:1}57%{opacity:.96}74%{opacity:1}83%{opacity:.92}85.5%{opacity:1}}
@media (prefers-reduced-motion:reduce){.nx.idle .g{animation:none}}
@keyframes ignite{0%{opacity:.2;filter:brightness(2.2)}35%{opacity:1}55%{opacity:.5}100%{opacity:1;filter:none}}
.slot .nx{font-size:var(--card-fs,14px)}

/* skin: reel */
.reel{--h:1.8em;display:inline-block;vertical-align:middle;height:var(--h);overflow:hidden;position:relative;text-align:center;background:var(--flap-bg);color:var(--flap-fg);
  border-radius:.3em;padding:0 .6em;box-shadow:0 .1em .25em rgba(0,0,0,.18);font:var(--tile-weight) .72em/var(--h) var(--tile-font)}
.reel::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(rgba(0,0,0,var(--reel-shade)),rgba(0,0,0,.08) 28%,rgba(255,255,255,.05) 50%,rgba(0,0,0,.08) 72%,rgba(0,0,0,var(--reel-shade)))}
.reel .strip{display:block;will-change:transform}
.reel .strip>div{height:var(--h);line-height:var(--h);white-space:nowrap}
.slot .reel{font-size:var(--card-fs,14px);--h:72px}
.reel.locked{box-shadow:0 0 0 2px var(--lock)}

/* settings controls */
.bar{gap:0;border:1px solid var(--line)}
.srow{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;cursor:default}
.srow+.srow{border-top:1px solid var(--line)}
.lbl{color:var(--fg);font-size:14px}
.tplRow{padding-top:10px;border-top:1px solid var(--line)}
.tplRow .lbl{display:block;margin-bottom:8px}
.bar .tplRow textarea{border:1px solid var(--line);border-radius:10px;background:var(--card);padding:10px 12px;text-align:left;font-size:14px;color:var(--fg)}
.bar .tplRow textarea:focus{border-color:var(--muted)}
.selwrap{position:relative;display:inline-block}
.bar select{appearance:none;-webkit-appearance:none;font:inherit;font-size:14px;text-transform:inherit;letter-spacing:inherit;color:var(--fg);background-color:var(--card);cursor:pointer;
  border:1px solid var(--line);border-radius:10px;padding:8px 34px 8px 12px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238a8a8a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center}
.bar select:hover,.bar select:focus-visible{border-color:var(--muted);outline:0}
.segc{display:inline-flex;background:var(--line);border-radius:10px;padding:2px;gap:2px}
.segc button{border:0;background:none;color:var(--muted);font:inherit;font-size:13px;text-transform:inherit;letter-spacing:inherit;padding:6px 12px;border-radius:8px;cursor:pointer;transition:background .2s,color .2s}
.segc button[aria-pressed=true]{background:var(--card);color:var(--fg);box-shadow:0 1px 2px rgba(0,0,0,.14)}
.btns{display:flex;gap:8px}
.btn{border:1px solid var(--line);background:var(--card);color:var(--fg);border-radius:10px;padding:8px 14px;font:inherit;font-size:13px;text-transform:inherit;letter-spacing:inherit;cursor:pointer;transition:border-color .2s}
.btn:hover,.btn:focus-visible{border-color:var(--muted);outline:0}
@media (pointer:coarse){.bar .tplRow textarea,.bar select{font-size:16px}}

/* pantopicon logo, bottom centre (only in the pantopicon style) */
/* centred on the same horizontal line as the cog (cog: 48px box, 16px from the bottom => centre at 40px) */
.brand{display:none;position:fixed;left:50%;bottom:40px;transform:translate(-50%,50%);z-index:1;line-height:0}
.brand img{height:15px;width:auto;display:block}
.brand .w{display:none}
:root[data-style=pantopicon] .brand{display:block}
@media (prefers-color-scheme:dark){:root[data-style=pantopicon]:not([data-theme=light]) .brand .r{display:none}:root[data-style=pantopicon]:not([data-theme=light]) .brand .w{display:block}}
:root[data-style=pantopicon][data-theme=dark] .brand .r{display:none}
:root[data-style=pantopicon][data-theme=dark] .brand .w{display:block}
@media (max-width:600px){.brand{bottom:36px}.brand img{height:13px}}

/* phones and touch */
body{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
@media (pointer:coarse){.tplRow textarea{font-size:16px}}

/* no hover on touch: the spin control is a plain ring, pressed state on tap */
@media (hover:none){
  .spin{border:1px solid color-mix(in srgb,var(--fg) 22%,transparent)}
  .spin::before,.spin::after{display:none}
  .spin:active:not(:disabled){background-color:color-mix(in srgb,var(--fg) 7%,transparent);color:var(--fg);transition-duration:.1s}
}

/* settings live in a sheet opened from a cogwheel: full-width bottom sheet on phones, a floating panel on larger screens */
  .cog{display:flex;position:fixed;right:12px;bottom:12px;width:48px;height:48px;align-items:center;justify-content:center;border:0;background:none;color:var(--muted);cursor:pointer;z-index:5;border-radius:50%}
  .cog svg{width:22px;height:22px}
  .scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.3);opacity:0;pointer-events:none;transition:opacity .3s;z-index:10}
  .scrim.on{opacity:1;pointer-events:auto}
  .bar{left:0;right:0;bottom:0;z-index:20;flex-direction:column;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;gap:16px;font-size:14px;color:var(--fg);
    background:var(--bg);border-radius:18px 18px 0 0;box-shadow:0 -12px 40px rgba(0,0,0,.18);max-height:85dvh;overflow:auto;
    padding:10px 22px calc(24px + env(safe-area-inset-bottom));
    transform:translateY(105%);visibility:hidden;transition:transform .38s cubic-bezier(.2,.8,.2,1),visibility 0s .38s}
  .bar.open{transform:none;visibility:visible;transition:transform .38s cubic-bezier(.2,.8,.2,1),visibility 0s}
  .bar::before{content:"";align-self:center;width:38px;height:4px;border-radius:2px;background:var(--line);margin-bottom:4px}
  .sheetClose{display:block;align-self:flex-end;border:0;background:none;color:var(--muted);font:inherit;padding:6px 0;cursor:pointer;order:-1;margin-bottom:-28px}
  .tools{flex-direction:row;flex-wrap:wrap;align-items:center;gap:0 22px;font-size:14px}
  .tools .sep{display:none}
  .tools>*:not(.sep):not(input){min-height:44px;display:flex;align-items:center;gap:6px}
  .tools .link{padding:0}
  #skinSeg{flex-wrap:wrap}
  .tplRow{flex:none;min-width:0;width:100%}
  .tplRow textarea{text-align:left;border-bottom-color:var(--muted);padding:8px 2px;color:var(--fg)}
  .toast{z-index:30}
@media (min-width:601px){
  .bar{left:50%;right:auto;bottom:16px;width:min(520px,calc(100vw - 32px));border-radius:18px;transform:translate(-50%,calc(100% + 40px))}
  .bar.open{transform:translate(-50%,0)}
  .bar::before{display:none}
  .sheetClose{margin-bottom:-28px}
  .cog{right:16px;bottom:16px}
  .scrim{background:transparent}
}
@media (max-width:600px){main{padding:40px 20px 96px}}

/* hero / embed mode (?hero=1): only the phrase, for the iframe in the homepage hero */
:root.hero .cog,:root.hero .bar,:root.hero .scrim,:root.hero .brand,:root.hero .spin,:root.hero .toast{display:none!important}
:root.hero body{overflow:hidden;cursor:pointer}
:root.hero main{min-height:100vh;padding:24px 20px}
:root.hero .phrase{font-size:clamp(17px,3.1vw,38px);max-width:none}
.hero-cta{display:none}
:root.hero .hero-cta{display:block;position:fixed;bottom:12px;left:50%;transform:translateX(-50%);padding:6px 10px;color:var(--muted);font-size:11px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
:root.hero .hero-cta:hover,:root.hero .hero-cta:focus-visible{color:var(--fg);text-decoration:underline;text-underline-offset:4px}

/* other mornings: quiet cards below the first screen, reached by scrolling or the small link */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.ohint{font-size:12px;letter-spacing:.06em;color:var(--muted);text-decoration:none}
.ohint:hover,.ohint:focus-visible{color:var(--fg);outline:0}
.others{box-sizing:border-box;width:100%;max-width:40rem;margin:0 auto;padding:40px 20px 120px;display:flex;flex-direction:column;gap:12px;transition:opacity .5s ease}
.others.dim{opacity:.25}
.others h2{margin:0 0 4px;font-size:12px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:center}
.other{border:1px solid var(--line);background:var(--card);border-radius:14px;padding:14px 18px;text-align:left}
.other p{margin:0}
.olab{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.otxt{margin-top:6px;font-size:15px;line-height:1.55;color:var(--fg)}
.ochips{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.ochips li{font-size:12px;border:1px solid var(--line);border-radius:999px;padding:2px 10px;color:var(--muted)}
.oby{margin-top:8px;font-size:11px;color:var(--muted)}
.hero .others,.hero .ohint,.others[hidden],.ohint[hidden]{display:none}
.btnrow{display:flex;gap:18px;align-items:center;justify-content:center}
.spin[hidden]{display:none}
/* the answer sheet: bottom sheet on phones, centred panel on larger screens */
.ansheet{position:fixed;inset:0;z-index:30;display:flex;align-items:flex-end;justify-content:center}
.ansheet[hidden]{display:none}
.anscrim{position:absolute;inset:0;background:rgba(0,0,0,.35)}
.anpanel{position:relative;box-sizing:border-box;width:100%;max-width:34rem;max-height:90vh;overflow:auto;background:var(--bg);border:1px solid var(--line);border-radius:16px 16px 0 0;padding:22px 20px 28px;text-align:left}
@media (min-width:700px){.ansheet{align-items:center}.anpanel{border-radius:16px}}
.anpanel h2{margin:0;font-size:12px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:center}
.anpanel .other{margin-top:12px}
.sit{margin:14px 0 0;text-align:center;font-size:14px;line-height:1.6;color:var(--muted);white-space:pre-line}
.sit+.sq{margin-top:10px}
.sq{margin:6px 0 0;text-align:center;font-size:17px;color:var(--fg)}
.shsub{margin:6px 0 0;text-align:center;font-size:13px;color:var(--muted)}
.shlab{display:block;margin-top:16px;font-size:13px;color:var(--muted)}
.anpanel textarea,.anpanel input[type=text]{box-sizing:border-box;width:100%;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--fg);font:inherit;font-size:15px;padding:10px 12px;resize:vertical}
.anpanel textarea:focus,.anpanel input[type=text]:focus{border-color:var(--muted);outline:0}
.anpanel input[type=text]{margin-top:8px}
.shcount{display:block;text-align:right;font-size:11px;color:var(--muted);margin-top:2px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.shconsent{display:flex;gap:10px;align-items:flex-start;margin:12px 0;font-size:12px;line-height:1.5;color:var(--muted)}
.shconsent input{margin-top:3px;flex:none}
.anpanel .btn:disabled{opacity:.5;cursor:default}
.shmsg{min-height:1.2em;margin:8px 0 0;font-size:13px;color:var(--fg)}
.shthanks{margin:12px 0 4px;text-align:center;font-size:14px;line-height:1.5}
.shdone{display:block;margin:16px auto 0}
.anpanel form .btn{display:block;margin:0 auto}
.anx{position:absolute;top:8px;right:10px;width:36px;height:36px;border:0;background:none;color:var(--muted);font-size:24px;line-height:1;cursor:pointer;border-radius:50%}
.anx:hover,.anx:focus-visible{color:var(--fg);outline:0}
@media (pointer:coarse){.anpanel textarea,.anpanel input[type=text]{font-size:16px}}
.hero .ansheet{display:none}

:root.nocontrols .cog,:root.nocontrols .bar,:root.nocontrols .scrim{display:none!important}

.helplist{margin:14px 0 0;padding:0 0 0 1.2em;font-size:14px;line-height:1.55}
.helplist li{margin:0 0 10px}
.helplist strong{font-weight:600}