/* Theme toggle, the theme switch animation and hand-tuned dark values. Loads after the generated
   theme-dark*.css (scripts/build_theme.py), so rules here win. */
.theme-toggle.theme-toggle{display:inline-grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:999px;border:0;background:transparent;color:inherit;cursor:pointer;position:relative;transition:background-color .2s,transform .2s cubic-bezier(.2,.9,.3,1.4)}
.theme-toggle:hover{background:color-mix(in srgb,currentColor 9%,transparent)}
.theme-toggle:active{transform:scale(.88)}
.theme-toggle.theme-toggle .icon{width:1.2rem;height:1.2rem;grid-area:1/1;margin:0;transition:opacity .25s,transform .45s cubic-bezier(.2,.9,.3,1.2)}
[data-theme-toggle] .t-auto,[data-theme-toggle] .t-sun,[data-theme-toggle] .t-moon{opacity:0;transform:rotate(-90deg) scale(.5)}
:root[data-theme-pref=system] [data-theme-toggle] .t-auto,:root[data-theme-pref=light] [data-theme-toggle] .t-sun,:root[data-theme-pref=dark] [data-theme-toggle] .t-moon,:root:not([data-theme-pref]) [data-theme-toggle] .t-auto{opacity:1;transform:none}
.mobile-theme{display:flex;align-items:center;gap:.7rem;width:100%;padding:.75rem .9rem;border-radius:.9rem;background:transparent;color:inherit;font:inherit;cursor:pointer;text-align:left}
.mobile-theme .icon{width:1.15rem;height:1.15rem;transition:opacity .25s,transform .45s}
.mobile-theme .t-auto,.mobile-theme .t-sun,.mobile-theme .t-moon{position:absolute}
.mobile-theme span{margin-left:1.85rem}
/* Hub -> platform cross-link */
.platform-link{display:inline-flex;align-items:center;gap:.4rem;padding:.42rem .8rem;border-radius:999px;font-size:.82rem;font-weight:600;white-space:nowrap;background:linear-gradient(120deg,color-mix(in srgb,var(--ink) 7%,transparent),color-mix(in srgb,var(--ink) 3%,transparent));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 12%,transparent);transition:transform .2s,box-shadow .2s}
.platform-link:hover{transform:translateY(-1px);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 30%,transparent);color:inherit}
.platform-link .icon{width:1rem;height:1rem}
/* the header is at most ~1280px wide: with 獎學金 in the nav the platform link is an icon (its title and aria-label name it) */
.platform-link span{display:none}.platform-link{padding:.55rem}
@media (max-width:700px){.platform-link{display:none}}
.mobile-platform-link .icon:last-child{width:.9rem;height:.9rem;opacity:.6;margin-left:auto}
.theme-toggle-label{font-size:.82rem}

/* Circular reveal from the toggle (View Transitions). The hub's page-navigation transitions name parts of
   the page and switch the root snapshot off, so during a theme switch the whole page is one snapshot again. */
:root.theme-anim{view-transition-name:root!important}
:root.theme-anim *{view-transition-name:none!important}
:root.theme-anim::view-transition-old(root),:root.theme-anim::view-transition-new(root){animation:none;mix-blend-mode:normal}
:root.theme-anim::view-transition-new(root){animation:theme-reveal .55s cubic-bezier(.4,0,.2,1)}
@keyframes theme-reveal{from{clip-path:circle(0 at var(--theme-x,50%) var(--theme-y,0))}to{clip-path:circle(150vmax at var(--theme-x,50%) var(--theme-y,0))}}

