/* A canvas-first workspace with a compact floating palette for tablet touch. */
:root{--ink:#3b5368;--muted:#71889d}body{height:100dvh;overflow:hidden;overscroll-behavior:none;background:#e4f0fa}button{touch-action:manipulation}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.topbar{position:absolute;z-index:4;top:max(18px,env(safe-area-inset-top));left:max(22px,env(safe-area-inset-left));right:max(22px,env(safe-area-inset-right));height:64px;display:grid;grid-template-columns:1fr auto 1fr;gap:16px;padding:8px 10px;background:#ffffffe0;border:1px solid #fff;border-radius:21px;box-shadow:0 4px 26px #53799a08;backdrop-filter:blur(20px)}
.header-left,.header-actions{display:flex;align-items:center;gap:18px;min-width:0}.header-actions{justify-content:flex-end;gap:10px;margin:0}.brand{display:block;min-width:0;font-family:Georgia,serif;font-size:24px;font-weight:bold;color:#6096bd;letter-spacing:-1px;line-height:1}.brand>span{display:block;font-family:'DM Sans',sans-serif;font-size:12px;letter-spacing:1.8px;font-weight:400;margin-top:5px}.pill-button{min-height:46px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 16px;border-radius:14px;font-size:14px;white-space:nowrap}.library-button{background:#e8f1f9;color:#456e8e}.primary{background:#5185ad;color:#fff}.primary:hover{background:#3f749e}.scene-heading{display:flex;align-items:center;gap:12px}.scene-heading h1{font-size:17px;line-height:1.4;font-weight:500;margin:0}.scene-heading>span{font-size:12px;letter-spacing:1px;color:#829bad;padding:5px 8px;border:1px solid #dce8f0;border-radius:8px}.icon-button{width:46px;height:46px;border-radius:14px}.icon-button svg{width:22px;height:22px}.quiet{background:none;border:0;padding:0;color:#7393ac}
.workspace{display:block;position:relative;width:100%;height:100%;min-height:0;margin:0}.stage{position:absolute;inset:0;border:0;border-radius:0;min-width:0;height:auto;background:radial-gradient(ellipse at 50% 34%,#fff 0%,#edf6fd 35%,#dcebf8 72%,#d4e6f5 100%)}.stage #viewport{inset:90px 74px 244px;border-radius:30px;outline-offset:-4px}.view-controls{left:max(24px,env(safe-area-inset-left));right:auto;top:calc(50% - 150px);bottom:auto;flex-direction:column;gap:3px;padding:6px;border:1px solid #fff;border-radius:21px;background:#ffffffe3;box-shadow:0 8px 30px #6086a415}.divider{height:1px;margin:5px 8px}.stage-bottom{bottom:231px;left:24px;right:24px;display:flex;justify-content:center;gap:16px;font-size:13px;color:#6f8aa1;line-height:1.5}.gesture{display:inline;color:#7a94a9}.gesture:before{content:'·';margin-right:16px}
.palette-panel{position:absolute;z-index:3;left:50%;bottom:max(28px,env(safe-area-inset-bottom));transform:translateX(-50%);width:620px;padding:12px 20px 14px;border-radius:26px;background:#fffffff2;border:1px solid #fff;box-shadow:0 16px 48px #547b9d20,0 3px 8px #537d9f08;backdrop-filter:blur(20px);overflow:visible;display:block}.dock-heading{display:flex;align-items:center;gap:12px;margin-bottom:12px}.palette-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;flex:1;padding:0;background:none;border-radius:0}.palette-tabs button{min-height:42px;padding:8px 7px;border-radius:11px;font-size:14px;color:#71899d}.palette-tabs button[aria-pressed=true]{color:#456c8b;background:#eaf2f9;box-shadow:none}.info-button{width:42px;height:42px;color:#88a1b4}.info-button svg{width:19px;height:19px}.swatches{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px;padding:0 1px 10px}.swatch{display:flex;align-items:center;justify-content:center;padding:4px 0;min-height:56px;position:relative}.swatch>span:last-child:not(.swatch-dot){display:none}.swatch-dot{width:48px;height:48px}.swatch[aria-pressed=true] .swatch-dot:after{inset:-6px}.swatch-dot svg{width:19px;height:19px}
.dock-bottom{display:flex;align-items:center;gap:12px;border-top:1px solid #e6edf4;padding-top:11px}.current-color{padding:0;margin:0;border:0;border-radius:0;background:none;gap:10px;min-width:154px;flex:1}.current-color>div{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}.current-color strong{font-size:14px;white-space:nowrap}.current-color code{font-size:12px;color:#8197a9;margin:0}.color-input-wrap{position:relative;width:44px;height:44px;border-radius:13px}.color-input-wrap:after{content:'+';position:absolute;inset:0;display:grid;place-content:center;font-family:system-ui;font-size:23px;color:#44667f;text-shadow:0 1px 3px white;pointer-events:none}input[type=color]{width:64px;height:64px;margin:-10px}.fill-button{gap:7px;min-height:44px;margin:0;padding:0 12px;border:0;border-radius:12px;background:none;font-size:14px;color:#5e7e98;white-space:nowrap}.fill-button:hover{background:#edf4fa}.fill-button svg{width:19px}.tools-button{min-height:44px;background:#edf3f8;padding:0 13px;color:#55728b}.tools-button svg{width:20px}.save-note{position:absolute;right:26px;bottom:max(22px,env(safe-area-inset-bottom));font-size:12px;color:#69859b;pointer-events:none}.toast{top:100px;bottom:auto;transform:translate(-50%,-12px);line-height:1.5}.toast.show{transform:translate(-50%,0)}
dialog{border-radius:26px;padding:26px;max-height:calc(100dvh - 48px);overscroll-behavior:contain;background:#fcfdff}dialog::backdrop{background:#365a7447;backdrop-filter:blur(8px)}.dialog-header{margin-bottom:24px}.dialog-header h2{font-size:22px;font-weight:500;line-height:1.5}.eyebrow{font-size:12px}.dialog-note{font-size:14px}#library-dialog{max-width:800px;width:calc(100% - 48px)}.scene-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;width:auto}.scene-card{display:flex;flex-direction:column;min-width:0;text-align:left;padding:10px;border-radius:19px}.scene-card img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;border-radius:12px}.scene-card>span{display:flex;flex-direction:column;gap:6px;padding:12px 5px 5px}.scene-card small,.scene-card em{font-size:12px;font-style:normal;color:#7692a8}.scene-card strong{font-size:16px}.part-tools{margin:0;padding:0;border:0}.part-tools label{font-size:14px;margin-bottom:10px}.part-input-row{gap:10px}.part-input-row select{min-height:48px;padding:10px 12px;border-radius:12px;font-size:16px}.paint-part{padding:0 18px;border-radius:12px;background:#5385ae;color:white;font-size:14px}.finish-row{margin-top:26px;font-size:14px}.segmented{border:0;background:#edf3f8;border-radius:12px;padding:4px}.segmented button{min-height:44px;padding:8px 13px;border-radius:9px;font-size:14px}.segmented button[aria-pressed=true]{background:#fff;color:#447393}.reset-tools{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:24px;padding-top:16px;border-top:1px solid var(--line)}.text-button{min-height:44px;gap:10px;padding:8px 4px;font-size:14px}.text-button svg{width:20px;height:20px}
@media(min-width:1400px){.topbar{left:32px;right:32px;top:24px}.stage #viewport{top:110px;bottom:264px}.palette-panel{bottom:38px}.stage-bottom{bottom:241px}}
@media(min-width:740px) and (orientation:portrait){.stage #viewport{left:66px;right:38px;top:120px;bottom:285px}.palette-panel{bottom:48px}.stage-bottom{bottom:261px;flex-direction:column;gap:3px}.gesture:before{display:none}.view-controls{top:39%}.save-note{left:0;right:0;bottom:19px;text-align:center}}
@media(max-width:1000px){.brand{display:none}.palette-panel{width:600px}.stage-bottom{font-size:12px}.save-note{right:20px}}
@media(max-width:739px){.topbar{top:max(12px,env(safe-area-inset-top));left:12px;right:12px;height:58px;padding:6px;gap:6px;border-radius:18px}.header-actions{gap:3px}.pill-button{padding:0 12px;font-size:14px;min-height:44px}.header-left{gap:0}.scene-heading{gap:0}.scene-heading h1{font-size:15px}.scene-heading>span{display:none}.header-actions .quiet{display:none}.primary>span:last-child{display:none}.primary{width:44px;padding:0}.primary svg{width:20px}.stage #viewport{left:6px;right:6px;top:135px;bottom:264px}.view-controls{top:83px;left:50%;transform:translateX(-50%);flex-direction:row;gap:0;padding:3px;border-radius:15px}.view-controls .icon-button{width:42px;height:42px;border-radius:11px}.view-controls .divider{height:25px;width:1px;margin:auto 4px}.palette-panel{width:calc(100% - 24px);padding:10px 12px 12px;bottom:max(28px,env(safe-area-inset-bottom));border-radius:23px}.dock-heading{gap:2px;margin-bottom:9px}.palette-tabs{gap:0}.palette-tabs button{font-size:13px;min-height:44px;padding:7px 3px}.info-button{width:36px;height:44px}.swatches{gap:2px;padding:0 0 8px}.swatch{min-height:48px}.swatch-dot{width:34px;height:34px}.swatch[aria-pressed=true] .swatch-dot:after{inset:-5px}.swatch-dot svg{width:16px;height:16px}.dock-bottom{gap:4px;padding-top:9px}.current-color{gap:7px;min-width:110px}.current-color strong{font-size:13px}.current-color code{font-size:12px}.color-input-wrap{width:40px;height:44px}.fill-button{padding:0 8px;font-size:13px}.fill-button svg{display:none}.tools-button{padding:0 10px;gap:5px;font-size:13px}.tools-button>span:last-child{display:none}.tools-button svg{width:20px}.stage-bottom{bottom:239px;left:12px;right:12px;font-size:12px;gap:0;flex-direction:column}.gesture{display:none}.save-note{left:0;right:0;bottom:7px;text-align:center;font-size:12px}.toast{top:139px;font-size:13px;padding:10px 16px;width:max-content;max-width:calc(100vw - 30px)}dialog{padding:22px;width:calc(100% - 28px)}.dialog-header h2{font-size:20px}.scene-tabs{gap:10px}.scene-card strong{font-size:14px}}
@media(max-height:650px) and (min-width:740px){.topbar{top:10px;height:58px}.stage #viewport{top:74px;bottom:211px}.palette-panel{bottom:18px;padding-top:5px;padding-bottom:9px}.dock-heading{margin-bottom:3px}.dock-bottom{padding-top:6px}.swatches{padding-bottom:5px}.swatch-dot{width:40px;height:40px}.swatch{min-height:49px}.stage-bottom{bottom:207px}.view-controls{top:100px}.save-note{bottom:18px}}
@media(max-height:520px){body{height:580px;overflow-y:auto}.workspace{height:580px}.save-note{display:none}.palette-panel{bottom:16px}.stage #viewport{bottom:220px}.stage-bottom{bottom:213px}}

@media(max-width:739px){#library-dialog{width:calc(100% - 28px)}#library-dialog .scene-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}}