:root{--bg:#fff6dc;--surface:#fffdf5;--surface-soft:#ffefbd;--text:#39332c;--text-muted:#756c61;--border:#e7d8b8;--accent:#e97991;--accent-hover:#d8607c;--shadow:0 14px 30px #7d5b421c;color:var(--text);font-family:Georgia,Times New Roman,serif}html,body{width:100%;min-height:100vh;margin:0}body{background-color:var(--bg);color:var(--text);font:16px/1.5 var(--font-body);-webkit-font-smoothing:antialiased}#app{min-height:100vh}:root{--font-body:"Avenir Next", Avenir, Helvetica, Arial, sans-serif;--font-display:Georgia, "Times New Roman", serif}h2{font-family:var(--font-display);margin:0;font-size:1.45rem;font-weight:500}.page{max-width:1060px;margin:0 auto;padding:24px 28px 64px}.site-nav{justify-content:space-between;align-items:center;margin-bottom:42px;display:flex}.brand-lockup{color:var(--text);align-items:center;gap:10px;font-size:.98rem;font-weight:700;text-decoration:none;display:inline-flex}.brand-cube-mark{fill:none;height:34px;stroke:var(--accent);stroke-linecap:round;stroke-linejoin:round;stroke-width:3.5px;flex:none;width:34px;display:block}.nav-intro-button{border:1px solid var(--border);color:var(--text);cursor:pointer;font:inherit;background:0 0;border-radius:999px;padding:10px 18px;font-size:.9rem;font-weight:700;transition:background .2s,border-color .2s,color .2s}.nav-intro-button:hover{background:var(--surface);border-color:var(--accent);color:var(--accent-hover)}.intro{text-align:center;margin-bottom:36px}.eyebrow,.preview-label{color:var(--accent);letter-spacing:.14em;text-transform:uppercase;font-size:.72rem;font-weight:700}.eyebrow{margin:0 0 12px}h1{color:var(--text);font-family:var(--font-display);margin:0;font-size:clamp(2.5rem,6vw,4.5rem);font-weight:500;line-height:1}.subtitle{color:var(--text-muted);margin:18px 0 0;font-size:1.08rem}.controls{background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);text-align:center;border-radius:18px;padding:34px}.section-heading h2{margin-top:4px}.selector{justify-content:center;gap:10px;max-width:600px;margin:24px auto 32px;display:flex}.selector button{border:1px solid var(--border);color:var(--text-muted);cursor:pointer;font:inherit;background:0 0;border-radius:10px;flex:1;padding:14px 18px;font-weight:700;transition:background-color .2s,border-color .2s,color .2s}.selector button:hover{border-color:var(--accent);color:var(--accent-hover)}.selector button.active{background:var(--accent);border-color:var(--accent);color:var(--surface)}button:focus-visible{outline-offset:3px;outline:3px solid #8c735559}.layout-preview{background:var(--surface-soft);border-radius:12px;flex-direction:column;min-width:220px;padding:16px 28px 22px;display:inline-flex}.preview-label{margin-bottom:16px}.cube-layout{flex-direction:column;justify-content:center;align-items:center;gap:6px;min-height:108px;display:flex}.cube-row{gap:6px;display:flex}.preview-cube{background:var(--accent);border:1px solid var(--accent-hover);border-radius:5px;width:clamp(26px,6vw,38px);height:clamp(26px,6vw,38px);display:block}.generate{background:var(--text);color:var(--surface);cursor:pointer;font:inherit;border:0;border-radius:10px;margin:32px auto 0;padding:16px 34px;font-weight:700;transition:background-color .2s,transform .2s;display:block}.generate:hover{background:var(--accent-hover);transform:translateY(-1px)}.views{border-top:1px solid var(--border);margin-top:68px;padding-top:32px;scroll-margin-top:28px}.views-heading{margin-bottom:24px}.view-grid{grid-template-columns:repeat(3,1fr);gap:18px;display:grid}.view{background:var(--surface);border:1px solid var(--border);border-radius:14px;min-height:230px;padding:22px}.view h3{font-family:var(--font-display);margin:0;font-size:1.35rem;font-weight:500}.view-description{color:var(--text-muted);min-height:2.8em;margin:8px 0 0;font-size:.78rem;line-height:1.4}.projection-stage{justify-content:center;align-items:center;min-height:175px;display:flex;overflow:auto}.projection{flex:none;position:relative}.projection-cell{position:absolute;overflow:hidden}.projection-cell img{max-width:none;display:block;position:absolute}.view-placeholder{color:var(--text-muted);justify-content:center;align-items:center;min-height:175px;font-size:.9rem;display:flex}.instruction{color:var(--text-muted);text-align:center;max-width:600px;margin:30px auto 0;font-size:.92rem}.brand-splash{background:var(--bg);z-index:1000;justify-content:center;align-items:center;animation:1.9s forwards splash-exit;display:flex;position:fixed;inset:0}.brand-splash-content{flex-direction:column;align-items:center;gap:18px;display:flex}.brand-cube-mark--splash{stroke-width:2.4px;width:88px;height:88px}.cube-outline{stroke-dasharray:260;stroke-dashoffset:260px;animation:1s cubic-bezier(.65,0,.35,1) forwards draw-cube}.brand-splash-title{color:var(--text);letter-spacing:.2em;opacity:0;margin:0;font-size:clamp(.95rem,3vw,1.2rem);font-weight:800;animation:.48s 1s both splash-title-in}.modal-backdrop{z-index:900;background:#39332c6b;justify-content:center;align-items:center;padding:24px;animation:.18s both backdrop-in;display:flex;position:fixed;inset:0;overflow-y:auto}.game-modal{background:var(--surface);border:1px solid var(--border);border-radius:24px;width:100%;max-width:620px;margin:auto;padding:38px;animation:.24s cubic-bezier(.2,.8,.2,1) both modal-in;position:relative;box-shadow:0 28px 90px #39332c38}.modal-close{background:var(--surface-soft);color:var(--text);cursor:pointer;font:inherit;border:0;border-radius:50%;justify-content:center;align-items:center;width:38px;height:38px;font-size:1.65rem;line-height:1;transition:background .2s,color .2s;display:flex;position:absolute;top:20px;right:20px}.modal-close:hover{background:var(--accent);color:#fff}.game-modal>.eyebrow{margin-bottom:8px}.game-modal h2{color:var(--text);margin:0 42px 14px 0;font-size:clamp(1.85rem,5vw,2.4rem)}.modal-lead{color:var(--text);max-width:510px;margin:0 0 10px;font-size:1rem;font-weight:700;line-height:1.55}.modal-body{color:var(--text-muted);margin:0;font-size:.94rem;line-height:1.6}.mode-cards{grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px;display:grid}.mode-card{background:var(--surface-soft);border:1px solid #e7d8b8cc;border-radius:14px;min-width:0;padding:15px 12px}.mode-icon{background:var(--surface);color:var(--accent-hover);border-radius:50%;justify-content:center;align-items:center;width:30px;height:30px;margin-bottom:10px;font-size:1rem;display:flex}.mode-card h3{color:var(--accent-hover);letter-spacing:.12em;margin:0 0 5px;font-size:.72rem}.mode-card p{color:var(--text-muted);margin:0;font-size:.78rem;line-height:1.4}.modal-footer{border-top:1px solid var(--border);color:var(--text);font-family:var(--font-display);margin:24px 0 0;padding-top:18px;font-size:.98rem;line-height:1.5}@keyframes draw-cube{to{stroke-dashoffset:0}}@keyframes splash-title-in{0%{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}@keyframes splash-exit{0%,78%{opacity:1;visibility:visible}to{opacity:0;visibility:hidden}}@keyframes backdrop-in{0%{opacity:0}to{opacity:1}}@keyframes modal-in{0%{opacity:0;transform:translateY(12px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}@media (width<=640px){.page{padding:16px 16px 48px}.site-nav{margin-bottom:34px}.brand-lockup{gap:7px;font-size:.88rem}.brand-cube-mark{width:29px;height:29px}.intro{margin-bottom:30px}.controls{padding:26px 16px}.selector{gap:6px}.selector button{padding:12px 6px}.view-grid{grid-template-columns:1fr}.view{min-height:180px}.view-placeholder{min-height:120px}.modal-backdrop{align-items:flex-start;padding:14px}.game-modal{border-radius:20px;margin:auto 0;padding:30px 20px 24px}.modal-close{top:14px;right:14px}.mode-cards{gap:7px;margin-top:18px}.mode-card{padding:12px 8px}.mode-card p{font-size:.7rem}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}