/* ---------- dark: hand-tuned ---------- */
:root[data-theme=dark]{color-scheme:dark;--bg:#111112;--surface:#1c1c1e;--ink:#ececee;--muted:#a1a4a9;--line:#323235;--accent:#f2f2f3;--accent-hover:#ffffff;--shadow:0 0 0 1px #ffffff12,0 8px 30px #00000059}
:root[data-theme=dark] img:not([src$=".svg"]){filter:brightness(.92)}
:root[data-theme=dark] ::selection{background:#4b5563;color:#fff}
/* Logos drawn in black on transparent stay readable. */
:root[data-theme=dark] img[src*="molekiu-lockup"],:root[data-theme=dark] img[src*="molekiu-dots"],:root[data-theme=dark] img[src*="mark.svg"]{filter:invert(1) hue-rotate(180deg) brightness(1.1)}
/* Printed artefacts keep paper colours even in dark mode. */
:root[data-theme=dark] .printable-document,:root[data-theme=dark] .notice-ai-pages img{color-scheme:light}

/* 老師 | 學生・家長 switch (base.html): one size and one place in both versions, so the same spot switches
   back; the knob shows where you are and crosses over when clicked (site.js) before the page changes. */
.version-switch{position:relative;isolation:isolate;flex:none;display:inline-grid;grid-template-columns:1fr 1fr;align-items:stretch;margin:0 .25rem;padding:.2rem;border-radius:999px;
  background:color-mix(in srgb,var(--ink) 6%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 12%,transparent);color:var(--ink);text-decoration:none;white-space:nowrap;transition:box-shadow .2s}
.version-switch:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 28%,transparent);color:var(--ink)}
.version-switch:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.vs-opt{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:.3rem;padding:.32rem .75rem;border-radius:999px;font-size:.8rem;font-weight:600;color:var(--muted);transition:color .3s ease}
.vs-opt .icon{width:.95rem;height:.95rem}
.vs-knob{position:absolute;z-index:0;top:.2rem;bottom:.2rem;left:.2rem;width:calc((100% - .4rem) / 2);border-radius:999px;background:var(--ink);box-shadow:0 2px 8px rgb(0 0 0 / .16);transition:transform .38s cubic-bezier(.3,1.3,.5,1)}
.version-switch.is-family .vs-knob,.version-switch.is-switching:not(.is-family) .vs-knob{transform:translateX(100%)}
.version-switch.is-family.is-switching .vs-knob{transform:none}
.version-switch:not(.is-family):not(.is-switching) .vs-teacher,.version-switch.is-family:not(.is-switching) .vs-family,
.version-switch.is-switching:not(.is-family) .vs-family,.version-switch.is-family.is-switching .vs-teacher{color:var(--bg)}
@media (max-width:1300px){.vs-opt>span{display:none}.vs-opt{padding:.38rem .62rem}}
@media (max-width:1180px){.header-subscribe>span{display:none}.header-subscribe{padding-inline:.6rem}}   /* both versions, so the switch stays put */
@media (max-width:700px){.version-switch{display:none}}
@media (prefers-reduced-motion:reduce){.vs-knob,.vs-opt{transition:none}}
/* 熱門比賽專題 in the footer of every page (base.html, portal/landings.py FOOTER) */
.footer-topics{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:.2rem 1rem;padding-top:.8rem;border-top:1px solid var(--line)}
.footer-topics span{font-size:.75rem;font-weight:700;color:var(--muted)}
.footer-topics a{font-size:.75rem;color:var(--muted);text-decoration:none}
.footer-topics a:hover{color:var(--ink);text-decoration:underline}

/* 熱門專題 index (templates/portal/_topic_tiles.html): both home pages and the foot of each topic page. A contents page,
   not a grid of icon tiles: hairlines, the count in large figures, live facts, and covers of real items that fan out on
   hover. site.js sets [data-animate] and then .is-in once the list scrolls into view; without it everything shows as is. */
