:root{color:#242838;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;--bg:#fff;--panel:#faf8ff;--panel-hi:#f6f6f7;--line:#2428381f;--muted:#6a6d77;--text:#242838;--mint:#ff9020;--orange:#ff9020;--navy:#242838;--goldmohn:#ff9020;--tekapo:#63c1c6;--alizarin:#dd3c57;--peridot:#a1c658;--mono:"JetBrains Mono", Consolas, monospace;background:#fff;font-family:Inter,Segoe UI,sans-serif}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0}button,textarea{font:inherit}button{color:inherit}.app-shell{max-width:1480px;min-height:100vh;margin:0 auto;padding:0 46px 24px}.topbar{border-bottom:1px solid #262e2c;justify-content:space-between;align-items:center;height:68px;display:flex}.brand-lockup{color:#dfe7e3;letter-spacing:.13em;align-items:center;gap:11px;font:700 12px Space Grotesk,Inter,sans-serif;display:flex}.brand-lockup i{color:#68746f;padding:0 2px;font-style:normal}.brand-icon{width:31px;height:31px;color:var(--mint);background:#18221f;border:1px solid #34413d;border-radius:9px;place-items:center;display:grid}.topbar-right{color:#9ca7a2;font:10px var(--mono);letter-spacing:.05em;align-items:center;gap:16px;display:flex}.prototype-tag{color:#a4b4ad;align-items:center;gap:7px;display:flex}.prototype-tag span,.live-dot{background:var(--mint);border-radius:50%;width:6px;height:6px;box-shadow:0 0 12px #8ee0bd78}.topbar-divider{background:#34403c;width:1px;height:15px}.language-label{color:#74817b}.intro-row{justify-content:space-between;align-items:center;padding:37px 0 27px;display:flex}.intro-tools{align-items:end;gap:11px;display:flex}.sample-picker{flex-direction:column;gap:5px;display:flex}.sample-picker select{color:#c8d8d0;background:#1a2421;border:1px solid #35433d;border-radius:6px;outline:none;max-width:220px;padding:7px 27px 7px 9px;font:10px Inter,sans-serif}.sample-picker select:focus{border-color:#658472}.eyebrow,.preview-kicker{font:10px var(--mono);letter-spacing:.13em;color:#88968f}.eyebrow span{color:var(--mint);padding:0 6px}h1{letter-spacing:-.055em;color:#eff5f2;margin:9px 0 8px;font:700 36px Space Grotesk,Inter,sans-serif}h1 em{color:#92a39a;font-style:normal;font-weight:400}.intro-copy{color:#9ba8a2;margin:0;font-size:13px}.workspace{grid-template-columns:minmax(0,1.08fr) minmax(420px,.92fr);align-items:start;gap:22px;display:grid}.editors-column{flex-direction:column;gap:13px;display:flex}.editor-panel{background:var(--panel);border:1px solid var(--line);border-radius:11px;overflow:hidden;box-shadow:0 8px 24px #00000012}.panel-heading{border-bottom:1px solid #293230;justify-content:space-between;align-items:center;height:62px;padding:0 17px;display:flex}.panel-heading-main{align-items:center;gap:11px;display:flex}.step-mark{width:28px;height:28px;color:var(--mint);font:10px var(--mono);background:#20332b;border-radius:8px;place-items:center;display:grid}.job .step-mark{color:var(--orange);background:#382a20}.panel-heading h2,.preview-title h2{letter-spacing:-.01em;margin:0;font:600 13px Space Grotesk,Inter,sans-serif}.panel-heading p{color:#85918b;margin:3px 0 0;font-size:10px}.panel-actions{align-items:center;gap:10px;display:flex}.syntax-badge{color:#9aa9a1;font:9px var(--mono);border:1px solid #35403c;border-radius:4px;padding:4px 6px}.icon-button{color:#a6b1ac;cursor:pointer;border-radius:6px;place-items:center;width:27px;height:27px;transition:background .15s,color .15s;display:grid}.editor-wrap{background:#131918;height:198px;min-height:0;display:flex;overflow:hidden}.job .editor-wrap{height:165px}.line-numbers{color:#52605a;font:11px/20px var(--mono);-webkit-user-select:none;user-select:none;border-right:1px solid #202927;flex-direction:column;flex:0 0 42px;align-items:end;gap:0;padding:14px 9px 14px 0;display:flex;overflow:hidden}.editor-wrap textarea{resize:none;color:#c7d5ce;width:100%;min-width:0;height:100%;min-height:0;font:11px/20px var(--mono);tab-size:2;white-space:pre;caret-color:var(--mint);background:0 0;border:0;outline:none;flex:1;padding:14px 16px;overflow:auto}.asset-chips{flex-wrap:wrap;gap:7px;display:flex}.asset-chips>span{color:#aebbb4;font:9px var(--mono);background:#1c2422;border:1px solid #2c3733;border-radius:6px;align-items:center;gap:6px;padding:4px 7px 4px 4px;display:flex}.asset-chips img{object-fit:contain;background:#fff;border-radius:3px;width:20px;height:20px}.asset-chips small{color:#78877f;font:8px var(--mono)}.asset-chips button{color:#839088;cursor:pointer;background:0 0;border:0;place-items:center;padding:2px;display:grid}.asset-chips button:hover{color:#ef9b8c}.preview-column{background:#171e1e;border:1px solid #293230;border-radius:11px;overflow:hidden;box-shadow:0 8px 24px #00000012}.preview-head{border-bottom:1px solid #293230;justify-content:space-between;align-items:center;min-height:68px;padding:0 18px;display:flex}.preview-kicker{margin-top:3px;font-size:8px}.preview-title h2{font-size:14px}.preview-heading-main{grid-template-columns:28px max-content;align-items:center;gap:0 11px;display:grid}.preview-actions{align-items:center;gap:8px;display:flex}.tab-button,.copy-button{color:#a5b0aa;cursor:pointer;background:#1b2422;border:1px solid #35403d;border-radius:6px;min-height:29px;padding:0 10px;font-size:10px}.tab-button.active{color:#cde7da;background:#24332c;border-color:#405348}.expand-button{color:#bcc9c2;cursor:pointer;background:#1b2422;border:1px solid #35403d;border-radius:6px;align-items:center;gap:6px;min-height:29px;padding:0 9px;font-size:10px;display:flex}.expand-button:hover:not(:disabled){color:var(--mint);border-color:#658472}.expand-button:disabled{opacity:.4;cursor:not-allowed}.canvas-area{background-color:#1a2221;background-image:radial-gradient(#384440 .75px,#0000 .75px);background-size:var(--grid-step,18px) var(--grid-step,18px);background-position:50%;flex-direction:column;justify-content:center;align-items:center;min-height:336px;padding:28px 25px 20px;display:flex}.preview-page{flex-direction:column;align-items:center;width:100%;display:flex}.preview-page+.preview-page{border-top:1px solid #d4ddd7;margin-top:30px;padding-top:22px}.page-heading{color:#68766e;width:min(100%,390px);font:9px var(--mono);align-items:center;gap:9px;margin-bottom:11px;display:flex}.page-heading strong{color:#344239;font-weight:500}.page-heading span:nth-child(2){margin-right:auto}.grid-caption{justify-content:center;padding-top:17px;display:flex}.label-card{background:#dfe5e2;width:min(100%,390px);padding:12px;position:relative;box-shadow:0 12px 28px #00000040}.paper-shadow{background:#fff;width:100%;overflow:hidden;box-shadow:inset 0 0 0 1px #0000000b}.label-svg{width:100%;height:100%;display:block}.image-placeholder rect{fill:#f4f5f3;stroke:#a8b0ab;stroke-width:.45px;stroke-dasharray:1.5 1.2}.image-placeholder path{fill:#cbd2ce}.image-placeholder text{fill:#6b7771;font:2.1px var(--mono)}.crop-mark{border-style:solid;border-color:#94a19a;width:5px;height:5px;position:absolute}.crop-mark.tl{border-width:1px 0 0 1px;top:5px;left:5px}.crop-mark.tr{border-width:1px 1px 0 0;top:5px;right:5px}.crop-mark.bl{border-width:0 0 1px 1px;bottom:5px;left:5px}.crop-mark.br{border-width:0 1px 1px 0;bottom:5px;right:5px}.canvas-caption{color:#8f9d96;font:9px var(--mono);align-items:center;gap:10px;padding-top:18px;display:flex}.grid-legend{color:#82928a;align-items:center;gap:5px;display:inline-flex}.legend-dot-swatch{background-image:radial-gradient(#89978f 1px,#0000 1px);background-size:6px 6px;border:1px solid #34413c;border-radius:3px;width:13px;height:13px}.canvas-caption b{color:#c8d4ce;font-weight:400}.caption-divider{background:#43504b;width:1px;height:12px}.canvas-message{color:#e0a585;text-align:center;flex-direction:column;align-items:center;gap:8px;display:flex}.canvas-message strong{color:#e0e9e4;font-size:12px}.canvas-message span{color:#9ba8a2;font-size:10px}.diagnostics{background:#151c1b;border-top:1px solid #2b3431;padding:15px 18px 16px}.diagnostics-head{color:#9aa69f;font:9px var(--mono);letter-spacing:.08em;justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.status-pill{letter-spacing:.03em;border-radius:4px;align-items:center;gap:5px;padding:4px 6px;font-size:8px;display:flex}.diagnostic-row{color:#a5b2ab;align-items:start;gap:8px;padding:5px 0;font-size:10px;line-height:1.45;display:flex}.diagnostic-dot{background:#80cba7;border-radius:50%;flex:0 0 5px;width:5px;height:5px;margin-top:4px}.footer{color:#64716b;justify-content:space-between;gap:20px;padding:18px 2px 0;font-size:9px;display:flex}.preview-modal{z-index:1000;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#0c1111f5;flex-direction:column;display:flex;position:fixed;inset:0}.preview-modal-toolbar{background:#141b1af2;border-bottom:1px solid #293431;flex:0 0 68px;align-items:center;gap:20px;padding:0 24px;display:flex}.modal-heading{align-items:center;gap:10px;margin-right:auto;display:flex}.modal-heading>div{flex-direction:column;gap:4px;display:flex}.modal-heading strong{color:#e5eee9;font:600 13px Space Grotesk,Inter,sans-serif}.modal-heading span:not(.modal-live-dot){color:#85938c;font-size:10px}.modal-live-dot{background:var(--mint);border-radius:50%;flex:0 0 7px;width:7px;height:7px;box-shadow:0 0 12px #8ee0bd78}.modal-controls{align-items:center;gap:7px;display:flex}.modal-controls button,.modal-close{color:#c0cec7;cursor:pointer;background:#1b2422;border:1px solid #35413d;border-radius:6px;place-items:center;min-width:34px;height:32px;display:grid}.modal-controls button:hover,.modal-close:hover{color:var(--mint);border-color:#658472}.modal-controls .fit-button{min-width:70px;padding:0 10px;font-size:10px}.zoom-value{color:#b7c6bf;text-align:center;min-width:44px;font:10px var(--mono)}.modal-close{margin-left:2px}.preview-modal-canvas{background-color:#111918;background-image:radial-gradient(#35403d .8px,#0000 .8px);background-size:var(--grid-step) var(--grid-step);background-position:var(--grid-x) var(--grid-y);cursor:grab;touch-action:none;flex:1;place-items:center;min-height:0;display:grid;overflow:hidden}.preview-modal-canvas.dragging{cursor:grabbing}.modal-label-shell{transform-origin:50%;pointer-events:none;background:#fff;flex:none;width:100%;overflow:hidden;box-shadow:0 18px 60px #0009,0 0 0 12px #dfe5e2}.modal-page-stack{transform-origin:50%;pointer-events:none;flex-direction:column;gap:38px;display:flex}.modal-page{flex-direction:column;align-items:center;width:100%;display:flex}.modal-page .page-heading{margin-bottom:20px}.modal-page-shell{width:100%}.preview-modal-footer{color:#84918b;font:9px var(--mono);border-top:1px solid #293431;flex:0 0 42px;justify-content:center;align-items:center;gap:9px;display:flex}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (width<=1000px){.app-shell{padding:0 24px 24px}.workspace{grid-template-columns:minmax(0,1fr) minmax(330px,.9fr);gap:15px}}@media (width<=760px){.app-shell{padding:0 16px 22px}.intro-row{align-items:start;padding:29px 0 22px}h1{font-size:31px}.intro-tools{flex-direction:column-reverse;align-items:flex-end;gap:7px}.live-chip{margin-top:0;font-size:8px}.sample-picker select{max-width:170px}.workspace{grid-template-columns:1fr}.preview-column{grid-row:1}.editors-column{grid-row:2}.footer{flex-direction:column;gap:5px}}@media (width<=430px){.topbar-right{gap:9px}.language-label,.topbar-divider{display:none}.intro-copy{max-width:250px;line-height:1.5}.live-chip{padding:7px 8px}.preview-head{padding:12px}.canvas-area{min-height:290px;padding:20px 14px}.panel-heading{padding:0 12px}.preview-modal-toolbar{flex-basis:60px;gap:8px;padding:0 10px}.modal-heading strong{font-size:11px}.modal-heading span:not(.modal-live-dot){font-size:9px}.modal-controls{gap:4px}.modal-controls button,.modal-close{min-width:30px;height:30px}.modal-label-shell{box-shadow:0 14px 40px #0009,0 0 0 7px #dfe5e2}}body{color:var(--navy);background:var(--bg)}.topbar{background:var(--navy);border-color:#494b58;border-radius:0 0 8px 8px;padding:0 16px}.brand-lockup{color:#fff}.brand-lockup img{object-fit:contain;width:48px;height:32px;display:block}.brand-lockup i,.language-label{color:#afb0b5}.brand-icon{color:var(--goldmohn);background:0 0;border-color:#0000;border-radius:6px}.topbar-right,.prototype-tag{color:#dee1f7}.prototype-tag span,.live-dot{background:var(--tekapo);box-shadow:none}.topbar-divider{background:#494b58}.sample-picker>span,.eyebrow,.preview-kicker{color:#6a6d77}.sample-picker select{color:var(--navy);background:#fff;border-color:#d2d3d6;border-radius:5px}.sample-picker select:focus{border-color:var(--goldmohn);outline:2px solid #ff902047}h1{color:var(--navy)}h1 em{color:#6a6d77}.intro-copy{color:#494b58}.editor-panel,.preview-column{background:var(--panel);border-color:var(--line);border-radius:8px;box-shadow:0 1px 3px #24283814}.panel-heading{border-color:#24283814}.step-mark,.job .step-mark{color:var(--navy);background:#ffdcc3;border-radius:6px}.panel-heading h2,.preview-title h2{color:var(--navy)}.panel-heading p{color:#6a6d77}.syntax-badge{color:#494b58;border-color:#d2d3d6}.icon-button{color:#494b58;border-radius:5px}.icon-button:hover{color:#b85f10;background:#fff4e8}.editor-wrap{background:var(--navy)}.line-numbers{color:#afb0b5;border-color:#494b58}.editor-wrap textarea{color:#f6f6f7;caret-color:var(--goldmohn)}.editor-wrap textarea:focus{box-shadow:inset 0 0 0 1px #ff902080}.asset-chips>span{color:#494b58;background:#fff;border-color:#d2d3d6;border-radius:6px}.asset-chips small,.asset-chips button{color:#6a6d77}.preview-head{border-color:#24283814}.tab-button,.copy-button,.expand-button{color:var(--navy);background:#fff;border-color:#d2d3d6;border-radius:5px}.tab-button.active{border-color:var(--goldmohn);color:#653300;background:#ffdcc3}.expand-button{border-color:var(--goldmohn);background:var(--goldmohn);color:#1c1c1c}.expand-button:hover:not(:disabled){color:#fff;background:#d9761a;border-color:#d9761a}.canvas-area{background-color:#f6f6f7;background-image:radial-gradient(#d2d3d6 .75px,#0000 .75px)}.label-card{background:#e4e7fd;border-radius:4px;box-shadow:0 1px 3px #2428381f}.preview-page+.preview-page{border-color:#2428381f}.page-heading{color:#6a6d77}.page-heading strong{color:var(--navy)}.canvas-caption,.grid-legend{color:#6a6d77}.legend-dot-swatch{background-image:radial-gradient(#8c8e96 1px,#0000 1px);border-color:#afb0b5}.canvas-caption b{color:var(--navy)}.caption-divider{background:#d2d3d6}.canvas-message{color:#b85f10}.canvas-message strong{color:var(--navy)}.canvas-message span{color:#6a6d77}.diagnostics{background:#faf8ff;border-color:#2428381f}.diagnostics-head{color:#6a6d77}.status-pill.ok{color:#47651d;background:#eef4e4}.status-pill.error{color:#a82740;background:#ffeaed}.diagnostic-row{color:#494b58}.diagnostic-row.warning{color:#8a4d0b}.diagnostic-row.error{color:#b32742}.diagnostic-dot{background:#6f9430}.warning .diagnostic-dot{background:#ff9020}.error .diagnostic-dot{background:var(--alizarin)}.footer{color:#6a6d77}.preview-modal{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#f6f6f7f7}.preview-modal-toolbar{background:#fffffff5;border-color:#d2d3d6}.modal-heading strong{color:var(--navy)}.modal-heading span:not(.modal-live-dot){color:#6a6d77}.modal-live-dot{background:var(--tekapo);box-shadow:none}.modal-controls button,.modal-close{color:var(--navy);background:#fff;border-color:#d2d3d6;border-radius:5px}.modal-controls button:hover,.modal-close:hover{border-color:var(--goldmohn);color:#b85f10}.zoom-value{color:#494b58}.preview-modal-canvas{background-color:#f6f6f7;background-image:radial-gradient(#d2d3d6 .8px,#0000 .8px)}.modal-label-shell{box-shadow:0 1px 3px #2428381f,0 0 0 10px #e4e7fd}.modal-page .page-heading{color:#6a6d77}.modal-page .page-heading strong{color:var(--navy)}.preview-modal-footer{color:#6a6d77;border-color:#d2d3d6}.preview-modal-footer span{color:#8c8e96}.sample-picker select:focus-visible,button:focus-visible,.icon-button:focus-visible{outline-offset:2px;outline:2px solid #ff90208c}.footer{display:block}.prototype-disclaimer{color:#494b58;border-top:1px solid #d2d3d6;margin:0;padding:12px 2px 0;font-size:10px;line-height:1.5}.footer-meta{justify-content:space-between;align-items:center;gap:16px;padding:8px 2px 0;display:flex}.footer-attribution{white-space:nowrap;align-items:center;gap:12px;display:inline-flex}.footer-credit{color:var(--navy);white-space:nowrap;font-weight:600}.footer-attribution a{color:#494b58;text-underline-offset:2px;text-decoration:underline}.footer-attribution a:hover{color:#b85f10}.sample-picker>span{color:#b85f10;font:700 9px var(--mono);letter-spacing:.1em}.sample-picker select{border:1px solid var(--goldmohn);background:#fff4e8;border-left-width:4px;border-radius:6px;min-width:260px;min-height:40px;padding:9px 32px 9px 11px;font:600 12px Inter,sans-serif;box-shadow:0 1px 3px #2428381a}@media (width<=430px){.modal-label-shell{box-shadow:0 1px 3px #2428381f,0 0 0 7px #e4e7fd}.footer-meta{flex-direction:column;align-items:flex-start;gap:5px}.sample-picker select{width:min(260px,46vw);min-width:0}}