:root{color-scheme:dark;--bg:#111317;--panel:#181b20;--line:#2b3039;--muted:#a0a8b7;--text:#f0f2f5;--accent:#ffad58;--input:#101318;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:14px}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}button,input,select{font:inherit}button{color:var(--text);background:#252a32;border:1px solid #383e48;border-radius:7px;padding:8px 12px;cursor:pointer;min-height:36px}button:hover{background:#343a44;border-color:#697280}button:disabled{opacity:.35;cursor:default}.primary{background:var(--accent);color:#1c1510;border-color:var(--accent);font-weight:650}.primary:hover{background:#ffc17e}.quiet{background:transparent;border-color:transparent;color:var(--muted)}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}input:not([type=checkbox]):not([type=range]):not([type=color]),select{color:var(--text);background:var(--input);border:1px solid #343b45;border-radius:6px;padding:9px 10px;min-width:0;width:100%;min-height:38px}input[type=checkbox]{accent-color:var(--accent);width:15px;height:15px;vertical-align:middle}input[type=range]{width:100%;accent-color:var(--accent);cursor:ew-resize}input[type=color]{width:100%;height:32px;padding:3px;border:1px solid var(--line);border-radius:6px;background:var(--input);cursor:pointer}label{color:var(--muted)}.app-header{height:78px;padding:0 25px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px;background:#16191e}.identity{display:flex;gap:12px;align-items:center}.identity strong{font-size:17px;letter-spacing:2px}.identity strong span{font-weight:400;color:var(--muted);letter-spacing:1px}.identity small{display:block;margin-top:4px;color:var(--muted);font-size:12px}.header-actions{display:flex;gap:9px;align-items:center}#save-status{font-size:12px;color:var(--muted);margin-right:8px}.workspace{display:grid;grid-template-columns:236px minmax(370px,1fr) 290px;height:calc(100dvh - 78px);min-height:600px}.panel{background:var(--panel);min-width:0;display:flex;flex-direction:column;overflow:auto}.layers{border-right:1px solid var(--line)}.inspector{border-left:1px solid var(--line)}.panel-title{display:flex;align-items:center;justify-content:space-between;padding:22px 18px 12px}.panel-title h1,.panel-title h2{font-size:15px;font-weight:600;margin:0}.panel-title>span{font-size:12px;color:var(--muted)}.panel-hint{font-size:12px;line-height:1.5;margin:0 18px 18px;color:var(--muted)}.layer-list{padding:0 10px 12px;overflow:auto;flex:1}.layer-row{display:flex;align-items:center;gap:5px;margin-bottom:3px;border-radius:7px;border:1px solid transparent}.layer-row.selected{background:#3a2b21;border-color:#825735}.layer-row.child{margin-left:18px}.layer-row.hidden{opacity:.45}.layer-main{border:0;background:transparent;padding:8px 4px;min-width:0;flex:1;text-align:left;display:flex;gap:9px;align-items:center;font-size:14px}.layer-main:hover{background:transparent}.layer-glyph{width:20px;text-align:center;color:#a3aebe;font-family:monospace;flex-shrink:0}.selected .layer-glyph{color:var(--accent)}.layer-main span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.layer-expand,.layer-eye{border:0;background:transparent;min-width:23px;min-height:32px;padding:3px;color:var(--muted)}.layer-eye{font-size:13px;opacity:.5}.layer-row:hover .layer-eye,.layer-row.selected .layer-eye{opacity:1}.layer-child-count{color:var(--muted);font-size:12px}.layers-footer{padding:12px 8px;border-top:1px solid var(--line)}.stage{min-width:0;display:flex;flex-direction:column;background:radial-gradient(ellipse at center,#22262d 0,#111418 70%);overflow:hidden}.stage-toolbar{display:flex;align-items:center;justify-content:space-between;padding:15px 20px;gap:12px;border-bottom:1px solid #ffffff08}.segmented{display:flex;gap:2px}.segmented button{font-size:23px;padding:0 10px;line-height:30px;background:transparent;border-color:var(--line)}.view-controls{display:flex;gap:14px;align-items:center;flex-wrap:wrap}.view-controls label{display:flex;align-items:center;gap:5px;font-size:12px}.view-controls select{font-size:12px;min-height:30px;padding:5px;width:auto}.canvas-area{flex:1;min-height:350px;display:flex;align-items:center;justify-content:center;overflow:auto;padding:44px 36px;position:relative}.canvas-mount{position:relative;flex-shrink:0;aspect-ratio:1;width:min(100%,520px);filter:drop-shadow(0 15px 34px #0007)}canvas{display:block;width:100%;height:100%;touch-action:none;border-radius:50%;background:#000;outline:1px solid #414854;box-shadow:0 0 0 9px #1b1f25,0 0 0 10px #343943}canvas:focus-visible{outline:2px solid var(--accent)}.axis-label{position:absolute;font-size:11px;letter-spacing:1.8px;color:#828b99;white-space:nowrap}.axis-top{top:-30px;left:50%;transform:translateX(-50%)}.axis-left{left:-31px;top:50%}.axis-bottom{bottom:-34px;left:50%;transform:translateX(-50%);font-size:10px}.stage-bottom{padding:13px 21px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);gap:12px}.stage-bottom strong{font-size:14px}.stage-bottom #position-status{display:block;color:var(--muted);font-size:12px;margin-top:5px;font-variant-numeric:tabular-nums}.stage-bottom>div:last-child{display:flex;align-items:center;gap:14px;flex-shrink:0}.stage-bottom label{font-size:12px}.stage-bottom button{font-size:12px;min-height:32px}.stage-help{margin:0;padding:0 21px 16px;font-size:12px;color:#a0a8b7;line-height:1.6}.stage-help span{float:right;color:#777f8e}.inspector-section{padding:10px 18px 18px;border-bottom:1px solid var(--line)}.selection-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px}.selection-title h3{font-size:17px;margin:0;font-weight:550}.selection-type{color:var(--muted);font-size:12px;margin:0 0 20px}.control-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}.control-grid label{display:flex;flex-direction:column;gap:7px;font-size:14px}.control-grid input{font-variant-numeric:tabular-nums}.full-control{display:flex;flex-direction:column;gap:9px;margin-bottom:15px}.full-control input{margin:0}.scale-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.scale-heading input{max-width:86px;text-align:right}.scale-heading label{font-size:14px}.check-row{display:flex;gap:18px;margin:10px 0 17px}.align-row{display:flex;gap:6px}.align-row button{flex:1;padding:7px 4px;font-size:12px}.inspector-note{font-size:12px;color:var(--muted);line-height:1.55;margin:12px 0 0}.appearance{padding:18px;border-bottom:1px solid var(--line)}summary{font-size:14px;cursor:pointer;color:var(--text);font-weight:550}.color-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:17px}.color-row label{font-size:12px;line-height:1.5;display:flex;flex-direction:column;gap:6px}.preset-row{display:flex;gap:8px;margin-top:13px}.preset-row button{flex:1;min-height:20px;height:20px;background:var(--swatch);padding:0;border:2px solid #30353e}.preset-row button:hover{border-color:white}.configuration{padding:18px}.configuration label{font-size:14px;display:block;margin-bottom:9px}.configuration p{font-size:12px;color:var(--muted);line-height:1.65}.tag{padding:4px 6px;border:1px solid var(--line);border-radius:4px}#toast{position:fixed;left:50%;bottom:25px;transform:translate(-50%,10px);background:#e8edf5;color:#141922;box-shadow:0 8px 30px #0005;border-radius:8px;padding:12px 20px;font-size:14px;opacity:0;pointer-events:none;transition:.2s;z-index:100;max-width:90vw;text-align:center}#toast.show{opacity:1;transform:translate(-50%,0)}dialog{max-width:420px;color:var(--text);background:var(--panel);border:1px solid #48505d;border-radius:14px;padding:25px}dialog::backdrop{background:#0009}dialog h2{font-size:20px;margin-top:0}dialog p{font-size:16px;line-height:1.6;color:var(--muted)}dialog form>div{display:flex;justify-content:flex-end;gap:10px}.empty-note{padding:18px;color:var(--muted);font-size:14px;line-height:1.6}.warning{color:#ffc17e}
@media(min-width:1600px){.workspace{grid-template-columns:260px minmax(370px,1fr) 320px}.canvas-mount{width:600px}}
@media(max-width:1100px){.workspace{grid-template-columns:190px minmax(350px,1fr) 250px}.stage-toolbar{padding:12px}.view-controls{gap:7px}.zoom-label{display:none}.panel-title,.inspector-section,.appearance,.configuration{padding-left:13px;padding-right:13px}.stage-bottom{padding:12px}.stage-bottom>div:last-child{gap:6px}.stage-help{padding:0 12px 14px;font-size:11px}#save-status{display:none}}
@media(max-width:850px){.app-header{height:auto;min-height:80px;padding:15px 18px;flex-wrap:wrap}.header-actions{flex-wrap:wrap}.workspace{grid-template-columns:190px minmax(0,1fr);height:auto;min-height:0}.stage{min-height:650px}.inspector{grid-column:1/-1;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;overflow:visible}.inspector>.panel-title{grid-column:1/-1}.inspector-content{grid-column:1}.appearance{border-left:1px solid var(--line)}.configuration{grid-column:1/-1}.layers{max-height:650px}.view-controls{gap:8px}.stage-help span{float:none;display:block}.stage-toolbar{flex-wrap:wrap}.stage-bottom{align-items:flex-start}.stage-bottom>div:last-child{flex-direction:column;align-items:flex-end}.canvas-area{min-height:400px}}
@media(max-width:570px){.identity strong{font-size:15px}.header-actions{width:100%}.header-actions button{flex:1;padding:8px;font-size:12px}.workspace{display:flex;flex-direction:column}.stage{order:0;min-height:530px}.layers{order:1;max-height:320px;border-top:1px solid var(--line)}.inspector{order:2;display:block}.layer-list{display:grid;grid-template-columns:1fr 1fr;gap:3px}.layer-row.child{margin-left:0}.canvas-area{min-height:370px;padding:36px 30px}.stage-help{font-size:12px}.panel-hint{font-size:12px}.view-controls label{font-size:12px}.appearance{border-left:0}.stage-bottom>div:last-child{flex-direction:row}.canvas-mount{max-width:330px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Positioning tools stay outside the bezel and use native display coordinates. */
.selection-tools,.selection-actions{display:flex;align-items:center;gap:8px;padding:0 12px 10px}.selection-tools button{font-size:12px;padding:7px 9px}.selection-tools span{font-size:12px;color:var(--muted);white-space:nowrap}.selection-tools button[aria-pressed=true]{background:#3a2b21;border-color:#b17b45;color:#ffc58a}.selection-actions button{flex:1;font-size:12px;padding:6px}.panel-hint{margin-bottom:10px}
.canvas-area{padding:65px 55px 50px 70px;min-height:400px}.ruler{position:absolute;z-index:3;background:#1c222a;border:1px solid #394552;touch-action:none;color:#b3c3d6;user-select:none;font-size:12px;outline-offset:3px}.ruler-top{top:-46px;left:0;width:100%;height:26px;cursor:ns-resize}.ruler-left{left:-48px;top:0;height:100%;width:28px;cursor:ew-resize}.ruler-top::before{content:'X · px';position:absolute;left:0;top:-21px;font-size:12px;white-space:nowrap}.ruler-left::before{content:'Y · px';position:absolute;left:-4px;top:-21px;font-size:12px;white-space:nowrap}.ruler-tick{position:absolute;display:block;background:#586678}.ruler-top .ruler-tick{left:var(--at);bottom:0;width:1px;height:5px}.ruler-left .ruler-tick{top:var(--at);right:0;height:1px;width:5px}.ruler-top .major{height:9px}.ruler-left .major{width:9px}.ruler-tick>span{position:absolute;font-size:12px;font-variant-numeric:tabular-nums;line-height:12px}.ruler-top .ruler-tick>span{bottom:9px;left:0;transform:translateX(-50%)}.ruler-top .ruler-tick:first-child>span{transform:none}.ruler-top .ruler-tick:last-child>span{transform:translateX(-100%)}.ruler-left .ruler-tick>span{right:9px;top:0;transform:translate(50%,-50%) rotate(-90deg)}.ruler-left .ruler-tick:first-child>span{transform:translate(50%,0) rotate(-90deg)}.ruler-left .ruler-tick:last-child>span{transform:translate(50%,-100%) rotate(-90deg)}
.guide-overlay{position:absolute;inset:0;z-index:4;pointer-events:none}.ruler-guide{position:absolute;pointer-events:auto;background:transparent!important;border:0;border-radius:0;min-height:0;padding:0;outline:0;touch-action:none;color:#a4e9ff}.ruler-guide::after{content:'';position:absolute;background:#6dd8ff;box-shadow:0 0 3px #02151c}.guide-x{left:var(--position);top:0;height:100%;width:12px;transform:translateX(-50%);cursor:ew-resize}.guide-y{top:var(--position);left:0;width:100%;height:12px;transform:translateY(-50%);cursor:ns-resize}.guide-x::after{top:0;bottom:0;left:5px;width:1px}.guide-y::after{top:5px;left:0;right:0;height:1px}.guide-value{position:absolute;white-space:nowrap;font-size:12px;background:#153c4e;padding:3px 5px;border-radius:3px;opacity:0}.guide-x .guide-value{top:3px;left:10px}.guide-y .guide-value{left:3px;top:10px}.ruler-guide:hover .guide-value,.ruler-guide:focus-visible .guide-value,.ruler-guide.active .guide-value{opacity:1}.ruler-guide:focus-visible::after{background:#fff}.ruler-controls{padding:18px;border-bottom:1px solid var(--line)}.guide-add{display:flex;gap:7px;margin-top:12px}.guide-add button{flex:1;font-size:12px;padding:7px 4px}.guide-row{display:flex;gap:8px;margin-top:9px;align-items:center}.guide-row label{display:flex;gap:8px;align-items:center;flex:1}.guide-row input{width:100%}.guide-row button{font-size:19px;padding:4px 10px}.alignment-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.alignment-grid button{font-size:12px;padding:7px 3px}.inspector-section h4{font-size:14px;font-weight:550;margin:17px 0 10px}.inspector-section h3{font-weight:550}.selection-type{line-height:1.6}.clean .ruler,.clean .guide-overlay,[hidden]{display:none!important}
@media(max-width:850px){.inspector #inspector-content,.ruler-controls{grid-column:1/-1}.ruler-controls{border-bottom:1px solid var(--line)}.guide-add{max-width:380px}#guide-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:0 15px}.canvas-area{padding:65px 45px 50px 65px}.layers{max-height:700px}}
@media(max-width:570px){.layers{max-height:400px}.canvas-area{min-height:390px;padding:65px 35px 48px 60px}.stage{min-height:590px}.selection-tools,.selection-actions{padding-left:18px;padding-right:18px}.selection-actions button{flex:0 1 140px}.canvas-mount{max-width:330px}}
@media(max-width:380px){.ruler-tick:not(.coarse)>span{display:none}}

.simulator-link{color:#ffc58a;text-decoration:none;font-size:14px;font-weight:600;padding:9px 12px;border:1px solid #765535;border-radius:7px;white-space:nowrap}

/* Keep build and download actions visible in the editor as well as the simulator. */
.app-header{height:auto;min-height:78px;padding-top:12px;padding-bottom:12px;flex-wrap:wrap}.header-actions{flex-wrap:wrap}
.latest-download{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:9px 12px;border:1px solid #ffb347;border-radius:7px;background:#ffb347;color:#21150a;font-size:14px;font-weight:650;text-decoration:none;white-space:nowrap}.latest-download:hover{background:#ffc775}.latest-download:focus-visible,.simulator-link:focus-visible{outline:2px solid #ffd09a;outline-offset:3px}.latest-download[hidden]{display:none!important}
@media(max-width:570px){.header-actions .latest-download{flex:1 0 100%}}