.topic-section{margin:0 0 2.8rem}
.topic-section .section-heading{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:.5rem 1rem;margin-bottom:.6rem}
.topic-section .section-heading h2{margin:.2rem 0 0}
.topic-index{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:2.6rem;margin:0;padding:0;list-style:none}
.topic-index>li{position:relative;min-width:0}
.topic-index>li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line);transform-origin:left;pointer-events:none}
.ti-row{position:relative;isolation:isolate;display:grid;grid-template-columns:4.6rem minmax(0,1fr) auto 1.2rem;align-items:center;gap:.9rem;
  min-height:5.6rem;padding:.9rem .6rem .9rem .2rem;color:var(--ink);text-decoration:none}
/* hover: a wash sweeps in from the left */
.ti-row::before{content:"";position:absolute;inset:.35rem -.6rem;z-index:-1;border-radius:1rem;background:var(--surface);box-shadow:var(--shadow);
  transform:scaleX(.6);transform-origin:left;opacity:0;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .3s ease}
.ti-row:hover::before,.ti-row:focus-visible::before{transform:none;opacity:1}
.ti-count{display:flex;align-items:baseline;gap:.15rem}
.ti-count b{font-size:2.5rem;font-weight:800;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.ti-count small{font-size:.8rem;color:var(--muted)}
.ti-body{display:grid;gap:.3rem;min-width:0}
.ti-name{font-size:1.06rem;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ti-meta{display:flex;flex-wrap:wrap;gap:.1rem .7rem;font-size:.8rem;color:var(--muted)}
.ti-open{display:inline-flex;align-items:center;gap:.4rem;color:#0b8a5a;font-weight:700}
:root[data-theme=dark] .ti-open{color:#53d69a}
.ti-open i{position:relative;width:.5rem;height:.5rem;border-radius:50%;background:currentColor}
.ti-open i::after{content:"";position:absolute;inset:0;border-radius:50%;background:currentColor;opacity:0}
/* covers of real items, stacked like photos; they fan out and straighten on hover */
.ti-covers{position:relative;width:7.2rem;height:3.4rem}
.ti-covers img{position:absolute;right:0;top:.2rem;width:3rem;height:3rem;object-fit:cover;border-radius:.7rem;border:2px solid var(--bg);
  box-shadow:0 6px 14px -8px rgb(0 0 0 / .45);z-index:calc(3 - var(--n));
  transform:translateX(calc(var(--n) * -1.25rem)) rotate(calc((var(--n) - 1) * 5deg));
  transition:transform .5s cubic-bezier(.3,1.4,.5,1),opacity .4s ease}
.ti-row:hover .ti-covers img,.ti-row:focus-visible .ti-covers img{transform:translateX(calc(var(--n) * -2.15rem)) translateY(-.15rem) rotate(0)}
.ti-go{color:var(--muted);transition:transform .3s cubic-bezier(.2,.8,.2,1),color .2s}
.ti-row:hover .ti-go,.ti-row:focus-visible .ti-go{transform:translateX(4px);color:var(--ink)}

/* entrance, once (site.js): the line draws, the row rises, the covers drop in, the green dot pings twice */
.topic-index[data-animate]>li::before{transform:scaleX(0);transition:transform .8s cubic-bezier(.2,.8,.2,1) calc(var(--i) * 55ms)}
.topic-index[data-animate] .ti-row{opacity:0;transform:translateY(10px);transition:opacity .45s ease calc(var(--i) * 55ms + 80ms),transform .55s cubic-bezier(.2,.8,.2,1) calc(var(--i) * 55ms + 80ms)}
.topic-index[data-animate] .ti-covers img{opacity:0;transform:translate(.6rem,-.8rem) scale(.6) rotate(12deg)}
.topic-index.is-in>li::before{transform:none}
.topic-index.is-in .ti-row{opacity:1;transform:none}
.topic-index.is-in .ti-covers img{opacity:1;transform:translateX(calc(var(--n) * -1.25rem)) rotate(calc((var(--n) - 1) * 5deg));
  transition-delay:calc(var(--i) * 55ms + 260ms + (2 - var(--n)) * 70ms)}
.topic-index.is-in .ti-row:hover .ti-covers img{transform:translateX(calc(var(--n) * -2.15rem)) translateY(-.15rem) rotate(0);transition-delay:0s}
.topic-index.is-in .ti-open i::after{animation:ti-ping 1.4s ease-out calc(var(--i) * 55ms + .6s) 2}
@keyframes ti-ping{0%{opacity:.55;transform:scale(1)}100%{opacity:0;transform:scale(3)}}
@media (max-width:820px){
  .topic-index{grid-template-columns:minmax(0,1fr)}
  .ti-row{grid-template-columns:3.6rem minmax(0,1fr) auto 1rem;gap:.7rem;min-height:5rem}
  .ti-count b{font-size:2rem}
  .ti-covers{width:5.4rem;height:2.9rem}
  .ti-covers img{width:2.5rem;height:2.5rem;border-radius:.6rem}
}
@media (max-width:420px){.ti-covers img:nth-child(3){display:none}.ti-covers{width:4.4rem}}
@media (prefers-reduced-motion:reduce){.ti-row::before,.ti-covers img,.ti-go{transition:none}}
:root.reduceMotion .ti-row::before,:root.reduceMotion .ti-covers img,:root.reduceMotion .ti-go{transition:none}
/* 這些情報，值得留意: items the system added to fill the row (views.home_picks) */
.pick-auto{display:inline-flex;align-items:center;gap:.25rem;font-size:.75rem;color:var(--muted)}
.pick-auto .icon{width:.85rem;height:.85rem}
/* 想再試一次？ dialog (templates/portal/_trial_email.html, static/js/trial-email.js): opens when someone presses generate
   after the free try. A plain white card in the same language as 訂閱 and 一齊開班 (static/css/subscribe.css, classes.css):
   brand dots, grey wells, a black pill. The head shows the two tries as dots, the used one grey and the earned one a dashed
   ring that fills once the code is accepted. Steps slide sideways, the code goes in six boxes, and a drawn tick closes it
   before the generation carries on. Reduced motion: no movement, the same steps. */
.te-dialog{--te-well:#f4f5f6;--te-ring:#c4c7cc;--te-new:#5bb6ff;--te-go:#15824f;
  width:min(30rem,calc(100vw - 2rem));max-height:calc(100dvh - 2rem);margin:auto;padding:0;border:0;background:transparent;color:var(--ink);overflow:visible}
:root[data-theme=dark] .te-dialog{--te-well:#242528;--te-ring:#4d5055;--te-go:#5ad49b}
.te-dialog::backdrop{background:rgb(10 12 16 / .48);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.te-card{position:relative;overflow:hidden auto;max-height:calc(100dvh - 2rem);padding:1.5rem 1.5rem 1.3rem;border-radius:1.6rem;background:var(--surface);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 6%,transparent),0 40px 80px -40px rgb(0 0 0 / .6)}
.te-close{position:absolute;right:.8rem;top:.8rem;z-index:2}
.te-head{display:flex;align-items:center;gap:.9rem;margin-bottom:1rem}
.te-head h2{margin:0;padding-right:2.4rem;font-size:1.35rem;font-weight:800;letter-spacing:-.01em}
.te-head p{margin:.15rem 0 0;color:var(--muted);font-size:.9rem;text-wrap:pretty}
.te-tries{flex:none;display:flex;align-items:center;gap:.4rem;padding:.6rem .7rem;border-radius:999px;background:var(--te-well)}
.te-tries i{width:1.15rem;height:1.15rem;border-radius:50%}
.te-tries .is-used{background:var(--te-ring)}
.te-tries .is-extra{position:relative;border:2px dashed var(--te-new);transition:background-color .3s,border-color .3s}
.te-tries .is-extra::after{content:"";position:absolute;inset:0;margin:auto;width:.5rem;height:.5rem;border-radius:50%;background:var(--te-new);transform:scale(.6);opacity:.5;transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .3s}
.te-card[data-step="2"] .te-tries .is-extra::after{transform:scale(1);opacity:1}
.te-card[data-step="3"] .te-tries .is-extra{background:var(--te-new);border-style:solid}
.te-steps{display:flex;gap:.5rem;margin:0 0 1rem;padding:0;list-style:none;counter-reset:te}
.te-steps li{counter-increment:te;display:flex;align-items:center;gap:.4rem;font-size:.78rem;color:var(--muted);transition:color .3s}
.te-steps li::before{content:counter(te);display:grid;place-items:center;width:1.35rem;height:1.35rem;border-radius:50%;border:1.5px solid var(--line);font-size:.72rem;font-weight:700;transition:background-color .3s,color .3s,border-color .3s}
.te-steps li+li::after{content:none}
.te-steps li+li{padding-left:.5rem;border-left:1px solid var(--line)}
.te-steps li.is-on{color:var(--ink);font-weight:600}
.te-steps li.is-on::before{background:var(--ink);border-color:var(--ink);color:var(--bg)}
/* the three steps sit side by side; the card shows one at a time */
.te-viewport{display:grid;overflow:hidden}
.te-pane{grid-area:1/1;display:grid;gap:.6rem;align-content:start;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .3s ease,visibility 0s .45s}
.te-card[data-step="1"] .te-pane-2,.te-card[data-step="1"] .te-pane-3{transform:translateX(110%);opacity:0;visibility:hidden}
.te-card[data-step="2"] .te-pane-1{transform:translateX(-110%);opacity:0;visibility:hidden}
.te-card[data-step="2"] .te-pane-3{transform:translateX(110%);opacity:0;visibility:hidden}
.te-card[data-step="3"] .te-pane-1,.te-card[data-step="3"] .te-pane-2{transform:translateX(-110%);opacity:0;visibility:hidden}
.te-card[data-step="1"] .te-pane-1,.te-card[data-step="2"] .te-pane-2,.te-card[data-step="3"] .te-pane-3{transition-delay:0s,0s,0s}
/* panes that are out of view leave the flow, so the card is as tall as the step on show */
.te-card[data-step="1"] :is(.te-pane-2,.te-pane-3),.te-card[data-step="2"] :is(.te-pane-1,.te-pane-3),.te-card[data-step="3"] :is(.te-pane-1,.te-pane-2){position:absolute;inset:0 0 auto}
.te-viewport{position:relative}
.te-label{font-size:.85rem;font-weight:600}
.trial-roles{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 .2rem;padding:0;border:0}
.trial-roles legend{width:100%;margin-bottom:.45rem;font-size:.85rem;font-weight:600}
.trial-roles label{position:relative;cursor:pointer}
.trial-roles input{position:absolute;opacity:0;pointer-events:none}
.trial-roles span{display:inline-flex;align-items:center;min-height:2.4rem;padding:.35rem .95rem;border-radius:99px;border:1px solid transparent;background:var(--te-well,var(--surface));font-size:.9rem;font-weight:650;
  transition:background-color .2s,color .2s,border-color .2s,transform .25s cubic-bezier(.3,1.6,.5,1)}
.trial-roles label:active span{transform:scale(.95)}
.trial-roles input:checked+span{background:var(--ink);color:var(--bg);border-color:var(--ink);transform:scale(1.04)}
.trial-roles input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px}
.trial-school{display:grid;gap:.3rem;font-size:.85rem;font-weight:600;animation:te-in .35s cubic-bezier(.2,.8,.2,1)}
/* the one consent box: a grey well that says what arrives, never pre-ticked; the tick draws itself when chosen */
.trial-consent{position:relative;display:flex;gap:.75rem;align-items:flex-start;margin:.35rem 0 .1rem;padding:.9rem 1rem;border-radius:1.1rem;background:var(--te-well);cursor:pointer;
  box-shadow:inset 0 0 0 1.5px transparent;transition:box-shadow .25s}
.trial-consent:hover{box-shadow:inset 0 0 0 1.5px var(--te-ring)}
.trial-consent input{position:absolute;opacity:0;pointer-events:none}
.te-tick{flex:none;display:grid;place-items:center;width:1.3rem;height:1.3rem;margin-top:.1rem;border-radius:.42rem;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--te-ring);color:var(--surface);transition:background-color .2s,box-shadow .2s}
.te-tick .icon{width:.88rem;height:.88rem;stroke-width:2.8;stroke-dasharray:22;stroke-dashoffset:22;transition:stroke-dashoffset .3s ease .05s}
.trial-consent:has(input:checked){box-shadow:inset 0 0 0 1.5px var(--ink)}
.trial-consent:has(input:checked) .te-tick{background:var(--ink);box-shadow:none}
.trial-consent:has(input:checked) .te-tick .icon{stroke-dashoffset:0}
.trial-consent:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:2px}
.trial-consent>span:last-child{display:grid;gap:.25rem}
.trial-consent strong{font-size:.95rem}
.trial-consent small{font-size:.8rem;line-height:1.6;color:var(--muted)}
/* email and school as grey pills; the button is the same black pill as 訂閱 (not the site's glass button) */
.te-dialog .te-pane input[name]:not([type=radio]):not([type=checkbox]){min-height:3rem!important;padding:.6rem 1.1rem!important;border:0!important;border-radius:999px!important;
  background:var(--te-well)!important;box-shadow:inset 0 0 0 1.5px transparent!important;transition:box-shadow .2s}
.te-dialog .te-pane input[name]:not([type=radio]):not([type=checkbox]):focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--ink)!important}
.te-go{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;justify-self:stretch;min-height:3.05rem;margin-top:.3rem;padding:.65rem 1.4rem;border:0;border-radius:999px;
  background:var(--ink);font:inherit;font-size:.98rem;font-weight:750;cursor:pointer;box-shadow:0 10px 18px -12px rgb(0 0 0 / .6);transition:transform .25s cubic-bezier(.34,1.56,.64,1),opacity .2s}
