@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Prata&display=swap');
:root{--ink:#382c25;--muted:#93816e;--wine:#883e32;--paper:#f5eee2;--line:#97744c30;--cream:#fffaf2;--wood:#6d4935}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(ellipse at 8% 0,#fffcf6,transparent 42%),#f5eee2;color:var(--ink);font:15px/1.7 Manrope,Arial,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}:focus-visible{outline:2px solid var(--wine);outline-offset:5px}
.top{height:78px;display:flex;align-items:center;border-bottom:1px solid var(--line);background:#fffaf05c;backdrop-filter:blur(16px);position:sticky;top:0;z-index:20}
.wrap{width:min(1180px,calc(100% - 48px));margin:auto}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:.08em}
.brand svg{width:26px;height:26px;color:var(--wine)}
.brand small{display:block;font:500 9px Manrope,sans-serif;letter-spacing:.18em;color:#a5805d;margin-top:-2px}
.nav-links{display:flex;gap:22px;font-size:12px;color:var(--muted)}
.nav-links a.active,.nav-links a:hover{color:var(--wine)}
.cta{border:1px solid #d7c3a6;border-radius:30px;padding:9px 16px;font-size:11px}
.cta.solid{background:linear-gradient(125deg,#934d37,#773a30);color:#fff2df;border-color:#934d37}
.header-back-link{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 15px;border:1px solid rgba(143,77,56,.56);border-radius:999px;background:rgba(255,250,242,.65);color:#7f4434;font-size:13px;font-weight:700;line-height:1;text-decoration:none;white-space:nowrap;transition:background-color 180ms ease,color 180ms ease,border-color 180ms ease,transform 180ms ease}
.header-back-link:hover{border-color:#914a37;background:#914a37;color:#fffaf4;transform:translateY(-1px)}
.header-back-link:focus-visible{outline:2px solid #914a37;outline-offset:3px}
.hero-mini{padding:54px 0 18px}
.eyebrow{display:flex;align-items:center;gap:10px;font-size:9px;letter-spacing:.2em;font-weight:700;color:#a27750;text-transform:uppercase}
.eyebrow:before{content:'';width:22px;height:1px;background:#a27750}
h1{font:400 clamp(36px,5vw,58px)/1.12 Prata,Georgia,serif;letter-spacing:-.04em;margin:14px 0 12px}
h1 em{font-style:normal;color:var(--wine)}
.lead{max-width:540px;color:var(--muted);font-size:14px}
.layout{display:grid;grid-template-columns:340px 1fr;gap:28px;align-items:start;padding-bottom:70px}
.panel,.glass{background:linear-gradient(145deg,#fffdf8ed,#f4ecdfaa);border:1px solid #e4d3b8;border-radius:22px;box-shadow:0 16px 40px #69461e0a}
.list{padding:10px}
.piece-btn{width:100%;display:flex;gap:14px;align-items:center;text-align:left;background:transparent;border:0;border-radius:16px;padding:12px 14px;color:var(--ink)}
.piece-btn:hover,.piece-btn.active{background:#f3e6d3}
.glyph{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#f7efe3;border:1px solid #e2cfb4;color:#5b4030;flex-shrink:0}
.glyph.red{background:#7a2f2f;color:#efd7b4;border-color:#934444}
.glyph svg{width:22px;height:22px}
.piece-btn b{display:block;font-size:14px}
.piece-btn span{font-size:11px;color:var(--muted)}
.stage-wrap{min-height:560px;padding:18px;display:grid;grid-template-rows:1fr auto}
#boardMount{height:390px;min-height:390px;width:100%;border-radius:18px;background:radial-gradient(ellipse at 50% 30%,#fffdf8,#ead9c0);overflow:hidden;position:relative}
#boardMount canvas{display:block;width:100%!important;height:100%!important}
.caption{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding:18px 8px 6px}
.caption h2{font:22px/1.3 Prata,Georgia,serif;margin:0 0 8px}
.caption p{margin:0;color:var(--muted);font-size:13px;max-width:520px}
.tools{display:flex;gap:8px;flex-wrap:wrap}
.tools button,.step-btn{border:1px solid #d8c5ae;background:#fffaf2;border-radius:12px;padding:9px 13px;font-size:12px;color:#754b34}
.tools button:hover,.step-btn:hover{background:#eedbc2}
.note{font-size:11px;color:#a08a74;padding:4px 8px 16px}
.lessons{display:flex;flex-direction:column;gap:8px;padding:14px}
.lesson{width:100%;text-align:left;border:1px solid transparent;background:transparent;border-radius:16px;padding:16px;min-height:74px;display:flex;flex-direction:column;justify-content:center}
.lesson.active,.lesson:hover{background:#f3e6d3;border-color:#e4d0b4}
.lesson small{display:block;font-size:9px;letter-spacing:.14em;color:#a27750;margin-bottom:8px}
.lesson b{display:block;font-size:14px}
.lesson span{font-size:12px;color:var(--muted)}
.grid-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:18px}
.card{padding:20px 22px}
.card h3{font:20px/1.35 Prata,Georgia,serif;margin:8px 0}
.card p,.card li{font-size:13px;color:#6d5646}
.card ol,.card ul{padding-left:18px}
.promo{width:100%;border-collapse:collapse;font-size:12px;margin-top:8px}
.promo th,.promo td{border-bottom:1px solid #eadbc7;padding:8px 6px;text-align:left}
.footer{border-top:1px solid var(--line);padding:22px 0 36px;display:flex;justify-content:space-between;gap:16px;color:#998776;font-size:11px}
.warn{font-size:11px;color:#a27750;background:#f6ead8;border-radius:12px;padding:10px 14px;margin:10px 0}
.mobile-section-nav{display:none}
@media(max-width:900px){.layout{grid-template-columns:1fr}.nav-links{display:none}.stage-wrap{min-height:auto}#boardMount{height:320px;min-height:320px}.grid-cards{grid-template-columns:1fr}h1{font-size:40px}.wrap{width:calc(100% - 32px)}.nav{gap:12px}.brand{min-width:0}.brand span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header-back-link{flex:0 0 auto;min-height:40px;padding:0 14px;font-size:12px;gap:6px}
.mobile-section-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:12px 16px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fffaf0f0;backdrop-filter:blur(16px);position:sticky;top:78px;z-index:19}
.mobile-section-link{display:flex;min-width:0;min-height:38px;align-items:center;justify-content:center;padding:8px 6px;border:1px solid #d7c3a6;border-radius:999px;color:#6f5a4b;background:transparent;text-decoration:none;font-size:11px;font-weight:700;line-height:1.1;text-align:center;white-space:nowrap}
.mobile-section-link.is-active{border-color:#934d37;color:#fff2df;background:linear-gradient(125deg,#934d37,#773a30);box-shadow:0 4px 12px #80462d29}
.mobile-section-link:focus-visible{outline:2px solid var(--wine);outline-offset:2px}}
@media(max-width:360px){.mobile-section-link{font-size:10px;padding:8px 4px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}