:root{--color-red: #f7768e;--color-orange: #ff9e64;--color-yellow: #e0af68;--color-yellow-muted: #cfc9c2;--color-green: #9ece6a;--color-teal: #73daca;--color-teal-light: #b4f9f8;--color-cyan: #2ac3de;--color-cyan-light: #7dcfff;--color-blue: #7aa2f7;--color-purple: #bb9af7;--color-fg: #c0caf5;--color-fg-muted: #a9b1d6;--color-fg-subtle: #9aa5ce;--color-comment: #565f89;--color-bg-dark: #414868;--color-bg-storm: #24283b;--color-bg: #1a1b26;--text-primary: var(--color-fg);--text-secondary: var(--color-fg-muted);--text-muted: var(--color-fg-subtle);--text-dim: var(--color-comment);--bg-primary: var(--color-bg);--bg-elevated: var(--color-bg-storm);--bg-surface: var(--color-bg-dark);--accent-primary: var(--color-blue);--accent-secondary: var(--color-purple);--accent-success: var(--color-green);--accent-warning: var(--color-orange);--accent-error: var(--color-red);--accent-info: var(--color-cyan)}*,*:before,*:after{box-sizing:border-box}*{margin:0;padding:0}html{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4;height:100%}body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:var(--bg-primary);color:var(--text-primary);height:100%}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}a{color:inherit;text-decoration:inherit}table{border-collapse:collapse}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit;color:var(--text-primary)}ol,ul{list-style:none}.page{min-height:100vh;display:flex;flex-direction:column;gap:1.5rem;padding:1.5rem}.row{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}.display{font-size:3.75rem;font-weight:700}main{flex:1;padding:2rem 0;display:flex;align-items:center;justify-content:center}.content{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1.5rem}.heading{font-size:1.5rem;font-weight:500}.label{color:var(--text-muted);margin-bottom:.5rem}.btn{background:var(--bg-surface);color:var(--text-primary);padding:.5rem 1rem;cursor:pointer;border:none;transition:background .15s}.btn:hover{background:var(--bg-elevated)}.link{color:var(--text-dim);transition:color .15s}.link:hover{color:var(--text-secondary)}footer{display:flex;justify-content:center;gap:1.5rem;padding-top:2rem}.nav{position:absolute;top:1rem;left:50%;transform:translate(-50%)}.nav-list{display:flex;gap:1.5rem}.nav-link{color:var(--text-dim);transition:color .15s;padding:.25rem .5rem}.nav-link:hover,.nav-link.active{color:var(--text-primary)}.dice-selector{display:flex;flex-direction:column;align-items:center}.dice-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}.dice-btn{background:var(--bg-elevated);color:var(--text-muted);padding:.5rem 1rem;border:1px solid var(--bg-surface);border-radius:.5rem;cursor:pointer;transition:all .15s}.dice-btn:hover{background:var(--bg-surface);color:var(--text-primary)}.dice-btn.selected{background:var(--bg-elevated);color:var(--accent-primary);border-color:var(--accent-primary)}.dice-btn.selected:hover{background:var(--bg-surface)}.roll-section{display:flex;flex-direction:column;align-items:center;gap:1rem}.roll-btn{background:var(--bg-elevated);color:var(--accent-primary);border-color:var(--accent-primary);padding:.75rem 2rem;border:none;border-radius:.5rem;cursor:pointer;font-weight:500;transition:background .15s}.roll-btn:hover{background:var(--bg-surface)}.result{min-height:4rem;display:flex;align-items:center;justify-content:center}.result-value{font-size:3rem;font-weight:700;color:var(--text-primary)}.history{width:100%;height:100%}.history-title{font-size:.875rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem;text-align:center}.history-list{display:flex;flex-direction:column;gap:.25rem}.history-item{display:flex;justify-content:space-between;padding:.25rem .5rem;background:var(--bg-elevated);border-radius:.25rem}.history-dice{color:var(--text-muted);font-size:.875rem}.history-result{color:var(--text-primary);font-weight:500}.scene-page{width:100%;max-width:800px}.canvas-container{width:100%;aspect-ratio:16 / 10;border-radius:.5rem;overflow:hidden;border:1px solid var(--bg-surface);background:var(--bg-primary)}.canvas-container canvas{width:100%!important;height:100%!important;display:block}.scene-controls{display:flex;justify-content:center;gap:.5rem}.scene-btn{background:var(--bg-elevated);color:var(--text-muted);padding:.5rem 1.5rem;border:1px solid var(--bg-surface);border-radius:.5rem;cursor:pointer;transition:all .15s}.scene-btn:hover{background:var(--bg-surface);color:var(--text-primary)}.scene-btn.active{color:var(--accent-primary);border-color:var(--accent-primary)}