:root .te-go,:root[data-theme] .te-go{color:var(--surface)}
.te-go:hover{transform:translateY(-1px)}
.te-go:active{transform:scale(.97)}
.te-go:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.te-go .icon{width:1.1rem;height:1.1rem;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.te-go:hover .icon{transform:translateX(3px)}
.te-go.is-busy{opacity:.6;pointer-events:none}
.trial-pics{margin:.1rem 0 0;font-size:.72rem;line-height:1.6;color:var(--muted)}
.te-sent{margin:0;font-size:.9rem;color:var(--muted)}
.te-sent b{color:var(--ink);word-break:break-all}
.te-code{display:grid;grid-template-columns:repeat(6,1fr);gap:.45rem;margin:.4rem 0}
.te-code input{width:100%;min-width:0;height:3.4rem;padding:0!important;border:0!important;border-radius:.9rem!important;background:var(--te-well)!important;text-align:center;font-size:1.5rem;font-weight:750;font-variant-numeric:tabular-nums;
  box-shadow:inset 0 0 0 1.5px transparent;transition:box-shadow .2s,transform .2s cubic-bezier(.3,1.6,.5,1)}
.te-code input:focus{outline:none;transform:translateY(-2px);box-shadow:inset 0 0 0 1.5px var(--ink)}
.te-back{justify-self:center}
.te-pane-3{justify-items:center;text-align:center;padding:1rem 0 .4rem}
.te-done{width:4.4rem;height:4.4rem;fill:none;stroke:var(--te-go);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.te-done circle{stroke-dasharray:151;stroke-dashoffset:151}
.te-done path{stroke-dasharray:36;stroke-dashoffset:36}
.te-card[data-step="3"] .te-done circle{animation:te-draw .55s ease-out .15s forwards}
.te-card[data-step="3"] .te-done path{animation:te-draw .35s ease-out .6s forwards}
.te-done-title{margin:.2rem 0 0;font-size:1.15rem;font-weight:700}
.te-done-note{margin:0;font-size:.85rem;color:var(--muted)}
.te-msg{margin:.7rem 0 0;padding:.6rem .9rem;border-radius:.9rem;background:color-mix(in srgb,#ff8a5b 14%,var(--surface));color:var(--ink);font-size:.85rem}
.te-card.is-shaking{animation:te-shake .4s cubic-bezier(.36,.07,.19,.97)}
@keyframes te-draw{to{stroke-dashoffset:0}}
@keyframes te-in{from{opacity:0;transform:translateY(-6px)}}
@keyframes te-shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
/* open and close */
@media (prefers-reduced-motion:no-preference){
  :root:not(.reduceMotion) .te-dialog[open] .te-card{animation:te-rise .5s cubic-bezier(.2,.9,.25,1.15)}
  :root:not(.reduceMotion) .te-dialog[open]::backdrop{animation:te-fade .35s ease}
  :root:not(.reduceMotion) .te-dialog[open] .te-tries i{animation:te-pop .5s cubic-bezier(.34,1.56,.64,1) .15s backwards}
  :root:not(.reduceMotion) .te-dialog[open] .te-tries .is-extra{animation:te-pop .5s cubic-bezier(.34,1.56,.64,1) .3s backwards,te-turn 6s linear .8s infinite}
  :root:not(.reduceMotion) .te-card[data-step="3"] .te-tries .is-extra{animation:te-land .5s cubic-bezier(.34,1.56,.64,1)}
  :root:not(.reduceMotion) .te-dialog.is-closing .te-card{animation:te-sink .26s ease-in forwards}
  :root:not(.reduceMotion) .te-dialog.is-closing::backdrop{animation:te-fade .26s ease-in reverse forwards}
}
:root.reduceMotion .te-pane{transition:none}
@media (prefers-reduced-motion:reduce){.te-pane{transition:none}}
@keyframes te-rise{from{opacity:0;transform:translateY(24px) scale(.94)}}
@keyframes te-sink{to{opacity:0;transform:translateY(16px) scale(.96)}}
@keyframes te-fade{from{opacity:0}}
@keyframes te-pop{from{opacity:0;transform:scale(.3)}}
@keyframes te-turn{to{transform:rotate(360deg)}}
@keyframes te-land{40%{transform:scale(1.35)}}
@media (max-width:480px){.te-card{padding:1.25rem 1.1rem 1.1rem;border-radius:1.3rem}.te-code input{height:3rem;font-size:1.3rem}}
/* 每星期收比賽截止提醒？ after a trial, for an address verified without consent */
.trial-consent-later{margin:1.4rem 0;padding:1.3rem 1.4rem;border-radius:1.2rem;animation:te-in .45s cubic-bezier(.2,.8,.2,1)}
.trial-consent-later h2{display:flex;align-items:center;gap:.5rem;margin:0 0 .4rem;font-size:1.05rem}
.trial-email-row{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.9rem}
/* Header fit: the links get a little less padding on wide screens so the row (brand, links, switch, buttons) keeps
   room inside the 1280px header; below 1100px, or whenever the row would not fit (longer labels set in the admin,
   another link), the links move into the menu button, as on phones. html.navTight is set by site.js. */
@media (min-width:1181px){.site-header .main-nav a{padding-inline:.6rem}}
@media (max-width:1100px){.site-header .main-nav{display:none}.site-header .header-actions{margin-left:auto}
  :root .site-header .header-actions .mobile-menu-button{display:inline-flex}}   /* beats appica.css's 981px+ hide */
.navTight .site-header .main-nav{display:none}
.navTight .site-header .header-actions{margin-left:auto}
:root.navTight .site-header .header-actions .mobile-menu-button{display:inline-flex}