:root { --bg:#10100f; --panel:#1a1916; --panel2:#24211c; --text:#f5efe5; --muted:#9f978a; --line:#3a342b; --accent:#f3a33b; --accent2:#d96f27; --green:#b6d29c; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:var(--bg); color:var(--text); font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
body { min-height:100svh; background:radial-gradient(circle at 75% 5%,#2c2112 0,transparent 35rem),var(--bg); }
button,input { font:inherit; } button { border:0; color:inherit; cursor:pointer; } button:focus-visible,input:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.app-shell { max-width:960px; min-height:100svh; margin:auto; padding:0 28px 34px; }
.topbar { height:88px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #302b24; }
.brand { background:none; border:0; padding:0; font-weight:800; letter-spacing:-.04em; font-size:1.2rem; display:flex; align-items:center; gap:10px; }.brand-mark { color:var(--accent); font-size:1.5rem; }.measure-pill,.eyebrow,.tool-kicker { font:500 .68rem ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.14em; color:var(--accent); }.measure-pill { border:1px solid #5d492d; border-radius:99px; padding:9px 13px; font-size:.6rem; }.icon-button { background:none; font-size:1.6rem; color:var(--muted); padding:6px 14px 6px 0; }
.view { padding-top:72px; }.hero-copy { max-width:680px; }.hero-copy h1,.section-heading h1 { margin:13px 0 20px; font-size:clamp(2.7rem,7vw,5.4rem); line-height:.98; letter-spacing:-.075em; }.hero-copy h1 em { color:var(--accent); font-style:normal; }.intro,.section-heading p { max-width:510px; color:var(--muted); line-height:1.65; font-size:1rem; }
.mode-cards { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:58px; }.mode-card,.utility-card,.tool-card { background:var(--panel); border:1px solid var(--line); border-radius:19px; text-align:left; transition:.2s ease; }.mode-card { min-height:148px; padding:24px; display:grid; grid-template-columns:auto 1fr auto; gap:17px; align-items:start; }.mode-card:hover,.utility-card:hover,.tool-card:hover { transform:translateY(-2px); border-color:#6e5736; }.mode-card.featured { background:linear-gradient(135deg,#382617,#211b15); border-color:#76542b; }.card-icon { color:var(--accent); font-size:1.8rem; }.mode-card strong,.utility-card strong { display:block; font-size:1.08rem; }.mode-card small,.utility-card small { display:block; color:var(--muted); line-height:1.5; margin-top:7px; }.arrow { color:var(--accent); font-size:1.2rem; }.home-lower { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px; }.utility-card { padding:20px; display:grid; grid-template-columns:auto 1fr; gap:12px; }.utility-card span { color:var(--accent); font-family:'DM Mono'; font-size:1.2rem; }.safety-note { color:#746c61; font: .68rem 'DM Mono'; letter-spacing:.05em; margin-top:34px; }
.light-stage { position:fixed; inset:0; overflow:hidden; background:#050505; touch-action:none; }.light-stage.active { cursor:grab; }.light-stage:active { cursor:grabbing; }.ambient-glow { position:absolute; inset:-20%; background:radial-gradient(circle,#4b2b14 0,transparent 32%); opacity:.3; filter:blur(50px); }.light-orb { position:absolute; left:50%; top:50%; width:540px; height:540px; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle at 38% 36%,#fff7d0 0%,#ffcb62 27%,#d86825 64%,transparent 72%); filter:blur(1px); opacity:.9; mix-blend-mode:screen; box-shadow:0 0 90px #e78e3e88; transition:width .15s,height .15s; }.stage-label { position:fixed; top:29px; left:50%; transform:translateX(-50%); color:#ffffff88; font:500 .62rem 'DM Mono'; letter-spacing:.15em; pointer-events:none; }.stage-exit { position:fixed; right:25px; top:19px; background:#ffffff14; border-radius:50%; width:42px; height:42px; font-size:1.5rem; color:#ffffffaa; }.light-panel { position:fixed; z-index:2; bottom:0; left:50%; width:min(690px,calc(100% - 28px)); transform:translateX(-50%); background:#181715ee; backdrop-filter:blur(18px); border:1px solid #ffffff1a; border-bottom:0; border-radius:24px 24px 0 0; padding:13px 24px 23px; max-height:70svh; overflow:auto; transition:transform .3s ease; }.light-panel.collapsed { transform:translate(-50%,calc(100% - 72px)); }.panel-handle { margin:0 auto 19px; width:43px; height:4px; border-radius:10px; background:#ffffff40; }.panel-heading { display:flex; justify-content:space-between; align-items:center; }.panel-heading h2 { margin:7px 0 18px; font-size:1.55rem; letter-spacing:-.04em; }.round-button { width:42px; height:42px; border-radius:50%; background:#ffffff0d; border:1px solid var(--line); font-size:1.4rem; }.round-button.saved { color:var(--accent); }.swatches { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:20px; }.swatch { width:38px; height:38px; border-radius:50%; border:3px solid transparent; box-shadow:inset 0 0 0 1px #ffffff66; }.swatch.active { border-color:var(--text); transform:scale(1.12); }.control-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }.range-control span { display:flex; justify-content:space-between; color:var(--muted); font-size:.72rem; margin-bottom:8px; }.range-control output { color:var(--text); font-family:'DM Mono'; }.range-control input { width:100%; accent-color:var(--accent); }.action-row { display:flex; gap:10px; margin-top:24px; }.primary-button,.ghost-button,.text-button,.timer-menu button,.seg { min-height:45px; border-radius:12px; padding:0 17px; }.primary-button { background:var(--accent); color:#22170e; font-weight:800; }.ghost-button { background:#ffffff0d; border:1px solid var(--line); color:var(--text); }.action-row .primary-button { flex:1; }.secondary-actions { display:flex; justify-content:space-between; gap:10px; margin-top:14px; }.text-button { background:none; padding:0; min-height:30px; font-size:.73rem; color:var(--muted); }.favorite-list { margin-top:14px; display:flex; flex-wrap:wrap; gap:8px; }.favorite-chip { border:1px solid var(--line); background:none; border-radius:99px; padding:8px 11px; color:var(--muted); font-size:.72rem; }.timer-menu { position:fixed; z-index:4; bottom:140px; left:50%; transform:translateX(-50%); display:grid; padding:8px; width:220px; background:#27231e; border:1px solid var(--line); border-radius:15px; box-shadow:0 16px 50px #0009; }.timer-menu button { text-align:left; background:none; }.timer-menu button:hover { background:#ffffff10; }.subview { max-width:650px; margin:auto; }.subview .section-heading { margin-bottom:42px; }.section-heading h1 { font-size:clamp(2.8rem,8vw,4.3rem); }.counter-total { display:flex; align-items:baseline; gap:12px; border-bottom:1px solid var(--line); padding-bottom:24px; }.counter-total strong { font-size:5rem; line-height:1; color:var(--accent); letter-spacing:-.08em; }.counter-total span { color:var(--muted); }.counter-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:24px 0; }.counter-button { background:var(--panel); border:1px solid var(--line); border-radius:15px; padding:16px 8px; }.counter-button .count-icon { display:block; color:var(--accent); font-size:1.2rem; margin-bottom:8px; }.counter-button strong { display:block; font-size:1.5rem; }.counter-button small { color:var(--muted); font-size:.65rem; }.tally-card,.tool-card { padding:20px; margin-bottom:14px; }.tally-card>span { color:var(--muted); font-size:.75rem; }.tally-marks { color:var(--accent); font:1.1rem 'DM Mono'; letter-spacing:2px; word-break:break-all; margin-top:14px; min-height:28px; }.full { width:100%; }.tool-card { display:flex; align-items:center; justify-content:space-between; gap:20px; }.tool-card h2 { margin:8px 0 0; font-size:1.7rem; }.dice-actions { display:flex; gap:7px; align-items:center; }.seg { min-width:40px; padding:0; background:#ffffff0d; }.seg.active { background:var(--accent); color:#22170e; }.starter-tool { display:block; }.starter-tool input { display:block; width:100%; border:1px solid var(--line); background:#ffffff08; color:var(--text); padding:13px; border-radius:10px; margin:14px 0; }.starter-tool h2 { color:var(--accent); font-size:1.25rem; margin-bottom:17px; }.toast { position:fixed; z-index:10; bottom:20px; left:50%; transform:translate(-50%,20px); opacity:0; pointer-events:none; background:var(--text); color:#21170e; padding:11px 16px; border-radius:99px; font-size:.78rem; transition:.25s; }.toast.show { opacity:1; transform:translate(-50%,0); }
@media (max-width:620px) { .app-shell { padding:0 18px 28px; }.topbar { height:72px; }.view { padding-top:53px; }.mode-cards,.home-lower { grid-template-columns:1fr; }.mode-card { min-height:118px; }.control-grid { grid-template-columns:1fr; gap:8px; }.light-panel { padding:10px 18px 20px; }.counter-grid { grid-template-columns:repeat(2,1fr); }.tool-card { align-items:flex-start; flex-direction:column; }.dice-actions { width:100%; }.dice-actions .primary-button { flex:1; }.light-orb { width:70vw; height:70vw; max-width:540px; max-height:540px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }

[hidden] { display:none !important; }
.dice-tool h2,.coin-tool h2,.starter-tool h2 { min-width:150px; transform-origin:center; }
.dice-tool h2.dice-rolling { animation:diceJolt .11s ease-in-out infinite alternate; color:var(--accent); }
.coin-tool h2.coin-flipping { animation:coinFlip 1s cubic-bezier(.2,.8,.2,1) both; }
.starter-tool h2.starter-rolling { animation:nameBounce .13s ease-in-out infinite alternate; }
@keyframes diceJolt { from { transform:translateY(-2px) rotate(-2deg); } to { transform:translateY(2px) rotate(2deg); } }
@keyframes coinFlip { 0% { transform:perspective(280px) rotateX(0); } 48% { transform:perspective(280px) rotateX(90deg); } 52% { transform:perspective(280px) rotateX(90deg); } 100% { transform:perspective(280px) rotateX(360deg); } }
@keyframes nameBounce { from { transform:translateY(-14px); } to { transform:translateY(14px); } }
@media (max-width:620px) { .hardware-card { grid-template-columns:1fr; } .hardware-copy { padding:4px; } }

/* Safety intro and desktop-friendly hardware information */
[hidden] { display:none !important; }
.hardware-card { display:grid; grid-template-columns:minmax(220px,.9fr) 1.1fr; gap:22px; margin-top:42px; padding:14px; background:var(--panel); border:1px solid var(--line); border-radius:20px; }
.hardware-visual { overflow:hidden; border-radius:13px; background:#211b15; }
.hardware-visual img { display:block; width:100%; height:100%; object-fit:cover; }
.usage-gallery { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:8px; align-content:start; }
.usage-gallery figure { margin:0; min-width:0; }
.usage-gallery img { aspect-ratio:1 / 1; border-radius:9px; object-fit:cover; }
.usage-gallery figcaption { padding:8px 3px 2px; color:var(--muted); font-size:.64rem; line-height:1.35; }
.hardware-copy { padding:10px 10px 10px 0; }
.hardware-copy h2 { margin:7px 0 11px; font-size:1.45rem; }
.hardware-copy p { color:var(--muted); font-size:.84rem; line-height:1.6; }
.hardware-warning { border-left:2px solid var(--accent); padding-left:12px; }
.hardware-warning strong,.liability-card strong { color:var(--text); }
.hardware-links { display:flex; gap:9px; flex-wrap:wrap; margin-top:17px; }
.hardware-links a { color:#1c150d; background:var(--accent); border-radius:8px; padding:9px 11px; font-size:.7rem; font-weight:800; text-decoration:none; }
.download-intro { margin:18px 0 9px !important; color:var(--text) !important; }
.download-hint { margin:9px 0 0 !important; font-size:.68rem !important; color:#8f8375 !important; }
.hardware-links a { display:flex; align-items:center; gap:8px; }
.hardware-links a b { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.62rem; letter-spacing:.06em; }
.liability-card { margin-top:14px; padding:17px 19px; background:#261b15; border:1px solid #593a28; border-radius:15px; color:#c1ab94; font-size:.72rem; line-height:1.55; }
.liability-card p { margin:9px 0 0; }
.understood-button { width:100%; min-height:58px; margin-top:18px; font-size:.93rem; display:flex; align-items:center; justify-content:space-between; padding:0 20px; }
.understood-button span { font-size:1.3rem; }
.lamp-intro { max-width:650px; }
.demo-video-card { display:grid; grid-template-columns:1fr 1.35fr; gap:20px; align-items:center; margin-top:14px; padding:18px; background:var(--panel); border:1px solid var(--line); border-radius:20px; }
.demo-video-card h2 { margin:7px 0 10px; font-size:1.3rem; }
.demo-video-card p:not(.eyebrow) { color:var(--muted); font-size:.8rem; line-height:1.55; }
.demo-video-card video { display:block; width:100%; max-height:270px; object-fit:cover; border-radius:12px; background:#080706; }
.teaser-card .hardware-copy { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.teaser-card .hardware-copy p:not(.eyebrow) { max-width:430px; }
.teaser-card .primary-button { margin-top:8px; }
.teaser-card .primary-button span { margin-left:18px; }
.hardware-page .section-heading { max-width:690px; }
.hardware-page .section-heading h1 { margin-bottom:17px; }
.design-gallery,.usage-gallery-page { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:35px; }
.design-gallery figure,.usage-gallery-page figure { margin:0; overflow:hidden; background:var(--panel); border:1px solid var(--line); border-radius:17px; }
.design-gallery img,.usage-gallery-page img { display:block; width:100%; aspect-ratio:1.35 / 1; object-fit:cover; }
.design-gallery figcaption,.usage-gallery-page figcaption { display:flex; flex-direction:column; gap:6px; padding:15px 16px 17px; }.design-gallery figcaption strong,.usage-gallery-page figcaption strong { font-size:.85rem; }.design-gallery figcaption span,.usage-gallery-page figcaption span { color:var(--muted); font-size:.72rem; line-height:1.45; }
.hardware-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:14px; }.hardware-steps>div { padding:20px; background:var(--panel); border:1px solid var(--line); border-radius:17px; }.hardware-steps span { color:var(--accent); font:500 .7rem ui-monospace,SFMono-Regular,Menlo,monospace; }.hardware-steps h2 { margin:14px 0 8px; font-size:1.1rem; }.hardware-steps p { color:var(--muted); font-size:.78rem; line-height:1.6; }.hardware-steps strong { color:var(--text); }.page-downloads { margin-top:28px; padding:20px; background:#261b15; border:1px solid #593a28; border-radius:17px; }.page-downloads .download-intro { margin-top:0 !important; }.usage-gallery-page { margin-top:28px; }.usage-gallery-page img { aspect-ratio:1.3 / 1; }.hardware-page>.liability-card { margin-top:14px; margin-bottom:30px; }
@media (max-width:620px) { .design-gallery,.usage-gallery-page,.hardware-steps { grid-template-columns:1fr; } .design-gallery img,.usage-gallery-page img { aspect-ratio:1.35 / 1; } }
.light-orb { max-width:8cm; max-height:8cm; }
.stage-label { cursor:pointer; pointer-events:auto; }
.light-orb.moving { animation:lightDrift var(--motion-duration,10s) ease-in-out infinite alternate; }
.round-button.locked { color:var(--accent); border-color:var(--accent); }
@keyframes lightDrift { 0% { transform:translate(-50%,-50%) scale(.96) rotate(-1deg); filter:blur(1px) brightness(.94); } 100% { transform:translate(-50%,-50%) scale(1.04) rotate(1deg); filter:blur(1px) brightness(1.06); } }
@media (max-width:620px) { .hardware-card { grid-template-columns:1fr; } .hardware-copy { padding:4px; } .demo-video-card { grid-template-columns:1fr; } }
.legal-links { margin-top:26px; padding-bottom:20px; text-align:center; }.legal-links a,.legal-content a { color:var(--accent); text-underline-offset:3px; }.legal-links a { font-size:.7rem; }
.legal-page { max-width:780px; }.legal-content { padding:65px 0 60px; }.legal-content>h1 { margin:13px 0 55px; font-size:clamp(2.7rem,7vw,5rem); line-height:1; letter-spacing:-.075em; }.legal-content>h1 em { color:var(--accent); font-style:normal; }.legal-content section { border-top:1px solid var(--line); padding:32px 0 13px; }.legal-content h2 { margin:0 0 22px; font-size:1.55rem; }.legal-content h3 { margin:24px 0 8px; font-size:.78rem; color:var(--accent); text-transform:uppercase; letter-spacing:.08em; }.legal-content p,.legal-content address { color:var(--muted); font-size:.82rem; line-height:1.7; }.legal-content address { font-style:normal; }.legal-updated { margin-top:35px; font-size:.7rem !important; color:#746c61 !important; }
.legal-critical { margin-top:28px; padding:19px; border:1px solid #a35d2e; border-radius:16px; background:#2c1e16; color:#f5efe5; }.legal-critical strong { color:var(--accent); }.legal-critical p { margin:9px 0 0; color:#d1b9a0; }
.forehead-tool { display:block; }.forehead-head p { color:var(--muted); font-size:.78rem; line-height:1.5; }.forehead-card { min-height:72px; display:flex; align-items:center; justify-content:center; margin:17px 0 10px; padding:15px; border:1px dashed #71522d; border-radius:13px; color:var(--accent); font-size:1.3rem; font-weight:800; text-align:center; }.forehead-timer { text-align:center; color:var(--text); font:800 2.1rem ui-monospace,SFMono-Regular,Menlo,monospace; }.forehead-actions { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }.answer-button { min-height:44px; border-radius:10px; font-weight:800; }.answer-button.yes { background:#799d62; color:#12200e; }.answer-button.no { background:#a95d45; color:#250e09; }.answer-button.maybe { background:#bd9457; color:#26170b; }.forehead-footer { display:flex; gap:8px; margin-top:12px; }.forehead-footer button { flex:1; }
.puzzle-tool { display:block; }.puzzle-tool h2 { margin:9px 0 8px; }.puzzle-intro,.puzzle-rule { color:var(--muted); font-size:.78rem; line-height:1.5; }.puzzle-select-label { display:block; margin-top:17px; color:var(--muted); font-size:.7rem; }.puzzle-select,.puzzle-guess { width:100%; margin-top:7px; border:1px solid var(--line); border-radius:10px; background:#ffffff08; color:var(--text); padding:12px; }.puzzle-select option { background:#24211c; }.puzzle-question { min-height:64px; margin:18px 0 10px; padding:16px; background:#ffffff08; border-radius:12px; color:var(--text); font-size:.95rem; line-height:1.5; }.puzzle-answer-actions { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }.puzzle-feedback,.puzzle-rating { min-height:21px; margin:10px 0 0; color:var(--accent); font-size:.78rem; }.puzzle-guess { resize:vertical; line-height:1.4; }.puzzle-guess-actions { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:8px; }.puzzle-guess-actions button { padding:0 8px; font-size:.7rem; }.puzzle-actions { display:flex; gap:8px; margin-top:15px; }.puzzle-actions button { flex:1; }.puzzle-solution { margin:14px 0 0; padding:14px 16px; border-left:2px solid var(--accent); color:var(--accent); font-size:.84rem; line-height:1.5; }
.install-card { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:14px; padding:19px; background:linear-gradient(135deg,#273126,#1d241c); border:1px solid #4f6945; border-radius:17px; }.install-card h2 { margin:7px 0 8px; font-size:1.2rem; }.install-card p:not(.eyebrow) { margin:0; color:#b8c3b0; font-size:.78rem; line-height:1.55; }.install-card .primary-button { flex:none; white-space:nowrap; }.light-view:fullscreen,#lightView:fullscreen { background:#050505; }
@media (max-width:620px) { .install-card { align-items:flex-start; flex-direction:column; gap:15px; }.install-card .primary-button { width:100%; } }
@media (max-width:620px) { .puzzle-guess-actions { grid-template-columns:1fr; }.puzzle-guess-actions button { min-height:42px; } }