:root{--bg: #0b0b0b;--fg: #eaeaea;--muted: #bdbdbd;--panel: #141414;--border: #2a2a2a}*{box-sizing:border-box}html,body{height:100%}body{margin:0;background:var(--bg);color:var(--fg);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,"Apple Color Emoji","Segoe UI Emoji"}.app{max-width:1280px;margin:0 auto;padding:16px}.topbar{display:flex;gap:12px;justify-content:space-between;align-items:center;margin-bottom:12px}.title{font-weight:800;letter-spacing:.5px;font-size:18px}.subtitle{color:var(--muted);font-size:13px;margin-top:4px}.actions{display:flex;gap:10px}button{background:#1f1f1f;color:var(--fg);border:1px solid var(--border);border-radius:10px;padding:10px 12px;cursor:pointer}button:hover{border-color:#444}.controls{margin-bottom:12px}.formGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}.field{display:flex;flex-direction:column;gap:6px}.field span{color:var(--muted);font-size:12px}select,input[type=number]{width:100%;background:#1f1f1f;color:var(--fg);border:1px solid var(--border);border-radius:10px;padding:10px 12px}.picker{display:flex;flex-wrap:wrap;gap:6px}.pickerBtn{padding:6px 10px;border-radius:999px;background:#1f1f1f;border:1px solid var(--border);color:var(--fg);font-size:12px}.pickerBtn.active{border-color:#666;background:#2b2b2b}.packTitle{margin-top:4px}.formActions{margin-top:12px}.extraLists{margin-top:16px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}.extraBlock{background:#191919;border:1px solid var(--border);border-radius:12px;padding:10px}.extraLabel{font-size:12px;color:var(--muted);font-weight:700;margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px}.extraInputRow{display:flex;gap:6px}.extraInput{flex:1;background:#1f1f1f;color:var(--fg);border:1px solid var(--border);border-radius:8px;padding:7px 10px;font-size:13px}.spellSelect{cursor:pointer;width:100%}.spellSelect option,.spellSelect optgroup{background:#1f1f1f;color:var(--fg)}.extraAddBtn{background:#1f1f1f;color:var(--fg);border:1px solid var(--border);border-radius:8px;padding:7px 12px;font-size:16px;line-height:1;cursor:pointer}.extraAddBtn:hover{border-color:#666}.extraItemList{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}.extraItem{display:flex;justify-content:space-between;align-items:center;background:#242424;border-radius:6px;padding:5px 8px;font-size:12px;gap:6px}.extraItem span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.extraRemoveBtn{background:transparent;color:#888;border:none;padding:0 2px;font-size:14px;line-height:1;cursor:pointer;flex-shrink:0}.extraRemoveBtn:hover{color:#f66;border-color:transparent}.drDieFrame{filter:drop-shadow(0 2px 8px rgba(0,0,0,.6));transform-origin:50% 55%;transition:filter .18s ease,transform .18s ease}.drDieFrame.isRolling{animation:drRollSpin .56s linear infinite,drBounce .28s ease-in-out infinite;filter:blur(.2px) drop-shadow(0 8px 16px rgba(123,104,238,.5))}.drDieFrame.isCrit{animation:drCritPulse .98s ease-in-out infinite;filter:drop-shadow(0 0 12px rgba(113,255,164,.9))}.drDieFrame.isFumble{animation:drFumbleShake .24s ease-in-out 3;filter:drop-shadow(0 0 10px rgba(255,120,120,.85))}@keyframes drRollSpin{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(1.06)}to{transform:rotate(360deg) scale(1)}}@keyframes drBounce{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}@keyframes drCritPulse{0%,to{transform:scale(1)}50%{transform:scale(1.08)}}@keyframes drFumbleShake{0%{transform:translate(0)}25%{transform:translate(-2px)}50%{transform:translate(2px)}75%{transform:translate(-2px)}to{transform:translate(0)}}.panel{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:12px}.panelTitle{font-weight:700;margin-bottom:10px}.packList{display:grid;grid-template-columns:1fr 1fr;gap:10px}.packItem{display:flex;gap:10px;padding:10px;border:1px solid var(--border);border-radius:12px;align-items:flex-start;cursor:pointer}.packItem input{margin-top:3px}.packName{font-weight:700}.packNote{color:var(--muted);font-size:12px;margin-top:4px}.main{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}.mainSheet{grid-template-columns:minmax(240px,320px) 1fr}.generatedMeta{position:sticky;top:12px}.generatedLine{margin-bottom:8px;font-size:14px}.jsonPanel{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:12px;overflow:auto;max-height:84vh}pre{margin:0;white-space:pre-wrap;word-break:break-word;color:#d7d7d7;font-size:12px;line-height:1.35}.sheetWrap{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:12px}.sheet{position:relative;width:100%;max-width:820px;aspect-ratio:1275 / 1651;background-image:url(/whitebox-sheet-v2.png),url(/whitebox-sheet.png);background-size:contain;background-repeat:no-repeat;background-position:top left;margin:0 auto}.f{position:absolute;z-index:1;color:#111;font-weight:700;font-size:clamp(12px,1.6vw,18px);line-height:1;font-family:Caveat,cursive;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:transparent;padding:0;display:flex;align-items:center;justify-content:center}.f.portrait{top:1.5%;left:77.7%;width:16%;height:23.9%;overflow:hidden;padding:0;border-radius:4px}.f.ac{top:4%;left:41.5%;width:8%;height:4.5%;font-size:clamp(30px,3.9vw,54px)}.f.hpmax{top:3.9%;left:57.9%;width:6%;height:4%;font-size:clamp(10px,1.3vw,18px)}.f.hpcur{top:7.5%;left:64.1%;width:6%;height:4%;font-size:clamp(10px,1.3vw,18px)}.f.name{top:16.2%;left:43.9%;width:49%;height:2.5%;justify-content:flex-start;font-size:clamp(16px,2.3vw,26px)}.f.class{top:22.8%;left:36.5%;width:22%;height:2.2%;justify-content:flex-start;font-size:clamp(15px,2.1vw,24px)}.f.lvl{top:22.8%;left:64.9%;width:13%;height:2.2%;justify-content:flex-start;font-size:clamp(15px,2.1vw,24px)}.f.race{top:28.6%;left:36.5%;width:22%;height:2.2%;justify-content:flex-start;font-size:clamp(15px,2.1vw,24px)}.f.align{top:28.6%;left:64.7%;width:20%;height:2.2%;justify-content:flex-start;font-size:clamp(15px,2.1vw,24px)}.f.strMod{top:19%;left:2.7%;width:6%;height:3%;font-size:clamp(11px,1.4vw,16px)}.f.dexMod{top:22.7%;left:2.7%;width:6%;height:2.6%;font-size:clamp(11px,1.4vw,16px)}.f.conMod{top:26%;left:2.7%;width:6%;height:2.8%;font-size:clamp(11px,1.4vw,16px)}.f.intMod{top:29.9%;left:3.3%;width:6%;height:2.3%;font-size:clamp(11px,1.4vw,16px)}.f.wisMod{top:32.8%;left:3.3%;width:6%;height:2.5%;font-size:clamp(11px,1.4vw,16px)}.f.chaMod{top:36%;left:3.3%;width:6%;height:2.5%;font-size:clamp(11px,1.4vw,16px)}.f.str{top:19%;left:5.2%;width:12%;height:3%;font-size:clamp(14px,2vw,22px)}.f.dex{top:22.7%;left:5.2%;width:12%;height:2.6%;font-size:clamp(14px,2vw,22px)}.f.con{top:26%;left:5.2%;width:12%;height:2.8%;font-size:clamp(14px,2vw,22px)}.f.int{top:29.9%;left:5.8%;width:12%;height:2.3%;font-size:clamp(14px,2vw,22px)}.f.wis{top:32.8%;left:5.8%;width:12%;height:2.5%;font-size:clamp(14px,2vw,22px)}.f.cha{top:36%;left:5.8%;width:12%;height:2.5%;font-size:clamp(14px,2vw,22px)}.f.xp{top:41.1%;left:10.2%;width:20%;height:2.2%;justify-content:flex-start;font-size:clamp(13px,1.9vw,21px)}.f.sv{top:36.6%;left:30.5%;width:12%;height:5.5%;font-size:clamp(14px,2vw,28px);font-weight:900}.f.gold{top:87.98%;left:65%;width:10%;height:2%;justify-content:flex-start;align-items:flex-end}.f.silver{top:90.98%;left:66%;width:8%;height:2%;justify-content:flex-start;align-items:flex-end}.f.copper{top:87.98%;left:87.5%;width:7%;height:2%;justify-content:flex-start;align-items:flex-end}.f.gems{top:91%;left:87.5%;width:7%;height:2%;justify-content:flex-start;align-items:flex-end}.textLine{position:absolute;z-index:1;display:flex;align-items:flex-end;overflow:hidden;line-height:1.1;font-family:Caveat,cursive;font-weight:700;font-size:clamp(10px,1.55vw,16px);color:#111;word-break:break-word;overflow-wrap:break-word;white-space:normal}.textBlock{position:absolute;z-index:1;overflow:hidden;font-family:Caveat,cursive;font-weight:700;font-size:clamp(10px,1.55vw,16px);line-height:1.85;color:#111;word-break:break-word;overflow-wrap:break-word;white-space:normal;display:block;padding-top:.2em}@media print{body{background:#fff}.suiteTabs,.topbar,.controls,.jsonPanel,.generatedMeta{display:none!important}.app{max-width:none;padding:0}.sheetWrap{border:none;padding:0;background:transparent}.sheet{max-width:none;width:8.5in;height:11in;-webkit-print-color-adjust:exact;-moz-print-color-adjust:exact;print-color-adjust:exact;color-adjust:exact}.f{font-size:10pt}.f.ac{font-size:24pt}.f.hpmax,.f.hpcur{font-size:8pt}.f.name{font-size:14pt}.f.class,.f.lvl,.f.race,.f.align{font-size:13pt}.f.strMod,.f.dexMod,.f.conMod,.f.intMod,.f.wisMod,.f.chaMod{font-size:9pt}.f.str,.f.dex,.f.con,.f.int,.f.wis,.f.cha,.f.xp{font-size:12pt}.f.sv{font-size:13pt}.textBlock{font-size:11pt;line-height:25pt;padding-top:0}.textLine{font-size:10pt;line-height:25pt;padding-top:0}}@page{size:letter portrait;margin:0}@media (max-width: 900px){.formGrid,.packList,.main,.mainSheet{grid-template-columns:1fr}.generatedMeta{position:static}}.ps-sheet{background:#fff;color:#111;font-family:Georgia,serif;max-width:7.5in;margin:16px auto;padding:32px 36px;border:1px solid #ccc;box-shadow:0 2px 12px #0000002e;font-size:13px;line-height:1.5}.ps-header{text-align:center;border-bottom:2px solid #333;padding-bottom:12px;margin-bottom:20px}.ps-char-name{font-size:22px;font-weight:700;letter-spacing:.5px;color:#111}.ps-char-sub{font-size:13px;color:#555;margin-top:4px}.ps-columns{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:16px}.ps-col{display:flex;flex-direction:column;gap:14px}.ps-block{break-inside:avoid}.ps-block-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#555;border-bottom:1px solid #ccc;padding-bottom:3px;margin-bottom:6px}.ps-row{display:flex;justify-content:space-between;align-items:baseline;padding:1px 0;border-bottom:1px dotted #ddd}.ps-label{font-weight:600;color:#333;min-width:110px}.ps-value{color:#111;text-align:right}.ps-list-item{padding:2px 0;border-bottom:1px dotted #e0e0e0;color:#111}.ps-list-item:last-child{border-bottom:none}.ps-empty{color:#aaa;font-style:italic}.ps-notes-lines{margin-top:4px}.ps-notes-line{border-bottom:1px solid #ccc;height:28px}@media print{.ps-sheet{border:none;box-shadow:none;margin:0;padding:.4in .5in;max-width:none;width:100%;font-size:12px}.ps-columns{grid-template-columns:1fr 1fr}}