:root{--bg-canvas:#3b0d1a;--bg-surface:#501525;--bg-surface-hover:#5e1a2d;--text-primary:#fff5e6;--text-muted:#ead8c6;--accent-primary:#e8d5a8;--accent-secondary:#d4b77a;--border-subtle:rgba(232,213,168,.3);--ease-kinetic:cubic-bezier(0.16,1,0.3,1);--shadow-elevation:0 12px 32px -4px rgba(0,0,0,.45);--glow-accent:0 0 24px -4px var(--accent-primary);--glass-backdrop:blur(16px) saturate(180%);--mono:ui-monospace,Consolas,monospace}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg-canvas);color:var(--text-primary);line-height:1.65;font-size:1.05rem;overflow-wrap:anywhere;hyphens:auto}
h1,h2,h3{overflow-wrap:anywhere;hyphens:auto}
h1{font-size:clamp(2.1rem,5vw,3.7rem);line-height:1.08;letter-spacing:-.02em;margin:.4em 0 .5em}
h2{font-size:clamp(1.45rem,3vw,2.1rem);line-height:1.2;margin-bottom:.6em}
h3{font-family:var(--mono);font-size:1rem;letter-spacing:.02em;line-height:1.4;margin-bottom:.35em}
p{margin-bottom:1em}
a{color:var(--accent-primary)}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--accent-primary);outline-offset:3px}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.prose{max-width:70ch}
.prose ul{margin:0 0 1em 1.2em}
.kicker,.label,.meta,.tag{font-family:var(--mono);color:var(--accent-primary)}
.kicker{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;display:block}
.meta{font-size:.8rem;color:var(--text-muted);display:block;margin-bottom:.3em}
.lead{font-size:1.18rem;color:var(--text-muted);max-width:60ch}
.site-header{position:relative;z-index:20;max-width:1200px;width:calc(100% - 32px);margin:16px auto 0;display:flex;align-items:center;gap:16px;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:999px;padding:9px 10px 9px 18px;box-shadow:var(--shadow-elevation)}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto;color:var(--text-primary);text-decoration:none;font-weight:700;letter-spacing:.01em}
.brand-mark{width:34px;height:34px;flex:none;border-radius:50%;background:var(--accent-primary);color:var(--bg-canvas);display:grid;place-items:center;font-family:var(--mono);font-size:.9rem}
.site-nav ul{list-style:none;display:flex;gap:2px}
.site-nav a{display:block;padding:8px 12px;border-radius:999px;color:var(--text-primary);text-decoration:none;font-size:.9rem;transition:background .4s var(--ease-kinetic)}
.site-nav a:hover{background:var(--bg-surface-hover)}
.site-nav a[aria-current=page]{background:var(--bg-canvas);color:var(--accent-primary)}
.menu-btn{display:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--border-subtle);background:var(--bg-canvas);color:var(--text-primary);font-size:1.5rem;line-height:1;cursor:pointer;place-items:center}
.btn{display:inline-block;background:var(--accent-primary);color:var(--bg-canvas);font-family:var(--mono);font-weight:700;letter-spacing:.14em;font-size:.9rem;padding:15px 28px;border-radius:999px;text-decoration:none;transition:transform .5s var(--ease-kinetic),box-shadow .5s var(--ease-kinetic)}
.btn:hover,.btn:focus-visible{transform:translateY(-5px) scale(1.015);box-shadow:var(--shadow-elevation),var(--glow-accent)}
.tlink{position:relative;display:inline-block;color:var(--accent-primary);text-decoration:none;background:none;border:0;font:inherit;cursor:pointer;padding:0 0 3px}
.tlink::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:28%;background:currentColor;transition:width .5s var(--ease-kinetic)}
.tlink:hover::after,.tlink:focus-visible::after{width:100%}
.actions{display:flex;flex-wrap:wrap;gap:22px 28px;align-items:center;margin-top:1.4em}
.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center;padding:56px 0 24px}
.stack{position:relative;width:100%;max-width:520px;aspect-ratio:1/1;justify-self:end}
.stack img{position:absolute;height:auto;object-fit:cover;border-radius:20px;border:4px solid var(--bg-canvas);box-shadow:var(--shadow-elevation);transition:transform .7s var(--ease-kinetic)}
.stack .s1{width:68%;aspect-ratio:4/3;top:0;left:0;z-index:1}
.stack .s2{width:56%;aspect-ratio:1/1;top:20%;right:0;z-index:2}
.stack .s3{width:64%;aspect-ratio:16/9;bottom:6%;left:6%;z-index:3}
.stack:hover .s1{transform:translate(-8px,-8px)}
.stack:hover .s2{transform:translate(8px,-4px)}
.stack:hover .s3{transform:translate(-4px,8px)}
.stack-note{position:absolute;bottom:-4px;right:0;font-family:var(--mono);font-size:.72rem;color:var(--text-muted)}
.page-hero{padding:48px 0 8px}
.banner{width:100%;height:auto;aspect-ratio:21/9;object-fit:cover;border-radius:20px;margin:28px 0 8px}
.path{position:relative;padding-left:68px;margin:40px 0}
.path::before{content:"";position:absolute;left:22px;top:10px;bottom:10px;width:1px;background:var(--accent-primary)}
.step{position:relative;padding:4px 0 60px}
.step:last-child{padding-bottom:8px}
.step-num{position:absolute;left:-68px;top:0;width:45px;height:45px;border:1px solid var(--accent-primary);border-radius:50%;background:var(--bg-canvas);display:grid;place-items:center;font-family:var(--mono);font-size:.85rem;color:var(--accent-primary)}
.rows{list-style:none;border-top:1px solid var(--border-subtle);margin:20px 0}
.rows>li{display:grid;grid-template-columns:44px 1fr;gap:16px;padding:18px 10px;border-bottom:1px solid var(--border-subtle);transition:background .45s var(--ease-kinetic),transform .45s var(--ease-kinetic)}
.rows>li:hover{background:var(--bg-surface);transform:translateX(5px)}
.rows p{margin-bottom:.3em;color:var(--text-muted)}
.ico{width:42px;height:42px;border-radius:50%;border:1px solid var(--border-subtle);display:grid;place-items:center;color:var(--accent-primary);font-size:1.05rem}
details.spoiler{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:20px;margin:12px 0;transition:background .4s var(--ease-kinetic)}
details.spoiler:hover{background:var(--bg-surface-hover)}
details.spoiler summary{cursor:pointer;list-style:none;padding:16px 20px;display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font-weight:600}
details.spoiler summary::-webkit-details-marker{display:none}
details.spoiler summary::after{content:"+";margin-left:auto;font-family:var(--mono);color:var(--accent-primary)}
details.spoiler[open] summary::after{content:"−"}
details.spoiler .body{padding:0 20px 18px}
.tag{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--accent-primary);border-radius:999px;padding:3px 10px}
dl.cast{display:grid;grid-template-columns:minmax(150px,240px) 1fr;border-top:1px solid var(--border-subtle);margin:18px 0}
dl.cast dt,dl.cast dd{padding:13px 0;border-bottom:1px solid var(--border-subtle)}
dl.cast dt{font-family:var(--mono);color:var(--accent-primary);font-size:.92rem;padding-right:14px}
dl.cast dd{color:var(--text-muted)}
table{border-collapse:collapse;width:100%;min-width:460px;margin:12px 0}
th,td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--border-subtle)}
th{font-family:var(--mono);font-size:.8rem;color:var(--accent-primary);font-weight:600}
td.num{font-family:var(--mono)}
.panel{background:var(--bg-surface);border-radius:20px;padding:28px;border:1px solid var(--border-subtle)}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.form-grid .full{grid-column:1/-1}
label{display:block;font-family:var(--mono);font-size:.8rem;color:var(--text-muted);margin-bottom:6px}
input,select,textarea{width:100%;background:var(--bg-canvas);color:var(--text-primary);border:1px solid var(--border-subtle);border-radius:12px;padding:12px;font:inherit}
textarea{min-height:140px;resize:vertical}
pre.preview{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--bg-canvas);border:1px solid var(--border-subtle);border-radius:20px;padding:20px;font-family:var(--mono);font-size:.85rem;margin-top:20px;color:var(--text-primary)}
.status{font-family:var(--mono);font-size:.82rem;color:var(--accent-primary);min-height:1.4em;margin-top:10px}
.site-footer{margin-top:72px;background:var(--bg-surface);border-top:1px solid var(--border-subtle);padding:44px 0 28px}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px}
.site-footer ul{list-style:none}
.site-footer li{margin-bottom:8px}
.site-footer p{color:var(--text-muted);font-size:.95rem}
.foot-domain{font-weight:700;color:var(--text-primary);text-decoration:none;display:inline-block;margin-bottom:10px}
.foot-legal{font-family:var(--mono);font-size:.76rem;color:var(--text-muted);margin-top:28px;border-top:1px solid var(--border-subtle);padding-top:18px}
.js .reveal{opacity:0;transform:translateY(28px)}
.js .reveal.reveal-visible{opacity:1;transform:translateY(0);transition:all .7s var(--ease-kinetic)}
@media (max-width:1024px){.site-nav a{padding:8px 9px;font-size:.86rem}}
@media (max-width:900px){.menu-btn{display:grid}.site-nav{position:absolute;top:calc(100% + 10px);left:0;right:0;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:20px;padding:12px;box-shadow:var(--shadow-elevation);opacity:0;visibility:hidden;transform:translateY(-12px);transition:all .45s var(--ease-kinetic)}.site-nav.open{opacity:1;visibility:visible;transform:none}.site-nav ul{flex-direction:column}.site-nav a{padding:12px 16px;font-size:1rem}}
@media (max-width:768px){.hero{grid-template-columns:1fr;gap:32px;padding-top:36px}.stack{justify-self:center}.banner{aspect-ratio:16/9}}
@media (max-width:480px){.path{padding-left:50px}.path::before{left:16px}.step-num{left:-50px;width:33px;height:33px;font-size:.72rem}dl.cast{grid-template-columns:1fr}dl.cast dt{border-bottom:0;padding-bottom:0}.panel{padding:20px}.brand-text{font-size:.95rem}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.js .reveal{opacity:1;transform:none}html{scroll-behavior:auto}}