/* 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}