@font-face{font-family:system-fractal;src:local("Arial")}*{box-sizing:border-box}html,body{margin:0;min-width:320px;min-height:100%;background:#090909;color:#e3d3b6;font-family:Arial,Helvetica,sans-serif}body{overflow-x:hidden}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:2px solid #f5cf8f;outline-offset:5px}button:disabled{cursor:default}::selection{background:#79603e}#app{min-height:100svh;background:radial-gradient(ellipse at 50% 45%,#211a11 0,#0b0a09 65%)}.workspace{height:100svh;min-height:100svh;position:relative;display:flex;flex-direction:column}.header{height:86px;display:flex;align-items:center;justify-content:space-between;padding:0 42px;z-index:4}.brand{display:flex;align-items:center;gap:20px;color:#deb572;letter-spacing:.39em;font-size:26px;font-weight:400}.brand-mark{width:35px;height:35px;display:block;flex-shrink:0}.brand-mark svg{width:100%;height:100%;display:block}.utilities{display:flex;gap:12px;align-items:center}.quiet-button{height:42px;min-width:42px;border:1px solid #655038;background:#15120e;display:grid;place-items:center;border-radius:50%;font-size:18px}.quiet-button[aria-pressed=true]{border-color:#d8b87e;color:#ffe0a2}.scene-area{position:relative;flex:1;min-height:420px;height:calc(100svh - 222px);isolation:isolate}.scene-area canvas{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:none;outline:none}.scene-area:after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 70px 30px #090909bf;pointer-events:none;z-index:1}.options{position:absolute;right:30px;top:50%;transform:translateY(-50%);z-index:3;display:flex;flex-direction:column;gap:26px;background:#0b0a09bd;border:1px solid #4b3825;border-radius:22px;padding:22px 14px;backdrop-filter:blur(18px)}.option-group{display:flex;flex-direction:column;align-items:center;gap:12px}.option-title{font-size:12px;letter-spacing:.08em;color:#bca586;margin:0}.swatch{width:34px;height:34px;border-radius:50%;border:1px solid #786043;position:relative;padding:0;transition:transform .2s,box-shadow .2s}.swatch:hover{transform:scale(1.08)}.swatch[aria-pressed=true]{box-shadow:0 0 0 4px #17130f,0 0 0 5px #dfb879}.swatch[data-color=onyx],.swatch[data-cloth=black]{background:radial-gradient(at 28% 24%,#4b4d51,#0b0d11 58%,#000)}.swatch[data-color=ivory],.swatch[data-cloth=white]{background:radial-gradient(at 28% 24%,#fff,#e0dace 66%,#a49b8e)}.swatch[data-color=amethyst]{background:radial-gradient(at 28% 24%,#9c67ca,#52238e 55%,#210c43)}.option-divider{height:1px;background:#473524}.result{position:absolute;top:5px;left:50%;transform:translate(-50%);min-height:49px;display:flex;align-items:center;gap:13px;border:1px solid #66502f;border-radius:99px;background:#110d08db;backdrop-filter:blur(15px);padding:7px 24px;z-index:4;transition:opacity .2s;white-space:nowrap}.result[hidden]{display:none}.result-label{color:#bca586;font-size:14px}.result-number{font-size:27px;font-family:Georgia,serif;color:#f9d49a;line-height:1}.rolling .result-number{opacity:.6}.dock{position:relative;z-index:5;display:flex;flex-direction:column;align-items:center;padding:3px 20px 22px;gap:15px}.dice-selector{display:flex;gap:8px;padding:8px;border-radius:23px;background:#0c0a07de;border:1px solid #6b5130;box-shadow:0 12px 40px #0008}.die-button{width:118px;height:94px;border:1px solid #3a2e20;background:linear-gradient(145deg,#16120e,#090909);border-radius:16px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;transition:border-color .2s,background .2s,box-shadow .2s}.die-button img{width:86px;height:69px;object-fit:contain;pointer-events:none}.die-button span{font-size:13px;color:#b8a381;letter-spacing:.08em;margin-top:-3px}.die-button:hover{border-color:#9d7946}.die-button[aria-pressed=true]{border-color:#e3b976;box-shadow:inset 0 0 18px #d29d3120,0 0 14px #dba1451c}.die-button[aria-pressed=true] span{color:#f0d097}.loader{position:absolute;inset:0;display:grid;place-content:center;gap:16px;background:#0a0908;z-index:9;text-align:center;color:#d6b477;font-size:14px}.loader[hidden]{display:none}.loader .brand-mark{margin:auto;animation:breathe 1.5s infinite}@keyframes breathe{50%{opacity:.25}}.error{max-width:360px;line-height:1.6;padding:24px}.scene-area.dragging{cursor:grabbing}.scene-area{cursor:grab}.footnote{position:absolute;bottom:18px;left:32px;font-size:12px;color:#776650;z-index:6}.ready-note{display:none}.workspace.light-cloth .options{border-color:#826a45}@media(min-width:1600px){.scene-area{height:calc(100svh - 256px)}.header{height:96px}.dock{padding-bottom:34px}.die-button{width:134px;height:104px}.die-button img{width:94px;height:77px}}@media(max-width:900px){.header{height:70px;padding:0 22px}.brand{font-size:21px;gap:16px}.brand-mark{width:27px;height:27px}.scene-area{height:calc(100svh - 199px);min-height:330px}.options{right:14px;border-radius:17px;padding:17px 10px;gap:18px}.option-title{font-size:12px}.swatch{width:29px;height:29px}.footnote{display:none}.die-button{width:102px;height:88px}.die-button img{width:77px;height:62px}.dock{gap:14px;padding-bottom:20px}.result{top:0;padding:7px 17px}.result-label{font-size:13px}}@media(max-width:600px){.header{height:64px;padding:0 19px}.brand{font-size:19px;letter-spacing:.29em;gap:15px}.utilities{gap:8px}.quiet-button{height:35px;min-width:35px;font-size:16px}.scene-area{height:calc(100svh - 184px);min-height:330px}.options{inset:auto auto 5px 50%;transform:translate(-50%);flex-direction:row;gap:16px;padding:11px 16px;border-radius:999px}.option-group{flex-direction:row;gap:12px}.option-title{display:none}.option-divider{width:1px;height:26px}.swatch{width:24px;height:24px}.swatch[aria-pressed=true]{box-shadow:0 0 0 3px #17130f,0 0 0 4px #dfb879}.dock{padding:11px 12px 19px;gap:13px}.dice-selector{gap:6px;padding:6px;border-radius:19px}.die-button{width:77px;height:76px;border-radius:13px}.die-button img{width:65px;height:56px}.die-button span{font-size:12px}.result{top:0;min-height:43px}.result-number{font-size:24px}.result-label{font-size:12px}.scene-area:after{box-shadow:inset 0 0 35px 5px #090909a6}}@media(prefers-reduced-motion:reduce){button{transition:none}.loader .brand-mark{animation:none}}