:root{--bg:#ffffff;--bg-alt:#f6f7f9;--text:#16181d;--text-dim:#5c626e;--border:#e3e5ea;--accent:#2563eb;--accent-fg:#ffffff;--radius:12px;--ghost-num:0.16;--maxw:1240px;--g-card:#ffffff;--g-text:#1f1f1f;--g-dim:#5c626e;--g-border:#c9ccd3;--g-accent:var(--accent);--g-btn-bg:var(--accent);--g-btn-fg:#ffffff;--g-hover:color-mix(in srgb, var(--accent) 10%, transparent);--g-error:#d93025;--g-ok:#188038;--g-warn:#b45309}
@media (prefers-color-scheme:dark){
:root:not([data-theme=light]){--bg:#0f1115;--bg-alt:#161a21;--text:#e8eaee;--text-dim:#9aa1ae;--border:#262b34;--accent:#5b8cff;--ghost-num:0.055;--g-card:var(--bg-alt);--g-text:var(--text);--g-dim:var(--text-dim);--g-border:color-mix(in srgb, var(--border) 60%, var(--text-dim));--g-accent:var(--accent);--g-btn-bg:var(--accent);--g-btn-fg:#ffffff;--g-hover:color-mix(in srgb, var(--accent) 14%, transparent);--g-error:#f87171;--g-ok:#6ee7a8;--g-warn:#fbbf24}
}
:root[data-theme=dark]{--bg:#0f1115;--bg-alt:#161a21;--text:#e8eaee;--text-dim:#9aa1ae;--border:#262b34;--accent:#5b8cff;--ghost-num:0.055;--g-card:var(--bg-alt);--g-text:var(--text);--g-dim:var(--text-dim);--g-border:color-mix(in srgb, var(--border) 60%, var(--text-dim));--g-accent:var(--accent);--g-btn-bg:var(--accent);--g-btn-fg:#ffffff;--g-hover:color-mix(in srgb, var(--accent) 14%, transparent);--g-error:#f87171;--g-ok:#6ee7a8;--g-warn:#fbbf24}
*,::after,::before{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;background:var(--bg-alt);border:1px solid var(--border);border-radius:5px;padding:.1em .4em}
pre{background:var(--bg-alt);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;overflow-x:auto}
pre code{background:0 0;border:none;padding:0}
.nav{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:.9rem 1.5rem;background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.nav__brand{color:var(--text);font-weight:700;font-size:1.05rem;letter-spacing:-.01em;display:inline-flex;align-items:center;gap:.55rem}
.nav__logo{width:26px;height:26px;flex:none;display:block;border-radius:7px;transition:transform .2s ease,box-shadow .2s ease}
.nav__brand:hover .nav__logo{transform:translateY(-1px);box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 40%,transparent)}
.nav__links{display:flex;gap:.35rem;flex-wrap:wrap;align-items:center}
.nav__links a{color:var(--text-dim);font-size:.92rem;padding:.4rem .8rem;border-radius:8px;transition:background-color .18s ease,color .18s ease}
.nav__links a:hover{color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent);text-decoration:none}
.nav__links a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.nav__left{display:flex;align-items:center;gap:.4rem}
.sfx-toggle,.theme-toggle{display:grid;place-items:center;width:32px;height:32px;padding:0;border:1px solid transparent;border-radius:8px;background:0 0;color:var(--text-dim);cursor:pointer;transition:background-color .18s ease,color .18s ease,border-color .18s ease}
.sfx-toggle:hover,.theme-toggle:hover{color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent)}
.sfx-toggle:focus-visible,.theme-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sfx-toggle svg,.theme-toggle svg{width:18px;height:18px}
.sfx-toggle svg,.theme-toggle svg{grid-area:1/1}
.sfx-toggle .sfx-toggle__off{display:none}
.sfx-toggle.is-off .sfx-toggle__on{display:none}
.sfx-toggle.is-off .sfx-toggle__off{display:block}
.sfx-toggle.is-off{color:color-mix(in srgb,var(--text-dim) 70%,transparent)}
.theme-toggle .theme-toggle__sun{display:none}
.theme-toggle.is-dark .theme-toggle__sun{display:block}
.theme-toggle.is-dark .theme-toggle__moon{display:none}
@media not all and (hover:hover){
.sfx-toggle{display:none}
}
@supports selector(:has(*)){
.tabpanel{display:none}
.tabpanel:target{display:block}
body:not(:has(.tabpanel:target)) #account{display:block}
.tabpanel{scroll-margin-top:72px}
.nav{padding-bottom:0;align-items:flex-end;background:var(--bg);backdrop-filter:none}
.nav__left{margin-bottom:.85rem}
.nav__links{align-items:flex-end;gap:.15rem}
.nav__links a{margin-bottom:-1px;padding:.55rem .95rem;border:1px solid transparent;border-radius:10px 10px 0 0}
.nav__links a:hover{background:color-mix(in srgb,var(--accent) 12%,transparent)}
body:has(#account:target) .nav__links a[href="#account"],body:has(#download:target) .nav__links a[href="#download"],body:has(#faq:target) .nav__links a[href="#faq"],body:has(#features:target) .nav__links a[href="#features"],body:has(#guide:target) .nav__links a[href="#guide"],body:not(:has(.tabpanel:target)) .nav__links a[href="#account"]{background:var(--bg);border-color:var(--border);border-bottom-color:var(--bg);color:var(--text)}
@media (max-width:720px){
.nav{padding-bottom:.6rem;align-items:center}
.nav__left{margin-bottom:0}
.nav__links a{margin-bottom:0;border-radius:8px;padding:.4rem .7rem}
body:has(#account:target) .nav__links a[href="#account"],body:has(#download:target) .nav__links a[href="#download"],body:has(#faq:target) .nav__links a[href="#faq"],body:has(#features:target) .nav__links a[href="#features"],body:has(#guide:target) .nav__links a[href="#guide"],body:not(:has(.tabpanel:target)) .nav__links a[href="#account"]{background:color-mix(in srgb,var(--accent) 18%,transparent);border-color:transparent;color:var(--accent)}
}
}
.hero{position:relative;max-width:none;margin:0;width:100%;aspect-ratio:3/1;min-height:400px;max-height:560px;display:grid;grid-template-rows:74% 26%;overflow:hidden;text-align:center;background-color:#0a0e16}
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(120% 95% at 50% 42%,transparent 45%,rgba(4,7,13,.22) 78%,rgba(4,7,13,.48) 100%)}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:22%;z-index:1;pointer-events:none;background:linear-gradient(to bottom,transparent,var(--bg))}
.hero__bg{grid-column:1;grid-row:1/3;width:100%;height:100%;object-fit:cover;object-position:50% 55%;z-index:1;transform-origin:50% 55%;will-change:transform;animation:heroZoom 32s ease-in-out infinite alternate}
@keyframes heroZoom{
from{transform:scale(1)}
to{transform:scale(1.075)}
}
.hero__inner{grid-column:1;grid-row:1/2;align-self:center;z-index:2;display:flex;flex-direction:column;align-items:center;padding:1.5rem;background:radial-gradient(ellipse 65% 75% at 50% 50%,rgba(6,9,15,.52) 0,rgba(6,9,15,.22) 60%,transparent 80%)}
.hero__frost{grid-column:1;grid-row:1/3;z-index:1;pointer-events:none;overflow:hidden;background:radial-gradient(130% 90% at 50% -10%,rgba(190,222,255,.12) 0,rgba(190,222,255,.04) 40%,transparent 70%);animation:frostBreath 9s ease-in-out infinite}
.hero__frost::after,.hero__frost::before{content:"";position:absolute;left:0;right:0;top:-260px;bottom:0;background-repeat:repeat;pointer-events:none}
.hero__frost::before{background-image:radial-gradient(6px 6px at 31px 218.9px,rgba(255,255,255,.79),transparent),radial-gradient(5px 5px at 57.1px 128.8px,rgba(255,255,255,.65),transparent),radial-gradient(4px 4px at 142.7px 203.9px,rgba(255,255,255,.49),transparent),radial-gradient(6px 6px at 8.1px 216px,rgba(255,255,255,.64),transparent),radial-gradient(5px 5px at 166.7px 2.5px,rgba(255,255,255,.65),transparent),radial-gradient(4px 4px at 157.9px 60.6px,rgba(255,255,255,.88),transparent),radial-gradient(6px 6px at 196.7px 9.8px,rgba(255,255,255,.46),transparent),radial-gradient(5px 5px at 118.9px 242.4px,rgba(255,255,255,.62),transparent),radial-gradient(4px 4px at 48.8px 110.1px,rgba(255,255,255,.46),transparent),radial-gradient(6px 6px at 49.9px 114.1px,rgba(255,255,255,.67),transparent),radial-gradient(5px 5px at 52.3px 61.1px,rgba(255,255,255,.55),transparent),radial-gradient(4px 4px at 101.3px 76.2px,rgba(255,255,255,.46),transparent),radial-gradient(6px 6px at 182.9px 144.5px,rgba(255,255,255,.74),transparent),radial-gradient(5px 5px at 42.2px 256.1px,rgba(255,255,255,.84),transparent),radial-gradient(4px 4px at 28.1px 87.2px,rgba(255,255,255,.77),transparent),radial-gradient(6px 6px at 155.6px 241.7px,rgba(255,255,255,.64),transparent),radial-gradient(5px 5px at 181.3px 173.6px,rgba(255,255,255,.59),transparent),radial-gradient(4px 4px at 128.9px 227.9px,rgba(255,255,255,.83),transparent),radial-gradient(6px 6px at 111.1px 152.8px,rgba(255,255,255,.47),transparent),radial-gradient(5px 5px at 54.4px 206.1px,rgba(255,255,255,.64),transparent),radial-gradient(4px 4px at 39.4px 142.5px,rgba(255,255,255,.77),transparent),radial-gradient(6px 6px at 147.7px 97.9px,rgba(255,255,255,.65),transparent),radial-gradient(5px 5px at 111.8px 201.3px,rgba(255,255,255,.68),transparent),radial-gradient(4px 4px at 86.9px 127.4px,rgba(255,255,255,.46),transparent),radial-gradient(6px 6px at 11.4px 182.1px,rgba(255,255,255,.89),transparent),radial-gradient(5px 5px at 130.1px 102.8px,rgba(255,255,255,.53),transparent),radial-gradient(4px 4px at 110.5px 253.4px,rgba(255,255,255,.8),transparent),radial-gradient(6px 6px at 118.6px 222.2px,rgba(255,255,255,.55),transparent),radial-gradient(5px 5px at 113px 245.8px,rgba(255,255,255,.71),transparent),radial-gradient(4px 4px at 101.2px 70.9px,rgba(255,255,255,.7),transparent),radial-gradient(6px 6px at 208.7px 3.5px,rgba(255,255,255,.8),transparent),radial-gradient(5px 5px at 179.2px 228.9px,rgba(255,255,255,.78),transparent),radial-gradient(4px 4px at 176.8px 134.8px,rgba(255,255,255,.7),transparent),radial-gradient(6px 6px at 94px 16.4px,rgba(255,255,255,.84),transparent),radial-gradient(5px 5px at 125.1px 53.2px,rgba(255,255,255,.68),transparent),radial-gradient(4px 4px at 106.7px 93.3px,rgba(255,255,255,.61),transparent),radial-gradient(6px 6px at 118.3px 161.6px,rgba(255,255,255,.73),transparent),radial-gradient(5px 5px at 101px 9.2px,rgba(255,255,255,.55),transparent),radial-gradient(4px 4px at 40.3px 151.6px,rgba(255,255,255,.84),transparent),radial-gradient(6px 6px at 174.5px 206.1px,rgba(255,255,255,.82),transparent),radial-gradient(5px 5px at 57.1px 217.5px,rgba(255,255,255,.75),transparent),radial-gradient(4px 4px at 20px 6.3px,rgba(255,255,255,.46),transparent),radial-gradient(6px 6px at 165.2px 65.9px,rgba(255,255,255,.5),transparent),radial-gradient(5px 5px at 137px 90.2px,rgba(255,255,255,.48),transparent),radial-gradient(4px 4px at 36.5px 137px,rgba(255,255,255,.53),transparent),radial-gradient(6px 6px at 60.9px 184.2px,rgba(255,255,255,.65),transparent),radial-gradient(5px 5px at 71.6px 123.3px,rgba(255,255,255,.46),transparent),radial-gradient(4px 4px at 85.5px 109.8px,rgba(255,255,255,.53),transparent),radial-gradient(6px 6px at 25.5px 232.4px,rgba(255,255,255,.68),transparent),radial-gradient(5px 5px at 47.2px 157px,rgba(255,255,255,.82),transparent),radial-gradient(4px 4px at 6.5px 6.6px,rgba(255,255,255,.52),transparent),radial-gradient(6px 6px at 157.3px 43px,rgba(255,255,255,.77),transparent),radial-gradient(5px 5px at 148.5px 141.4px,rgba(255,255,255,.55),transparent),radial-gradient(4px 4px at 212.7px 206.2px,rgba(255,255,255,.68),transparent),radial-gradient(6px 6px at 50.2px 168px,rgba(255,255,255,.63),transparent),radial-gradient(5px 5px at 126.4px 84.2px,rgba(255,255,255,.73),transparent),radial-gradient(4px 4px at 14.7px 78.4px,rgba(255,255,255,.89),transparent),radial-gradient(6px 6px at 191.1px 80.4px,rgba(255,255,255,.84),transparent),radial-gradient(5px 5px at 69px 242.5px,rgba(255,255,255,.78),transparent),radial-gradient(4px 4px at 91.9px 66.6px,rgba(255,255,255,.45),transparent),radial-gradient(6px 6px at 191.8px 11.7px,rgba(255,255,255,.82),transparent),radial-gradient(5px 5px at 209.8px 148px,rgba(255,255,255,.53),transparent),radial-gradient(4px 4px at 189.4px 251.3px,rgba(255,255,255,.77),transparent),radial-gradient(6px 6px at 111.9px 98.8px,rgba(255,255,255,.61),transparent),radial-gradient(5px 5px at 46.4px 174.6px,rgba(255,255,255,.64),transparent),radial-gradient(4px 4px at 43.9px 28.7px,rgba(255,255,255,.75),transparent),radial-gradient(6px 6px at 66px 129.9px,rgba(255,255,255,.6),transparent),radial-gradient(5px 5px at 190.3px 232.3px,rgba(255,255,255,.46),transparent),radial-gradient(4px 4px at 45.4px 85.9px,rgba(255,255,255,.89),transparent),radial-gradient(6px 6px at 171.1px 88.8px,rgba(255,255,255,.55),transparent),radial-gradient(5px 5px at 147.7px 216.5px,rgba(255,255,255,.87),transparent),radial-gradient(4px 4px at 76.3px 227.9px,rgba(255,255,255,.76),transparent),radial-gradient(6px 6px at 106.7px 254.3px,rgba(255,255,255,.56),transparent),radial-gradient(5px 5px at 158.7px 23.7px,rgba(255,255,255,.53),transparent),radial-gradient(4px 4px at 198.8px 56.5px,rgba(255,255,255,.79),transparent),radial-gradient(6px 6px at 131.6px 217.3px,rgba(255,255,255,.62),transparent),radial-gradient(5px 5px at 75.5px 76.6px,rgba(255,255,255,.84),transparent),radial-gradient(4px 4px at 132.5px 246.3px,rgba(255,255,255,.85),transparent),radial-gradient(6px 6px at 31.2px 143.1px,rgba(255,255,255,.5),transparent),radial-gradient(5px 5px at 10.5px 20.7px,rgba(255,255,255,.84),transparent);background-size:220px 260px;opacity:.55;animation:snowFall 16s linear infinite}
.hero__frost::after{background-image:radial-gradient(4px 4px at 285px 244.6px,rgba(255,255,255,.48),transparent),radial-gradient(3px 3px at 27.1px 215.9px,rgba(255,255,255,.78),transparent),radial-gradient(4px 4px at 200.2px 80.9px,rgba(255,255,255,.72),transparent),radial-gradient(3px 3px at 181.6px 150.8px,rgba(255,255,255,.52),transparent),radial-gradient(4px 4px at 129.5px 102.7px,rgba(255,255,255,.78),transparent),radial-gradient(3px 3px at 296.5px 245px,rgba(255,255,255,.69),transparent),radial-gradient(4px 4px at 133.7px 70.7px,rgba(255,255,255,.47),transparent),radial-gradient(3px 3px at 10.1px 121px,rgba(255,255,255,.59),transparent),radial-gradient(4px 4px at 114.5px 230.3px,rgba(255,255,255,.69),transparent),radial-gradient(3px 3px at 167.9px 62.4px,rgba(255,255,255,.46),transparent),radial-gradient(4px 4px at 98.2px 37px,rgba(255,255,255,.68),transparent),radial-gradient(3px 3px at 297.6px 174.7px,rgba(255,255,255,.53),transparent),radial-gradient(4px 4px at 266.5px 206px,rgba(255,255,255,.78),transparent),radial-gradient(3px 3px at 270.4px 197.3px,rgba(255,255,255,.81),transparent),radial-gradient(4px 4px at 106.7px 253.1px,rgba(255,255,255,.88),transparent),radial-gradient(3px 3px at 49.7px 195px,rgba(255,255,255,.77),transparent),radial-gradient(4px 4px at 138.6px 137.8px,rgba(255,255,255,.67),transparent),radial-gradient(3px 3px at 275.8px 130.2px,rgba(255,255,255,.82),transparent),radial-gradient(4px 4px at 106.8px 228px,rgba(255,255,255,.85),transparent),radial-gradient(3px 3px at 138.5px 147.3px,rgba(255,255,255,.86),transparent),radial-gradient(4px 4px at 216.2px 126.6px,rgba(255,255,255,.55),transparent),radial-gradient(3px 3px at 98.1px 181.1px,rgba(255,255,255,.52),transparent),radial-gradient(4px 4px at 270.8px 70.6px,rgba(255,255,255,.86),transparent),radial-gradient(3px 3px at 93.6px 247.1px,rgba(255,255,255,.77),transparent),radial-gradient(4px 4px at 151.3px 134.5px,rgba(255,255,255,.74),transparent),radial-gradient(3px 3px at 176px 81.8px,rgba(255,255,255,.54),transparent),radial-gradient(4px 4px at 153.5px 241.1px,rgba(255,255,255,.73),transparent),radial-gradient(3px 3px at 24.3px 212px,rgba(255,255,255,.78),transparent),radial-gradient(4px 4px at 270.7px 51px,rgba(255,255,255,.79),transparent),radial-gradient(3px 3px at 19.4px 169.1px,rgba(255,255,255,.57),transparent),radial-gradient(4px 4px at 69.1px 226.1px,rgba(255,255,255,.5),transparent),radial-gradient(3px 3px at 156.6px 220.6px,rgba(255,255,255,.56),transparent),radial-gradient(4px 4px at 64.3px 227.4px,rgba(255,255,255,.64),transparent),radial-gradient(3px 3px at 214.2px 10.2px,rgba(255,255,255,.61),transparent),radial-gradient(4px 4px at 52.9px 174.2px,rgba(255,255,255,.49),transparent),radial-gradient(3px 3px at 284.6px 8.5px,rgba(255,255,255,.78),transparent),radial-gradient(4px 4px at 8.3px 67.5px,rgba(255,255,255,.82),transparent),radial-gradient(3px 3px at 48.5px 49px,rgba(255,255,255,.76),transparent),radial-gradient(4px 4px at 116.1px 13px,rgba(255,255,255,.9),transparent),radial-gradient(3px 3px at 46.8px 11.3px,rgba(255,255,255,.6),transparent),radial-gradient(4px 4px at 184.1px 192.1px,rgba(255,255,255,.5),transparent),radial-gradient(3px 3px at 101.8px 9.9px,rgba(255,255,255,.65),transparent),radial-gradient(4px 4px at 228.7px 191.4px,rgba(255,255,255,.86),transparent),radial-gradient(3px 3px at 225.7px 222.8px,rgba(255,255,255,.77),transparent),radial-gradient(4px 4px at 141.9px 59.7px,rgba(255,255,255,.75),transparent),radial-gradient(3px 3px at 95.6px 28.1px,rgba(255,255,255,.65),transparent),radial-gradient(4px 4px at 260.9px 34.6px,rgba(255,255,255,.71),transparent),radial-gradient(3px 3px at 118.3px 133.8px,rgba(255,255,255,.51),transparent),radial-gradient(4px 4px at 286.1px 68.3px,rgba(255,255,255,.72),transparent),radial-gradient(3px 3px at 126.2px 6.6px,rgba(255,255,255,.7),transparent),radial-gradient(4px 4px at 43.6px 16.5px,rgba(255,255,255,.47),transparent),radial-gradient(3px 3px at 49.7px 26.5px,rgba(255,255,255,.74),transparent),radial-gradient(4px 4px at 152.4px 253.8px,rgba(255,255,255,.87),transparent),radial-gradient(3px 3px at 296.4px 61.5px,rgba(255,255,255,.65),transparent),radial-gradient(4px 4px at 76.2px 153.4px,rgba(255,255,255,.73),transparent),radial-gradient(3px 3px at 238.9px 183.6px,rgba(255,255,255,.57),transparent),radial-gradient(4px 4px at 127.2px 136.7px,rgba(255,255,255,.45),transparent),radial-gradient(3px 3px at 12.5px 106.6px,rgba(255,255,255,.5),transparent),radial-gradient(4px 4px at 216.2px 63.7px,rgba(255,255,255,.49),transparent),radial-gradient(3px 3px at 55.8px 61.3px,rgba(255,255,255,.55),transparent);background-size:300px 260px;opacity:.35;animation:snowFall 26s linear infinite}
@keyframes snowFall{
from{transform:translateY(0)}
to{transform:translateY(260px)}
}
@keyframes frostBreath{
0%,100%{opacity:.55}
50%{opacity:1}
}
.hero__aurora{grid-column:1;grid-row:1/3;z-index:1;pointer-events:none;overflow:hidden;position:relative}
.hero__aurora::before{content:"";position:absolute;inset:-20% -10% auto -10%;height:75%;background:radial-gradient(55% 45% at 32% 20%,rgba(120,200,255,.34),transparent 70%),radial-gradient(45% 38% at 68% 12%,rgba(150,140,255,.28),transparent 70%),radial-gradient(40% 30% at 50% 30%,rgba(130,255,235,.18),transparent 70%);filter:blur(26px);animation:auroraDrift 22s ease-in-out infinite alternate}
@keyframes auroraDrift{
0%{transform:translate3d(-3%,0,0) scale(1);opacity:.75}
50%{transform:translate3d(2%,1.5%,0) scale(1.08);opacity:1}
100%{transform:translate3d(4%,-1%,0) scale(1.03);opacity:.8}
}
@keyframes heroRise{
from{opacity:0;transform:translateY(20px)}
to{opacity:1;transform:none}
}
.hero__title{animation:heroRise .95s cubic-bezier(.16,1,.3,1) both}
.hero__sub{animation:heroRise .95s cubic-bezier(.16,1,.3,1) .14s both}
.hero__actions{animation:heroRise .95s cubic-bezier(.16,1,.3,1) .28s both}
.hero__scroll{grid-column:1;grid-row:2/3;align-self:end;justify-self:center;z-index:2;margin-bottom:1.5rem;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(10,14,22,.35);backdrop-filter:blur(4px);animation:heroRise .95s cubic-bezier(.16,1,.3,1) .42s both,scrollBob 2.4s ease-in-out 1.4s infinite;transition:background-color .2s ease,border-color .2s ease}
.hero__scroll::before{content:"";width:9px;height:9px;margin-top:-3px;border-right:2px solid rgba(255,255,255,.85);border-bottom:2px solid rgba(255,255,255,.85);border-radius:1px;transform:rotate(45deg)}
.hero__scroll:hover{background:rgba(10,14,22,.6);border-color:rgba(255,255,255,.7)}
@keyframes scrollBob{
0%,100%{transform:translateY(0)}
50%{transform:translateY(6px)}
}
@media (prefers-reduced-motion:reduce){
.hero__actions,.hero__aurora::before,.hero__bg,.hero__frost,.hero__frost::after,.hero__frost::before,.hero__scroll,.hero__sub,.hero__title{animation:none}
.hero__actions,.hero__scroll,.hero__sub,.hero__title{opacity:1;transform:none}
}
.hero__badge{display:inline-block;margin:0 0 1.25rem;padding:.25rem .75rem;border:1px solid var(--border);border-radius:999px;background:var(--bg-alt);color:var(--text-dim);font-size:.8rem}
.hero__title{margin:0 0 1rem;font-size:clamp(2rem, 6vw, 3.25rem);line-height:1.25;letter-spacing:-.02em;color:#fff;text-shadow:0 0 18px rgba(0,0,0,.9),0 2px 6px rgba(0,0,0,.95),0 1px 2px rgba(0,0,0,.95)}
.hero__sub{max-width:34rem;margin:0 auto 2rem;color:#eaf1f9;font-size:1.05rem;text-shadow:0 0 14px rgba(0,0,0,.9),0 1px 4px rgba(0,0,0,.95)}
.hero__actions{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.72rem 1.5rem;border-radius:11px;border:1px solid transparent;font-weight:600;font-size:.95rem;letter-spacing:-.01em;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease,border-color .18s ease}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn--primary{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 88%,#fff),var(--accent));color:var(--accent-fg);box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 28%,transparent)}
.btn--primary:hover{box-shadow:0 9px 24px color-mix(in srgb,var(--accent) 42%,transparent)}
.btn--ghost{border-color:var(--border);color:var(--text);background:color-mix(in srgb,var(--bg) 40%,transparent);backdrop-filter:blur(4px)}
.btn--ghost:hover{background:var(--bg-alt);border-color:color-mix(in srgb,var(--accent) 45%,var(--border))}
.btn--lg{padding:.95rem 2.1rem;font-size:1.05rem;border-radius:13px}
@media (prefers-reduced-motion:reduce){
.btn{transition:none}
.btn:hover{transform:none}
}
.section{max-width:var(--maxw);margin:0 auto;padding:4rem 1.5rem}
.section--alt{max-width:none;background:var(--bg-alt);border-block:1px solid var(--border)}
.section--alt>*{max-width:calc(var(--maxw) - 3rem);margin-inline:auto}
@supports selector(:has(*)){
.section--alt{background:0 0;border-block:0}
}
.section__title{margin-block:0 2rem;font-size:1.6rem;letter-spacing:-.01em}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem}
.card{padding:1.5rem;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius)}
.card__icon{font-size:1.75rem;margin-bottom:.5rem}
.card h3{margin:0 0 .4rem;font-size:1.05rem}
.card p{margin:0;color:var(--text-dim);font-size:.94rem}
.plan{display:flex;flex-direction:column;gap:.75rem}
.plan .btn{margin-top:auto;text-align:center}
.plan h3{margin:0;font-size:1.05rem}
.plan .plan__price{margin:0;color:var(--text);font-size:1.9rem;font-weight:700;line-height:1.2}
.plan .plan__price span{font-size:.9rem;font-weight:400;color:var(--text-dim)}
.plan__list{margin:0;padding:0;list-style:none;display:grid;gap:.45rem;color:var(--text-dim);font-size:.94rem}
.plan__list li{position:relative;padding-left:1.4rem}
.plan__list li::before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:700}
.plan--featured{border-color:var(--accent)}
.plan .plan__tag{align-self:flex-start;margin:0;padding:.15rem .6rem;border-radius:999px;background:var(--accent);color:var(--accent-fg);font-size:.75rem;font-weight:600}
.download{max-width:620px;margin-inline:auto;padding:2.5rem 2rem;text-align:center;background:linear-gradient(180deg,color-mix(in srgb,var(--bg-alt) 70%,transparent),color-mix(in srgb,var(--bg-alt) 20%,transparent));border:1px solid var(--border);border-radius:18px;box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 6%,transparent)}
.dl__title{display:flex;align-items:center;justify-content:flex-start;text-align:left;gap:.85rem;margin:0 0 1.1rem;font-size:1.08rem;letter-spacing:-.01em}
.dl__num{flex:none;width:42px;height:42px;display:grid;place-items:center;border-radius:11px;font-size:1.05rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--bg-alt));border:1px solid color-mix(in srgb,var(--accent) 22%,transparent)}
.dl__sub{margin:-.6rem 0 1.2rem;padding-left:calc(42px + .85rem);text-align:left;color:var(--text-dim);font-size:.88rem}
.btn svg{width:18px;height:18px;flex:none}
.download__meta{margin:.9rem 0 0;color:var(--text-dim);font-size:.85rem}
.download__sep{border:0;height:1px;margin:2rem 0;background:linear-gradient(90deg,transparent,var(--border),transparent)}
.license-locked{display:flex;align-items:center;justify-content:center;gap:.7rem;padding:1rem 1.25rem;border:1px dashed color-mix(in srgb,var(--border) 90%,var(--accent));border-radius:12px;color:var(--text-dim);font-size:.92rem;background:color-mix(in srgb,var(--bg) 45%,transparent)}
.license-locked svg{width:18px;height:18px;flex:none;color:var(--text-dim)}
.license-row{display:flex;gap:.6rem;max-width:460px;margin-inline:auto}
.license-input{flex:1;min-width:0;padding:.75rem 1rem;border-radius:11px;border:1px solid var(--border);background:color-mix(in srgb,var(--bg) 75%,#000);color:var(--text);font-size:.95rem;transition:border-color .18s ease,box-shadow .18s ease}
.license-input::placeholder{color:var(--text-dim)}
.license-input:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.license-row .btn{white-space:nowrap}
.license-error{color:#f87171;font-size:.9rem;margin:.75rem 0 0;min-height:20px}
.unlock{margin-top:1.25rem;padding:1.25rem;border-radius:14px;border:1px solid color-mix(in srgb,var(--accent) 45%,var(--border));background:color-mix(in srgb,var(--accent) 10%,var(--bg-alt))}
.unlock__title{display:flex;align-items:center;justify-content:center;gap:.5rem;margin:0 0 1rem;font-size:.98rem}
.unlock__title svg{width:19px;height:19px;flex:none;color:var(--accent)}
.unlock__title strong{color:var(--accent)}
@media (max-width:560px){
.download{padding:2rem 1.25rem}
.license-row{flex-direction:column}
}
.specs{max-width:420px;margin:1.5rem auto 0;text-align:left;display:grid;gap:.6rem}
.specs>div{display:flex;justify-content:space-between;gap:1rem;padding-top:.6rem;border-top:1px solid var(--border)}
.specs>div:first-child{border-top:none;padding-top:0}
.specs>div[hidden]{display:none}
.specs dt{color:var(--text-dim);font-size:.88rem}
.specs dd{margin:0;font-size:.88rem;text-align:right;word-break:break-all}
.note{margin-top:1.25rem;color:var(--text-dim);font-size:.88rem}
.steps{margin-block:0;padding:0;list-style:none;counter-reset:step;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.step{counter-increment:step;position:relative;padding:1.6rem 1.5rem;border:1px solid var(--border);border-radius:16px;background:linear-gradient(160deg,color-mix(in srgb,var(--bg) 92%,var(--text)),var(--bg));box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 5%,transparent);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.step:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 40%,var(--border));box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 7%,transparent),0 10px 26px color-mix(in srgb,#000 25%,transparent)}
.step::before{content:"0" counter(step);position:absolute;top:.35rem;right:1rem;font-size:3.4rem;font-weight:800;line-height:1;letter-spacing:-.04em;color:var(--text);opacity:var(--ghost-num);pointer-events:none}
.step::after{content:"";position:absolute;top:50%;right:-.85rem;width:9px;height:9px;margin-top:-5px;border-right:2.5px solid var(--accent);border-bottom:2.5px solid var(--accent);border-radius:1px;transform:rotate(-45deg)}
.step:last-child::after{display:none}
.step__beam{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.step__beam::before{content:"";position:absolute;top:-10%;bottom:-10%;left:0;width:42%;transform:translateX(-130%);opacity:0;background:linear-gradient(100deg,transparent,color-mix(in srgb,var(--accent) 22%,transparent) 42%,color-mix(in srgb,var(--accent) 60%,transparent) 50%,color-mix(in srgb,var(--accent) 22%,transparent) 58%,transparent);filter:blur(7px)}
@keyframes beamFlow{
0%{transform:translateX(-130%);opacity:0}
6%{opacity:1}
38%{opacity:1}
47%{transform:translateX(320%);opacity:0}
100%,47.01%{transform:translateX(-130%);opacity:0}
}
.step:hover .step__beam::before{animation:beamFlow 1.6s ease-out infinite}
.step:hover+.step .step__beam::before{animation:beamFlow 1.6s ease-out .42s infinite}
@keyframes arrowFlow{
0%{opacity:.6;transform:rotate(-45deg) translate(0,0);filter:none}
14%{opacity:1;transform:rotate(-45deg) translate(2.5px,2.5px);filter:drop-shadow(0 0 5px var(--accent))}
100%,30%{opacity:.6;transform:rotate(-45deg) translate(0,0);filter:none}
}
.step:hover::after{animation:arrowFlow 1.6s ease-out .3s infinite}
.step:hover+.step{border-color:color-mix(in srgb,var(--accent) 45%,var(--border));transition:border-color .35s ease .42s,box-shadow .35s ease .42s;box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 7%,transparent),0 0 22px color-mix(in srgb,var(--accent) 18%,transparent)}
.step__icon{width:42px;height:42px;display:grid;place-items:center;border-radius:11px;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--bg-alt));border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);margin-bottom:1rem;transition:background-color .2s ease,transform .2s ease}
.step__icon svg{width:22px;height:22px;display:block}
.step:hover .step__icon{background:color-mix(in srgb,var(--accent) 22%,var(--bg-alt));transform:scale(1.04)}
.step h3{margin:0 0 .4rem;font-size:1.08rem;letter-spacing:-.01em}
.step p{margin:0;color:var(--text-dim);font-size:.93rem;line-height:1.7}
@media (max-width:760px){
.steps{grid-template-columns:1fr}
.step::after{top:auto;bottom:-.78rem;right:50%;margin-top:0;margin-right:-4px}
}
@media (prefers-reduced-motion:reduce){
.step,.step__icon{transition:none}
.step:hover{transform:none}
.step:hover .step__beam::before,.step:hover+.step .step__beam::before,.step:hover::after{animation:none}
.step__beam::before{opacity:0}
}
.faq{background:linear-gradient(180deg,color-mix(in srgb,var(--bg-alt) 70%,transparent),color-mix(in srgb,var(--bg-alt) 22%,transparent));border:1px solid var(--border);border-radius:14px;margin-bottom:.7rem;overflow:hidden;box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 6%,transparent);transition:border-color .2s ease,box-shadow .2s ease}
.faq:hover{border-color:color-mix(in srgb,var(--accent) 35%,var(--border));box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 8%,transparent),0 6px 18px color-mix(in srgb,#000 20%,transparent)}
.faq[open]{border-color:color-mix(in srgb,var(--accent) 28%,var(--border))}
.faq>summary{list-style:none;cursor:pointer;user-select:none;display:flex;align-items:center;gap:.85rem;padding:.95rem 1.25rem;font-weight:600;font-size:1.05rem}
.faq>summary::-webkit-details-marker{display:none}
.faq>summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:13px}
#faq{counter-reset:faq}
.faq{counter-increment:faq}
.faq>summary::before{content:"Q" counter(faq);flex:none;width:42px;height:42px;display:grid;place-items:center;border-radius:11px;font-size:.95rem;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--bg-alt));border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);transition:background-color .2s ease,border-color .2s ease,transform .2s ease}
.faq:hover>summary::before,.faq[open]>summary::before{background:color-mix(in srgb,var(--accent) 22%,var(--bg-alt));border-color:color-mix(in srgb,var(--accent) 40%,transparent);transform:scale(1.04)}
.faq>summary::after{content:"";flex:none;margin-left:auto;width:7px;height:7px;border-right:2px solid var(--text-dim);border-bottom:2px solid var(--text-dim);border-radius:1px;transform:rotate(-45deg);transition:transform .25s cubic-bezier(.4, 0, .2, 1),border-color .2s ease}
.faq[open]>summary::after{transform:rotate(45deg);border-color:var(--accent)}
.faq p{margin:0;padding:.95rem 1.35rem 1.3rem calc(1.25rem + 42px + .85rem);color:var(--text-dim);border-top:1px solid color-mix(in srgb,var(--border) 70%,transparent)}
@media (max-width:560px){
.faq p{padding-left:1.35rem}
}
@supports selector(::details-content){
.faq{interpolate-size:allow-keywords}
.faq::details-content{block-size:0;overflow:hidden;opacity:0;transition:block-size .3s cubic-bezier(.4, 0, .2, 1),opacity .25s ease,content-visibility .3s allow-discrete}
.faq[open]::details-content{block-size:auto;opacity:1}
}
.teachtabs{display:grid;grid-template-columns:260px 1fr;gap:1.75rem;align-items:start}
.tt__radio{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.tt__list{display:flex;flex-direction:column;gap:.4rem}
.tt__tab{display:flex;align-items:center;gap:.85rem;padding:.6rem .8rem;border:1px solid transparent;border-radius:12px;cursor:pointer;user-select:none;color:var(--text-dim);font-weight:600;font-size:.98rem;transition:background-color .18s ease,color .18s ease,border-color .18s ease}
.tt__tab:hover{background:color-mix(in srgb,var(--bg-alt) 70%,transparent);color:var(--text)}
.tt__icon{flex:none;width:42px;height:42px;display:grid;place-items:center;border-radius:11px;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--bg-alt));border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);transition:background-color .18s ease,border-color .18s ease,transform .18s ease}
.tt__icon svg{width:22px;height:22px;display:block}
.tt__panel{display:none;padding:1.75rem;border:1px solid var(--border);border-radius:16px;background:linear-gradient(160deg,color-mix(in srgb,var(--bg-alt) 85%,transparent),color-mix(in srgb,var(--bg-alt) 25%,transparent));box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 5%,transparent)}
.tt__head{display:flex;align-items:flex-start;gap:.9rem;margin-bottom:1.4rem}
.tt__icon--lg{width:48px;height:48px;border-radius:13px}
.tt__icon--lg svg{width:25px;height:25px}
.tt__title{margin:0 0 .2rem;font-size:1.25rem;letter-spacing:-.01em}
.tt__sub{margin:0;color:var(--text-dim);font-size:.93rem}
.tt__shot{aspect-ratio:16/9;display:grid;place-items:center;margin-bottom:1.4rem;border:1px dashed color-mix(in srgb,var(--border) 75%,var(--text-dim));border-radius:11px;background:color-mix(in srgb,var(--bg) 55%,transparent);color:var(--text-dim);font-size:.85rem}
.tt__shot img{width:100%;height:100%;object-fit:cover;border-radius:11px}
.tt__steps{margin:0;padding:0;list-style:none;counter-reset:ttstep}
.tt__steps li{counter-increment:ttstep;position:relative;padding-left:2.2rem;margin-bottom:.85rem;color:var(--text-dim);font-size:.94rem}
.tt__steps li:last-child{margin-bottom:0}
.tt__steps li::before{content:counter(ttstep);position:absolute;left:0;top:.12rem;width:1.55rem;height:1.55rem;display:grid;place-items:center;border-radius:50%;font-size:.78rem;font-weight:700;color:var(--accent);background:color-mix(in srgb,var(--accent) 18%,var(--bg-alt))}
#teachtab-1:checked~.tt__list .tt__tab:first-child,#teachtab-2:checked~.tt__list .tt__tab:nth-child(2),#teachtab-3:checked~.tt__list .tt__tab:nth-child(3),#teachtab-4:checked~.tt__list .tt__tab:nth-child(4){background:color-mix(in srgb,var(--accent) 14%,var(--bg-alt));border-color:color-mix(in srgb,var(--accent) 32%,transparent);color:var(--text)}
#teachtab-1:checked~.tt__list .tt__tab:first-child .tt__icon,#teachtab-2:checked~.tt__list .tt__tab:nth-child(2) .tt__icon,#teachtab-3:checked~.tt__list .tt__tab:nth-child(3) .tt__icon,#teachtab-4:checked~.tt__list .tt__tab:nth-child(4) .tt__icon{background:color-mix(in srgb,var(--accent) 24%,var(--bg-alt));border-color:color-mix(in srgb,var(--accent) 42%,transparent);transform:scale(1.04)}
#teachtab-1:checked~.tt__panels .tt__panel:first-child,#teachtab-2:checked~.tt__panels .tt__panel:nth-child(2),#teachtab-3:checked~.tt__panels .tt__panel:nth-child(3),#teachtab-4:checked~.tt__panels .tt__panel:nth-child(4){display:block;animation:ttFade .32s cubic-bezier(.16,1,.3,1) both}
@keyframes ttFade{
from{opacity:0;transform:translateY(8px)}
to{opacity:1;transform:none}
}
#teachtab-1:focus-visible~.tt__list .tt__tab:first-child,#teachtab-2:focus-visible~.tt__list .tt__tab:nth-child(2),#teachtab-3:focus-visible~.tt__list .tt__tab:nth-child(3),#teachtab-4:focus-visible~.tt__list .tt__tab:nth-child(4){outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:760px){
.teachtabs{grid-template-columns:1fr;gap:1.1rem}
.tt__panel{padding:1.35rem 1.1rem}
}
@media (prefers-reduced-motion:reduce){
.tt__icon,.tt__tab{transition:none}
#teachtab-1:checked~.tt__panels .tt__panel:first-child,#teachtab-2:checked~.tt__panels .tt__panel:nth-child(2),#teachtab-3:checked~.tt__panels .tt__panel:nth-child(3),#teachtab-4:checked~.tt__panels .tt__panel:nth-child(4){animation:none}
}
.footer{padding:3rem 1.5rem;text-align:center;color:var(--text-dim);font-size:.88rem;border-top:1px solid var(--border)}
.footer p{margin:.2rem 0}
.footer__small{font-size:.8rem;opacity:.75}
[hidden]{display:none!important}
.gauth{max-width:520px;margin:0 auto;padding:2.5rem;background:var(--g-card);color:var(--g-text);border:1px solid var(--border);border-radius:28px;box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 6%,transparent),0 10px 30px color-mix(in srgb,#000 22%,transparent)}
@media (prefers-color-scheme:dark){
:root:not([data-theme=light]) .gauth{border-color:var(--border)}
}
:root[data-theme=dark] .gauth{border-color:var(--border)}
@media (max-width:720px){
.gauth{padding:2rem 1.5rem;border-radius:20px}
}
.gauth__sub{margin:0 0 2rem;color:var(--g-text);font-size:1.05rem;line-height:1.6}
.gauth__sub a{color:var(--g-accent)}
.gauth__forgot{display:inline-block;margin:-.6rem 0 .2rem;padding:.2rem 0;border:0;background:0 0;cursor:pointer;color:var(--g-accent);font:inherit;font-size:.88rem}
.gauth__forgot:hover{text-decoration:underline}
.gauth__forgot:focus-visible{outline:2px solid var(--g-accent);outline-offset:3px;border-radius:4px}
.gfield{position:relative;margin-bottom:1.6rem}
.gfield input{display:block;width:100%;box-sizing:border-box;padding:1.15rem 1.1rem;font-size:1.1rem;font-family:inherit;line-height:1.4;color:var(--g-text);background:0 0;border:1px solid var(--g-border);border-radius:10px;outline:0}
.gfield input:focus{border-color:var(--g-accent);box-shadow:inset 0 0 0 1px var(--g-accent)}
.gfield label{position:absolute;left:.7rem;top:1.15rem;padding:0 .4rem;color:var(--g-dim);font-size:1.1rem;line-height:1.4;background:var(--g-card);pointer-events:none;transition:top .15s ease,font-size .15s ease,color .15s ease}
.gfield input:focus+label,.gfield input:not(:placeholder-shown)+label{top:-.6rem;font-size:.82rem}
.gfield input:focus+label{color:var(--g-accent)}
.gauth__actions{display:flex;justify-content:flex-end;align-items:center;gap:.5rem;margin-top:2rem;flex-wrap:wrap}
.gbtn{font-family:inherit;font-size:.92rem;font-weight:600;border:none;border-radius:999px;cursor:pointer;transition:background-color .15s ease,opacity .15s ease}
.gbtn--filled{padding:.8rem 1.9rem;background:var(--g-btn-bg);color:var(--g-btn-fg)}
.gbtn--filled:hover{opacity:.9}
.gbtn--text{padding:.8rem 1rem;background:0 0;color:var(--g-accent)}
.gbtn--text:hover{background:var(--g-hover)}
.gbtn:disabled{opacity:.5;cursor:not-allowed}
.gauth__msg{margin:.25rem 0 0;font-size:.85rem;line-height:1.6;min-height:1.2em}
.gauth__msg.is-error{color:var(--g-error)}
.gauth__msg.is-ok{color:var(--g-ok)}
.gauth__hi{margin:0 0 .3rem;font-size:1.4rem;font-weight:400;color:var(--g-text);word-break:break-all}
.gauth__hi strong{font-weight:600}
.gauth__who{margin:0;font-size:.9rem;color:var(--g-dim);word-break:break-all}
.mylic{margin-top:1.25rem;display:grid;gap:.6rem;max-height:290px;overflow-y:auto;padding-right:.35rem;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--g-dim) 45%,transparent) transparent}
.mylic::-webkit-scrollbar{width:8px}
.mylic::-webkit-scrollbar-track{background:0 0}
.mylic::-webkit-scrollbar-thumb{border-radius:999px;background:color-mix(in srgb,var(--g-dim) 40%,transparent)}
.mylic__item{padding:.9rem 1rem;border:1px solid var(--g-accent);border-radius:10px}
.mylic__key{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.05rem;font-weight:600;color:var(--g-accent);word-break:break-all}
.mylic__meta{margin:.35rem 0 0;font-size:.8rem;color:var(--g-dim)}
.mylic__expired{color:var(--g-error)}
.orderbox{margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--g-border)}
.orderbox__title{margin:0 0 .5rem;font-size:1.05rem;color:var(--g-text)}
.orderbox__state{margin:0 0 .75rem;font-size:.85rem;line-height:1.6;color:var(--g-dim)}
.orderbox__form{display:grid;gap:.15rem}
.orderbox__label{font-size:.78rem;color:var(--g-dim);margin-top:.5rem}
.orderbox__row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.orderbox input,.orderbox select{width:100%;box-sizing:border-box;padding:.6rem .7rem;font-size:.95rem;font-family:inherit;color:var(--g-text);background:0 0;border:1px solid var(--g-border);border-radius:8px;outline:0}
.orderbox select{appearance:none}
.orderbox select option{background:var(--g-card);color:var(--g-text)}
.orderbox input:focus,.orderbox select:focus{border-color:var(--g-accent);box-shadow:inset 0 0 0 1px var(--g-accent)}
.orderbox .gbtn{margin-top:1rem;width:100%}
.gauth__foot{max-width:520px;margin:1rem auto 0;padding:0 .5rem;color:var(--text-dim);font-size:.8rem}
.chat{position:fixed;right:20px;bottom:20px;z-index:60;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.chat[hidden]{display:none}
.chat__state{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.chat__bubble{position:relative;width:56px;height:56px;display:grid;place-items:center;border-radius:50%;cursor:pointer;color:#fff;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 86%,#fff),var(--accent));box-shadow:0 8px 24px color-mix(in srgb,#000 45%,transparent);transition:transform .2s ease,box-shadow .2s ease}
.chat__bubble:hover{transform:translateY(-2px);box-shadow:0 12px 30px color-mix(in srgb,#000 55%,transparent)}
.chat__state:focus-visible~.chat__bubble{outline:3px solid var(--accent);outline-offset:3px}
.chat__ico{grid-area:1/1;width:25px;height:25px}
.chat__ico--close{display:none}
.chat__state:checked~.chat__bubble .chat__ico--open{display:none}
.chat__state:checked~.chat__bubble .chat__ico--close{display:block}
.chat__count{position:absolute;top:-2px;right:-2px;min-width:21px;height:21px;padding:0 6px;display:grid;place-items:center;border-radius:999px;background:#ef4444;color:#fff;font-size:.72rem;font-weight:700;border:2px solid var(--bg)}
.chat__win{display:none;width:350px;max-width:calc(100vw - 40px);height:520px;max-height:calc(100vh - 130px);flex-direction:column;overflow:hidden;background:var(--g-card);border:1px solid var(--g-border);border-radius:16px;box-shadow:0 20px 55px color-mix(in srgb,#000 55%,transparent)}
.chat__state:checked~.chat__win{display:flex;animation:chatPop .22s cubic-bezier(.16,1,.3,1) both}
@keyframes chatPop{
from{opacity:0;transform:translateY(12px) scale(.97)}
to{opacity:1;transform:none}
}
.chat__head{display:flex;align-items:center;gap:.55rem;flex:none;padding:.85rem 1rem;border-bottom:1px solid var(--g-border)}
.chat__dot{width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 3px color-mix(in srgb,#4ade80 22%,transparent)}
.chat__title{font-weight:700;font-size:.95rem;color:var(--g-text)}
.chat__close{margin-left:auto;width:28px;height:28px;display:grid;place-items:center;border-radius:8px;cursor:pointer;position:relative;transition:background-color .15s ease}
.chat__close:hover{background:var(--g-hover)}
.chat__close::after,.chat__close::before{content:"";position:absolute;width:13px;height:2px;border-radius:2px;background:var(--g-dim)}
.chat__close::before{transform:rotate(45deg)}
.chat__close::after{transform:rotate(-45deg)}
.chat__body{flex:1;min-height:0;display:flex;flex-direction:column;padding:.9rem 1rem 1rem}
.chat__body .orderbox__state{margin:0 0 .5rem;font-size:.82rem}
.chat__body .msgbox__thread{flex:1;min-height:0;max-height:none;margin:.2rem 0 .75rem}
.chat__body #msg-form{flex:none}
.chat__body #msg-hint{margin:.5rem 0 0}
@media (max-width:480px){
.chat{right:14px;bottom:14px}
.chat__win{width:calc(100vw - 28px);height:calc(100vh - 130px)}
}
@media (prefers-reduced-motion:reduce){
.chat__bubble{transition:none}
.chat__bubble:hover{transform:none}
.chat__state:checked~.chat__win{animation:none}
}
.msgbox__thread{display:grid;gap:.6rem;overflow-y:auto;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--g-dim) 45%,transparent) transparent}
.msgbox__thread::-webkit-scrollbar{width:8px}
.msgbox__thread::-webkit-scrollbar-track{background:0 0}
.msgbox__thread::-webkit-scrollbar-thumb{border-radius:999px;background:color-mix(in srgb,var(--g-dim) 40%,transparent)}
.msgbox__thread::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--g-dim) 65%,transparent)}
.msg{padding:.7rem .9rem;border-radius:12px;font-size:.92rem;line-height:1.6;max-width:85%;white-space:pre-wrap;word-break:break-word}
.msg--me{margin-left:auto;background:var(--g-btn-bg);color:var(--g-btn-fg)}
.msg--admin{margin-right:auto;background:var(--g-border);color:var(--g-text);opacity:.95}
.msg__time{display:block;margin-top:.3rem;font-size:.7rem;opacity:.7}
.chat textarea{width:100%;box-sizing:border-box;resize:vertical;padding:.7rem .8rem;font-size:.95rem;font-family:inherit;color:var(--g-text);background:0 0;border:1px solid var(--g-border);border-radius:10px;outline:0}
.chat textarea:focus{border-color:var(--g-accent);box-shadow:inset 0 0 0 1px var(--g-accent)}
.chat .gbtn{margin-top:.75rem;width:100%}
@media (prefers-reduced-motion:reduce){
*{transition:none!important;animation:none!important}
}
.enter{position:fixed;inset:0;z-index:200;display:grid;place-items:center;overflow:hidden;background:#070a10;cursor:pointer;transition:opacity 1.05s cubic-bezier(.4, 0, .2, 1),transform 1.2s cubic-bezier(.32, 0, .16, 1),filter 1.05s ease,visibility 1.2s;transform-origin:50% 45%}
.is-entered .enter{display:none}
.enter.is-gone{opacity:0;visibility:hidden;transform:scale(1.09);filter:blur(7px);pointer-events:none}
.enter__hint{transition:opacity .3s ease}
.enter.is-gone .enter__hint{opacity:0;animation:none}
body.is-gated{overflow:hidden}
.enter__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;animation:enterZoom 18s ease-out both}
@keyframes enterZoom{
from{transform:scale(1.08)}
to{transform:scale(1)}
}
.enter::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 45%,rgba(4,7,13,.35) 0,rgba(4,7,13,.72) 70%,rgba(4,7,13,.9) 100%)}
.enter__inner{position:relative;z-index:1;text-align:center;padding:1.5rem;animation:enterRise 1s cubic-bezier(.16,1,.3,1) .15s both}
@keyframes enterRise{
from{opacity:0;transform:translateY(16px)}
to{opacity:1;transform:none}
}
.enter__hint{margin:0;font-size:.9rem;letter-spacing:.16em;text-indent:.16em;color:rgba(255,255,255,.72);animation:enterBreath 2.6s ease-in-out 1.2s infinite}
@keyframes enterBreath{
0%,100%{opacity:.45}
50%{opacity:1}
}
@media (prefers-reduced-motion:reduce){
.enter,.enter__bg,.enter__hint,.enter__inner{animation:none}
.enter{transition:opacity .25s linear,visibility .25s}
.enter.is-gone{transform:none;filter:none}
}
.enter__ripple{position:absolute;inset:0;width:100%;height:100%;display:block}
.enter.has-ripple .enter__bg{visibility:hidden}
.is-gated .tabpanel{display:none!important}
.is-gated #account{display:block!important}
.is-gated .nav__links a:not([href="#account"]){display:none}
.is-gated .hero__actions .btn--ghost{display:none}
.is-gated .gauth__foot{font-size:0}
.is-gated .gauth__foot::after{content:"內部測試中。註冊後需要管理員審核通過，才會開放網站其餘內容。";font-size:.85rem;line-height:1.6}
.memberstate{display:flex;align-items:flex-start;gap:.55rem;margin:.75rem 0 0;padding:.7rem .85rem;border-radius:10px;font-size:.9rem;font-weight:600;line-height:1.55;letter-spacing:.01em;color:var(--g-warn);background:color-mix(in srgb,var(--g-warn) 12%,transparent);border-left:3px solid var(--g-warn)}
.memberstate::before{content:"";flex:none;width:.5rem;height:.5rem;margin-top:.42rem;border-radius:50%;background:currentColor;animation:memberstate-pulse 1.8s ease-in-out infinite}
@keyframes memberstate-pulse{
0%,100%{opacity:1;transform:scale(1)}
50%{opacity:.35;transform:scale(.72)}
}
.memberstate.is-rejected{color:var(--g-error);background:color-mix(in srgb,var(--g-error) 12%,transparent);border-left-color:var(--g-error)}
.memberstate.is-rejected::before{animation:none}
@media (prefers-reduced-motion:reduce){
.memberstate::before{animation:none}
}