@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500&family=DM+Mono:wght@300;400&display=swap");:root{color-scheme:light;--bg:#f8f5f0;--paper:#fbf8f4;--text:#1a1814;--muted:#9a9590;--border:#e0dbd4;--accent:#1a1814}.theme-drip{--bg:#f5efe6;--paper:#f7f2ea;--text:#111122;--muted:#7f7c87;--border:#ddd7ce;--accent:#4a90d9}.theme-cubist{--bg:#f1ece3;--paper:#f6f1e9;--text:#2a2521;--muted:#8f877f;--border:#ddd6cc;--accent:#b38457}*,:after,:before{box-sizing:border-box}body,html{margin:0;padding:0;min-height:100%}body{background:var(--bg);color:var(--text);font-family:DM Mono,monospace}button,input,select,textarea{font:inherit;outline:none}.page-shell{min-height:100vh;padding:52px 24px 80px}.hero{text-align:center;margin-bottom:48px}.hero h1{margin:0;font-family:Cormorant Garamond,serif;font-weight:300;font-size:clamp(44px,7vw,88px);line-height:1;letter-spacing:.18em}.hero h1,.tagline{text-transform:uppercase}.tagline{margin-top:10px;font-size:10px;letter-spacing:.3em;color:var(--muted)}.style-pills{display:flex;gap:6px;margin-top:22px;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;margin-inline:auto;max-width:780px;padding-bottom:4px;scrollbar-width:none}.style-pills::-webkit-scrollbar{display:none}.pill{border:1px solid var(--border);background:transparent;color:var(--muted);padding:6px 14px;font-size:9px;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s}.pill:hover{border-color:var(--text);color:var(--text)}.pill.active{background:var(--text);border-color:var(--text);color:var(--bg)}.main-column{width:100%;max-width:780px;margin:0 auto}.username-wrap{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto auto;margin-bottom:14px}.control-row input[type=range],.editor-panel textarea,.username-field,.username-field input,.username-wrap button,.username-wrap select{-webkit-appearance:none;-moz-appearance:none;appearance:none}.username-field,.username-wrap select{border:1px solid var(--border);background:transparent;color:var(--text);padding:13px 18px;font-size:11px;letter-spacing:.04em}.username-field{display:grid;grid-gap:8px;gap:8px;align-content:center;border-right:none;padding-top:11px;padding-bottom:11px}.username-field span{color:var(--muted);font-size:8px;letter-spacing:.22em;text-transform:uppercase}.username-field input{border:none;background:transparent;color:var(--text);padding:0;font-family:Cormorant Garamond,serif;font-size:clamp(18px,2.6vw,22px);font-weight:300;letter-spacing:.02em}.username-field input::placeholder{color:var(--muted)}.username-field input.sample-input{color:var(--muted)}.username-field input:focus{outline:none}.username-wrap button{border:1px solid var(--border);background:transparent;color:var(--muted);padding:13px 20px;font-size:9px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s}.username-wrap button:first-of-type{color:var(--text)}.action-bar button:hover:not(:disabled),.action-link:hover,.tile-action:hover:not(:disabled),.username-wrap button:hover:not(:disabled){background:var(--text);color:var(--bg);border-color:var(--text)}.action-bar button:disabled,.tile-action:disabled,.username-wrap button:disabled{opacity:.45;cursor:default}.game-label{width:100%;border:1px solid var(--border);border-bottom:none;display:flex;align-items:stretch}.player{flex:1 1;padding:12px 18px;border-right:1px solid var(--border)}.game-date span,.panel-heading,.player-role{font-size:8px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}.game-date time,.player-name,.stat b{font-family:Cormorant Garamond,serif;font-weight:300;color:var(--text)}.player-name{font-size:17px;letter-spacing:.04em}.game-date{min-width:110px;padding:12px 18px;display:flex;flex-direction:column;justify-content:center;align-items:flex-end}.game-date time{font-size:15px}.canvas-shell{width:100%}.canvas-frame{width:100%;aspect-ratio:1;border:1px solid var(--border);background:var(--paper);display:grid;place-items:center;overflow:hidden}.canvas-frame svg{width:100%;height:auto;display:block}.canvas-empty{padding:28px;text-align:center;color:var(--muted);line-height:1.7;font-size:10px;letter-spacing:.08em;text-transform:uppercase}.action-bar{width:100%;border:1px solid var(--border);border-top:none;display:flex;align-items:stretch}.action-bar button,.action-link,.tile-action{border:none;border-right:1px solid var(--border);background:transparent;color:var(--muted);padding:12px 20px;font-size:9px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s}.action-link{text-decoration:none}.action-bar button:last-child,.action-link:last-child,.tile-action:last-child{border-right:none}.action-bar .paint-btn{color:var(--text);flex:1 1}.stats{width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--border);border-top:none}.stats-main{grid-template-columns:repeat(3,minmax(0,1fr))}.stat{padding:10px 14px;border-right:1px solid var(--border);font-size:8px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}.stat:last-child{border-right:none}.stat b{display:block;margin-bottom:2px;font-size:13px;letter-spacing:0}.error{width:100%;padding:10px 0 0;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:#b03030}.editor-grid{display:grid;grid-template-columns:1.15fr .85fr;grid-gap:18px;gap:18px;margin-top:26px}.editor-panel{display:grid;grid-gap:12px;gap:12px}.editor-panel textarea{width:100%;min-height:160px;border:1px solid var(--border);background:transparent;color:var(--text);padding:16px 18px;resize:vertical;font-size:10px;line-height:1.7}.style-controls{display:grid;grid-gap:14px;gap:14px}.control-row{display:grid;grid-gap:8px;gap:8px}.checkbox-row,.control-row label{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}.control-row label b{color:var(--text);font-weight:400}.control-row input[type=range]{width:100%;height:1px;background:var(--border)}.control-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:10px;height:10px;border-radius:50%;background:var(--text);cursor:pointer}.checkbox-row{justify-content:flex-start}.preview-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:14px;gap:14px}.preview-tile{display:grid;grid-gap:8px;gap:8px}.preview-grid-art{border:1px solid var(--border);background:var(--paper);min-height:180px}.preview-grid-art svg{width:100%;height:auto;display:block}.preview-caption{display:grid;grid-gap:4px;gap:4px;color:var(--muted);font-size:8px;letter-spacing:.12em;text-transform:uppercase}.preview-caption strong{color:var(--text);font-weight:400}.tile-actions{display:flex;border:1px solid var(--border)}@media (max-width:840px){.editor-grid{grid-template-columns:1fr}.preview-grid{grid-template-columns:1fr 1fr}}@media (max-width:640px){.page-shell{padding:28px 16px 48px}.hero{margin-bottom:28px}.tagline{letter-spacing:.18em}.style-pills{margin-top:18px;padding-inline:2px}.pill{flex:0 0 auto}.username-wrap{grid-template-columns:repeat(2,minmax(0,1fr))}.username-field{grid-column:1/-1;border-right:1px solid var(--border);border-bottom:none}.username-wrap button{padding-inline:14px}.game-label{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.player{padding:12px 14px}.game-date{grid-column:1/-1;border-top:1px solid var(--border);border-left:none;min-width:0;padding:10px 14px;align-items:flex-start}.stats{display:grid}.action-bar button,.action-link,.stat{border-right:none;border-bottom:1px solid var(--border)}.stats-main{grid-template-columns:repeat(3,minmax(0,1fr))}.stat{padding:10px}.action-bar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.action-bar button{border-bottom:none;padding-inline:12px}.preview-grid{grid-template-columns:1fr}}