/* Applied from emilkowalski/skills/apple-design: restraint, materials, direct feedback,
   system typography, interruptible springs and independent accessibility preferences. */
:root{color-scheme:light dark;--page-bg:#f5f5f7;--ink:#1d1d1f;--secondary:#62626a;--surface:#fff;--glass:rgba(255,255,255,.82);--line:rgba(20,20,30,.1);--accent:#0066cc;--accent-fill:#0071e3;--quiet:#ededf1;--shadow:0 12px 36px rgba(30,40,65,.06);--text:var(--ink);--muted:var(--secondary);--panel:var(--glass);--border:var(--line);--blue:var(--accent-fill)}
html{font:100%/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;scroll-padding-top:6rem}
body{background:var(--page-bg)!important;color:var(--ink)!important;font:inherit!important;font-optical-sizing:auto;-webkit-font-smoothing:antialiased}
body::before{background:var(--page-bg)!important}
a{color:var(--accent)}
button,input{font:inherit;touch-action:manipulation}
button,a,input{ -webkit-tap-highlight-color:transparent }
button:active,.btn:active,.top-nav a:active,.resource-link:active{transform:scale(.97);transition:transform 80ms ease-out}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--accent-fill)!important;outline-offset:4px}
button:disabled{cursor:wait;opacity:.55}
[hidden]{display:none!important}
#bg-particles,#sparkles{display:none!important}
.container{width:min(70rem,calc(100% - 3rem))}
.glass-header{background:var(--glass);backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);border-bottom:0;box-shadow:0 1px 12px rgba(30,35,50,.025)}
.header-inner{gap:1rem;min-height:4.5rem}
.brand{color:var(--ink);min-width:0;flex:1}
.center-brand{position:static;left:auto;top:auto;transform:none;text-align:left}
.brand h1,.brand h2{min-width:0}
.brand h1,.brand h2{font-size:.9rem;font-weight:650;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:28rem;text-shadow:none}
.brand-logo{width:2.1rem;height:2.1rem;border-radius:.65rem}
.top-nav{gap:.25rem;flex-shrink:0}
.top-nav a{background:transparent;color:var(--ink);min-height:2.75rem;display:inline-flex;align-items:center;font-size:.82rem;padding:.5rem .8rem;border-radius:999px}
.top-nav a:hover{background:var(--quiet)}
.main-space{padding:0 0 3rem}
.site-intro{padding:5rem 0 3.5rem;max-width:54rem}
.site-intro .eyebrow{color:var(--secondary);font-size:.76rem;font-weight:650;letter-spacing:.12em;margin:0 0 1.25rem}
.site-intro h2{font-size:clamp(2.75rem,6vw,4.5rem);line-height:1.08;font-weight:720;letter-spacing:-.045em;margin:0 0 1.4rem;text-wrap:balance}
.site-intro .intro-copy{font-size:1.15rem;line-height:1.75;color:var(--secondary);max-width:36rem;margin:0 0 1.7rem}
.intro-actions{display:flex;gap:.75rem;flex-wrap:wrap}
.btn,.intro-actions a{min-height:2.75rem;border-radius:999px;padding:.65rem 1.15rem;text-decoration:none;font-size:.9rem;font-weight:550;display:inline-flex;align-items:center;justify-content:center;border:0;box-shadow:none}
.btn-blue,.intro-actions .primary{background:var(--accent-fill);color:#fff}
.btn-whitepink,.btn-secondary,.intro-actions .secondary{background:var(--quiet);color:var(--accent)}
.glass-panel{background:var(--surface);border:1px solid var(--line);border-radius:1.5rem;box-shadow:var(--shadow);backdrop-filter:none;-webkit-backdrop-filter:none}
.p-16{padding:1.75rem}.mb-12{margin-bottom:1.5rem}
.search-row-wrap{margin-bottom:1.2rem}.search-row{padding:.65rem;background:var(--surface);border-radius:1.1rem;box-shadow:none}
.search-box-large input{background:transparent;color:var(--ink);border:0;height:3rem;font-size:1rem;padding:0 1rem}
.search-box-large input::placeholder{color:var(--secondary)}
.search-box-large button{background:var(--accent-fill);color:white;border:0;border-radius:.75rem;padding:0 1.25rem;min-width:4.5rem}
.notice-marquee-wrap{height:auto!important;min-height:3rem;margin:0 0 1.5rem!important;padding:.85rem 1rem;border:0!important;border-radius:1rem!important;background:var(--quiet)!important;backdrop-filter:none!important}
.notice-marquee-track{animation:none!important;transform:none!important;min-width:0!important;width:auto!important}
.notice-marquee-text{white-space:normal!important;line-height:1.7!important;padding:0!important;font-size:.82rem!important;font-weight:450!important;color:var(--secondary)!important;text-shadow:none!important}
.notice-marquee-text[aria-hidden]{display:none}
.tabs-row{position:relative;display:inline-flex;isolation:isolate;gap:0;padding:.3rem;background:var(--quiet);border-radius:999px;max-width:100%;overflow:auto;scrollbar-width:none}
.tab-btn{position:relative;z-index:1;background:transparent!important;color:var(--secondary)!important;border:0!important;border-radius:999px!important;min-height:2.75rem;padding:.55rem 1.2rem!important;white-space:nowrap;font-weight:550;box-shadow:none!important;transition:color 100ms ease-out}
.tab-btn.active{color:var(--ink)!important}
.segmented-thumb{position:absolute;top:.3rem;bottom:.3rem;left:0;background:var(--surface);border-radius:999px;box-shadow:0 1px 5px rgba(0,0,0,.08);pointer-events:none;z-index:0;will-change:transform}
.panel-h3,.section-title-row h2{color:var(--ink);font-size:1.4rem;letter-spacing:-.025em;line-height:1.3;margin:1.5rem 0 .75rem}
.panel-p{color:var(--secondary);line-height:1.7}.section-title-row{margin-bottom:1.25rem}
.section-title-row h2{margin:0}
.film-wrap{overflow:auto;scroll-snap-type:x mandatory;border-radius:1.15rem;scrollbar-width:thin;scrollbar-color:var(--line) transparent;padding-bottom:.75rem}
.film-marquee{animation:none!important;display:flex!important;gap:1.25rem;width:max-content!important;min-width:100%;will-change:auto!important}
.film-card{flex:0 0 clamp(15rem,32vw,21rem);width:clamp(15rem,32vw,21rem);border-radius:1.15rem;border:0;scroll-snap-align:start;overflow:hidden;box-shadow:none}
.film-link{min-height:15rem;border-radius:1.15rem;transition:filter 150ms ease-out}.film-link:hover{filter:brightness(1.05)}
.film-info{padding:1.25rem}.film-info h3{font-size:1.05rem;line-height:1.5;font-weight:650;letter-spacing:-.01em}
.nav-grid{gap:1rem}.nav-card{padding:1.5rem;border:1px solid var(--line);background:var(--surface);box-shadow:none;border-radius:1.1rem}
.nav-card h3{color:var(--ink);font-size:1.1rem;letter-spacing:-.015em;margin:0 0 .5rem}.nav-card p{color:var(--secondary);margin:0 0 1.2rem}.actions{gap:.6rem}
.pill{background:var(--quiet);color:var(--secondary);font-size:.75rem;border:0;padding:.35rem .7rem}
.site-footer a{font-size:.78rem!important;color:var(--secondary)!important;font-weight:450!important}
.reader-wrap{padding:2rem 1rem 3rem}.reader-card{background:var(--surface);border:1px solid var(--line);padding:clamp(1.25rem,4vw,3rem);border-radius:1.5rem;box-shadow:var(--shadow);backdrop-filter:none}
.reader-head h1{font-size:clamp(1.6rem,4vw,2.5rem)!important;line-height:1.2;letter-spacing:-.03em;font-weight:700;margin:1rem 0}
.reader-content{font-size:1rem!important;color:var(--ink);line-height:1.85}.reader-content h2{font-size:1.3rem;line-height:1.4}.reader-content h3{font-size:1.1rem}.reader-meta{color:var(--secondary);font-size:.82rem}
.reader-content pre,.reader-content code{background:var(--quiet);color:var(--ink)}.reader-tags span{color:var(--accent)}
.post-card,.card{background:var(--surface)!important;border-color:var(--line)!important;border-radius:1.2rem!important}.post-main h3,.post-main p,.post-head h1,.page-title{color:var(--ink)!important;text-shadow:none!important}.post-main .meta,.post-main .desc{color:var(--secondary)!important}
.account-page main{max-width:66rem!important;margin:2.5rem auto!important;padding:1.5rem!important}.account-page h1{font-size:clamp(2.3rem,5vw,3.5rem);letter-spacing:-.035em;line-height:1.12;margin:3rem 0 1rem}.account-page h2{font-size:1.25rem;letter-spacing:-.02em}
.account-page .panel{background:var(--surface);border:1px solid var(--line);border-radius:1.4rem;box-shadow:var(--shadow);padding:1.75rem;margin:1.5rem 0}
.account-page .muted{color:var(--secondary)}.account-page .badge{background:var(--quiet);color:var(--secondary);font-size:.8rem}.account-page #message{color:var(--accent);font-size:.9rem;min-height:0}.account-page #message:empty{display:none}
.account-page label{font-size:.85rem;color:var(--secondary);gap:.45rem}.account-page input{background:var(--page-bg);color:var(--ink);border:1px solid var(--line);border-radius:.75rem;padding:.75rem 1rem;min-height:2.75rem}
.account-page button{background:var(--accent-fill);color:white;border-radius:999px;min-height:2.75rem;padding:.65rem 1.05rem;font-size:.85rem;font-weight:550}
.account-page .danger{background:var(--quiet);color:#c12b34}.account-page .resource-link{background:var(--quiet);color:var(--accent);border-radius:999px;min-height:2.75rem;display:inline-flex;align-items:center;padding:.5rem 1rem;text-decoration:none}
.account-page li,.account-page td,.account-page th{border-color:var(--line)}.account-page th{font-size:.78rem;color:var(--secondary);font-weight:550;white-space:nowrap}.account-page td{font-size:.9rem}.account-page .scroll{margin:1.25rem -.25rem}.account-page #identity{font-size:1.15rem}.account-page #permission{max-width:42rem;font-size:.9rem}
.account-page [role=switch]{background:var(--quiet);color:var(--ink);display:inline-flex;align-items:center;gap:.55rem}.account-page [role=switch]::before{content:"";width:1.7rem;height:1.05rem;border-radius:999px;background:#8c8c94;display:inline-block;box-shadow:inset .5rem 0 0 .15rem #fff}.account-page [role=switch][aria-checked=true]{color:#16723a}.account-page [role=switch][aria-checked=true]::before{background:#28a756;box-shadow:inset -.5rem 0 0 .15rem #fff}
@media(prefers-color-scheme:dark){:root{--page-bg:#111113;--ink:#f5f5f7;--secondary:#aaaab3;--surface:#1c1c1e;--glass:rgba(28,28,30,.84);--line:rgba(255,255,255,.12);--accent:#7abaff;--accent-fill:#0071e3;--quiet:#2c2c30;--shadow:0 12px 36px rgba(0,0,0,.12)}.account-page .danger{color:#ff9b9f}.account-page [role=switch][aria-checked=true]{color:#7cdda1}}
@media(max-width:720px){.container{width:calc(100% - 2rem)}.header-inner{flex-wrap:wrap;padding:.8rem 0;gap:.6rem}.brand h1{max-width:calc(100vw - 6rem);font-size:.8rem}.top-nav{width:100%;overflow:auto}.top-nav a{font-size:.78rem;padding:.4rem .8rem}.site-intro{padding:3rem 0 2.5rem}.site-intro h2{font-size:2.85rem}.site-intro .intro-copy{font-size:1rem}.p-16{padding:1.2rem}.tab-btn{padding:.5rem .85rem!important;font-size:.8rem}.film-card{flex-basis:15.5rem;width:15.5rem}.film-link{min-height:13rem}.account-page main{padding:1rem!important;margin:0 auto!important}.account-page .panel{padding:1.25rem}.account-page h1{margin:2rem 0 1rem}.account-page form,.account-page label{width:100%}.account-page input{width:100%}.account-page .actions{min-width:10rem}}
@media(prefers-reduced-transparency:reduce){:root{--glass:var(--surface)}.glass-header{backdrop-filter:none;-webkit-backdrop-filter:none}}
@media(prefers-contrast:more){:root{--secondary:var(--ink);--line:var(--ink);--glass:var(--surface)}.glass-header,.glass-panel,.account-page .panel{border:1px solid var(--line)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.segmented-thumb{will-change:auto}}