@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800&family=IM+Fell+English:ital@0;1&family=Inter:wght@300;400;500;600&display=swap');
:root{
 --site-primary:#a96f43; --site-secondary:#302019; --site-background:#100d0b;
 --site-on-primary:#fff8ed; --site-on-secondary:#f1dfc7; --site-on-background:#eee4d5;
 --site-font-body:"IM Fell English", Georgia, serif; --site-font-heading:"Cinzel", Georgia, serif;
 --site-heading-scale:1; --site-spacing-scale:1; --site-radius-scale:1; --site-decoration-opacity:1;
 --bg:#100d0b; --panel:#19120e; --panel2:#211710; --gold:#d5b276; --copper:#a96f43; --cream:#eee4d5; --muted:#a99a88; --line:#62442f;
}
*{box-sizing:border-box}
body{margin:0;background:var(--site-background);color:var(--site-on-background);font-family:var(--site-font-body);font-size:17px;line-height:1.65}
button,input,textarea,select{font:inherit}
a{color:var(--gold)}
.app{min-height:100vh;background:var(--site-background);color:var(--site-on-background);overflow:hidden}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px clamp(20px,5vw,76px);border-bottom:1px solid var(--line);background:#130e0b}
.brand{font-family:var(--site-font-heading);font-size:16px;letter-spacing:.2em;color:var(--gold)}
.brand small{display:block;font-family:Inter,sans-serif;font-size:9px;letter-spacing:.28em;color:var(--muted);margin-top:4px}
.toplinks{display:flex;gap:22px;flex-wrap:wrap;font:10px Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase}
.toplinks a{text-decoration:none;color:#c5b5a1}
.hero{position:relative;padding:clamp(58px,9vw,120px) 22px 68px;text-align:center;border-bottom:1px solid var(--line);background:radial-gradient(ellipse at 50% 10%,#3b2618 0%,#1b120d 36%,#100d0b 74%)}
.hero:before,.hero:after{content:"✧";position:absolute;top:46px;color:var(--gold);opacity:var(--site-decoration-opacity);font-size:28px}
.hero:before{left:12%}.hero:after{right:12%}
.eyebrow{font:10px Inter,sans-serif;letter-spacing:.35em;text-transform:uppercase;color:var(--copper)}
h1,h2,h3,h4{font-family:var(--site-font-heading);font-weight:500;line-height:1.2;color:var(--gold)}
h1{font-size:clamp(36px,6.5vw,76px);letter-spacing:.08em;margin:15px 0 10px}
.hero p{max-width:620px;margin:15px auto;color:#c7b9a7;font-size:18px}
.ornament{display:flex;align-items:center;justify-content:center;gap:14px;color:var(--copper);font-size:18px;margin:20px auto}
.ornament:before,.ornament:after{content:"";height:1px;width:70px;background:linear-gradient(90deg,transparent,var(--copper))}
.ornament:after{transform:rotate(180deg)}
.hero-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:28px}
.layout{display:grid;grid-template-columns:220px minmax(0,1fr);max-width:1400px;margin:auto}
.sidebar{padding:35px 22px 60px clamp(18px,4vw,50px);border-right:1px solid #3d2a1d}
.sidebar .label{font:9px Inter,sans-serif;color:var(--copper);letter-spacing:.2em;text-transform:uppercase;margin:0 0 14px}
.sidebar a{display:block;text-decoration:none;color:#b7a895;font-size:15px;padding:7px 0;border-bottom:1px solid #2a1d15}
.sidebar a:hover{color:var(--gold);padding-left:5px}
main{min-width:0;padding:35px clamp(20px,4vw,58px) 80px}
.section{margin-bottom:54px;scroll-margin-top:20px}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:16px;border-bottom:1px solid var(--line);padding-bottom:13px;margin-bottom:22px}
.section-head h2{font-size:calc(22px * var(--site-heading-scale));margin:0}
.section-head p{font:10px Inter,sans-serif;color:var(--muted);margin:0;letter-spacing:.1em}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.demo{background:var(--panel);border:1px solid #493222;padding:20px;position:relative;min-width:0}
.demo:before{content:"";position:absolute;inset:4px;border:1px solid #39271b;pointer-events:none;opacity:var(--site-decoration-opacity)}
.demo-title{font:10px Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#b99b77;margin:0 0 16px}
.code{display:block;margin-top:17px;padding:10px 12px;background:#0c0908;border:1px solid #35251a;color:#c9a777;font:11px ui-monospace,SFMono-Regular,monospace;overflow-wrap:anywhere;white-space:pre-wrap}
.preview-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;position:relative;z-index:1}
.vic-btn{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:10px 16px;color:var(--cream);background:#25180f;border:1px solid var(--copper);font-family:var(--site-font-heading);font-size:11px;letter-spacing:.08em;position:relative;transition:all .25s ease;text-decoration:none}
.vic-btn:hover{color:#120d09;background:var(--gold);border-color:var(--gold);box-shadow:0 0 20px #d5b27625;transform:translateY(-2px)}
.vic-btn:focus-visible,.vic-input:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.vic-btn-epic{background:linear-gradient(135deg,#55331d,#24150e 60%,#3c2416);border:1px solid var(--gold);box-shadow:inset 0 0 0 2px #d5b27612,0 5px 18px #0006;color:#f2d8a5}
.vic-btn-epic:before{content:"✦";color:var(--gold)}
.vic-btn-ghost{background:transparent;border-color:#654832;color:#c7b7a4}
.vic-btn-copper{background:linear-gradient(#a96f43,#744629);color:#fff2df;border-color:#d09a65}
.vic-btn:active{transform:translateY(0) scale(.98)}
.vic-div{position:relative;padding:24px;background:linear-gradient(145deg,#211710,#140f0c);border:1px solid var(--copper);box-shadow:0 12px 28px #0005,inset 0 0 0 4px #b27a4310}
.vic-div:before{content:"";position:absolute;inset:5px;border:1px solid #5b3c27;pointer-events:none}
.vic-div-ornate{border:1px solid var(--gold);background:linear-gradient(145deg,#302015,#130e0b);box-shadow:0 0 0 4px #d5b2760b,0 12px 28px #0006}
.vic-div-ornate:after{content:"✧  ❖  ✧";display:block;text-align:center;color:var(--copper);font-size:13px;letter-spacing:.5em;margin-top:12px;opacity:var(--site-decoration-opacity)}
.vic-card{background:#19120e;border:1px solid #60432d;box-shadow:0 12px 26px #0006;transition:transform .3s,border-color .3s;overflow:hidden}
.vic-card:hover{transform:translateY(-4px);border-color:var(--gold)}
.vic-card-top{padding:22px;background:linear-gradient(130deg,#392518,#1b120d);border-bottom:1px solid #60432d}
.vic-card-top .sigil{float:right;color:var(--gold);font-size:25px}
.vic-card-body{padding:18px 22px 22px}
.vic-card h3{font-size:19px;margin:0 0 8px}
.vic-card p{color:#b9a995;margin:0 0 16px;font-size:15px}
.vic-title{font-family:var(--site-font-heading);font-weight:500;letter-spacing:.08em;color:var(--gold);line-height:1.3}
h2.vic-title{font-size:27px;margin:0 0 10px}
h3.vic-title{font-size:19px;margin:0 0 8px}
.vic-lead{font-size:20px;color:#e1d0b8;font-style:italic}
.vic-muted{color:#a99a88}
.vic-rule{height:1px;border:0;background:linear-gradient(90deg,transparent,var(--copper),var(--gold),var(--copper),transparent);margin:20px 0}
.vic-badge{display:inline-block;padding:4px 9px;border:1px solid #88603e;color:#e0bc84;font:9px Inter,sans-serif;text-transform:uppercase;letter-spacing:.14em;background:#271a12}
.vic-badge-gold{border-color:var(--gold);color:var(--gold);background:#d5b2760d}
.vic-badge-copper{border-color:var(--copper);color:#d79a68}
.vic-input{width:100%;background:#0e0b09;border:1px solid #67452e;padding:11px 13px;color:#f1e2cf;font:15px var(--site-font-body);outline:none;transition:border .2s,box-shadow .2s}
.vic-input:focus{border-color:var(--gold);box-shadow:0 0 0 3px #d5b27612}
.vic-input::placeholder{color:#857565}
.vic-label{display:block;font:10px Inter,sans-serif;letter-spacing:.13em;text-transform:uppercase;color:#c5a477;margin-bottom:7px}
.vic-alert{padding:13px 16px;border-left:2px solid var(--gold);background:#d5b2760c;color:#e3d1b8}
.vic-alert-copper{border-color:var(--copper);background:#a96f4312}
.vic-list{list-style:none;margin:0;padding:0}
.vic-list li{padding:9px 0;border-bottom:1px solid #39271b;color:#c9b9a5}
.vic-list li:before{content:"✧";color:var(--copper);margin-right:10px}
.vic-glow{animation:vic-glow 3.5s ease-in-out infinite}
.vic-float{animation:vic-float 5s ease-in-out infinite}
@keyframes vic-glow{0%,100%{text-shadow:0 0 3px #d5b27620}50%{text-shadow:0 0 16px #d5b27680}}
@keyframes vic-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.vic-reveal{animation:vic-reveal .65s ease both}
@keyframes vic-reveal{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.palette{display:flex;gap:8px;flex-wrap:wrap}
.swatch{flex:1;min-width:85px}
.swatch-color{height:46px;border:1px solid #60432d;margin-bottom:7px}
.swatch small{font:10px Inter,sans-serif;color:#b9a995}
.footer{border-top:1px solid var(--line);padding:28px;text-align:center;color:#827362;font:9px Inter,sans-serif;letter-spacing:.2em}
@media(max-width:760px){.layout{grid-template-columns:1fr}.sidebar{display:none}main{padding:28px 17px 55px}.grid{grid-template-columns:1fr}.toplinks{gap:12px}.topbar{padding:16px 20px}.hero:before{left:5%}.hero:after{right:5%}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}