@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;450;500;600;700&display=swap');
:root{--ink:#17171a;--text-2:#5e5e66;--text-3:#6e6e76;--line:#e6e6e3;--canvas:#f3f3f1;--accent:#e8590c;--cut:#e0245e;--crease:#2f6fdf;font-family:'IBM Plex Sans',system-ui,sans-serif;color:var(--ink);font-size:13px}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,input,select{font:inherit;color:inherit}button{cursor:pointer;border:1px solid var(--line);background:#fff;border-radius:6px;min-height:30px;padding:5px 10px;display:inline-flex;align-items:center;justify-content:center;gap:7px;transition:background .15s}button:hover{background:#ededeb}button:disabled{opacity:.3;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}input,select{border:1px solid var(--line);border-radius:5px;background:white;padding:7px;width:100%;min-width:0}input[type=range]{accent-color:var(--ink);padding:0;height:15px;border:0;cursor:pointer}input[type=color]{height:30px;padding:3px;width:35px}.icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.topbar{height:56px;display:flex;align-items:center;padding:0 18px;gap:15px;border-bottom:1px solid var(--line);background:white}.logo{display:flex;align-items:center;gap:8px;font-weight:600;font-size:18px;letter-spacing:-.5px}.logo .icon{width:23px;height:23px}.divider{height:22px;width:1px;background:var(--line)}.title{max-width:205px;border:0;padding:0;font-size:12px;background:transparent}.save{font-size:11px;color:var(--text-3);white-space:nowrap}.history{display:flex;gap:2px}.ghost{border:0;background:transparent;padding:5px 7px}.view-switch{margin:auto;display:flex;background:var(--canvas);padding:3px;border:1px solid var(--line);border-radius:7px}.view-switch button{border:0;min-height:27px;background:transparent;font-size:12px;padding:4px 13px;color:var(--text-2)}.view-switch button.active{background:white;color:var(--ink);box-shadow:0 1px 3px #0001}.pill{border-radius:30px;padding:6px 14px;white-space:nowrap}.primary{background:var(--ink);border-color:var(--ink);color:white}.primary:hover{background:#353538}.upgrade{border-color:#d6d6d2;font-size:12px}.dot{width:5px;height:5px;background:var(--accent);border-radius:50%}.workspace{height:calc(100dvh - 56px);display:flex}.rail{width:70px;background:white;border-right:1px solid var(--line);padding:15px 7px;display:flex;flex-direction:column;gap:9px;flex-shrink:0}.rail button{flex-direction:column;border:0;color:var(--text-3);font-size:10px;gap:6px;min-height:56px;background:transparent}.rail button.active{background:#eeeeeb;color:var(--ink)}.rail .bottom{margin-top:auto}.panel{width:292px;flex-shrink:0;border-right:1px solid var(--line);background:white;overflow:auto}.panel-top{padding:21px 20px 16px;border-bottom:1px solid var(--line)}h1{font-size:15px;margin:0 0 6px;font-weight:600}p{line-height:1.6;margin:5px 0}.muted{color:var(--text-3);font-size:11px}.section{padding:19px 20px;border-bottom:1px solid var(--line)}.section h2{font-size:12px;margin:0 0 15px;font-weight:600}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.section-header h2{margin:0}.segments{display:flex;background:var(--canvas);padding:2px;border-radius:5px}.segments button{background:transparent;min-height:24px;border:0;font-size:11px;padding:3px 9px}.segments .active{background:white;box-shadow:0 1px 2px #0001}.dim-row{margin-bottom:18px}.dim-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.dim-label label{font-size:12px}.stepper{display:flex;align-items:center;border:1px solid var(--line);border-radius:5px;width:142px;height:30px}.stepper button{border:0;min-height:25px;padding:2px 8px;background:transparent}.stepper input{border:0;text-align:center;font-family:'IBM Plex Mono',monospace;padding:0;width:50px;-moz-appearance:textfield}.stepper input::-webkit-inner-spin-button{display:none}.stepper span{font-size:10px;color:var(--text-3);margin-right:6px}.mono{font-family:'IBM Plex Mono',monospace;font-size:11px}.hint-box{padding:10px;background:#f7f7f5;border-radius:5px;font-size:11px;color:var(--text-2)}.preset{display:flex;width:100%;justify-content:space-between;text-align:left;padding:10px 0;border:0;border-radius:0;font-size:11px;min-height:41px;border-bottom:1px solid #f0f0ee}.preset:last-child{border:0}.preset span{font-size:10px;color:var(--text-3)}.result-row{display:flex;justify-content:space-between;margin:13px 0;font-size:11px}.tag{background:#eff4ef;color:#41784d;border-radius:4px;padding:3px 6px;font-size:10px}.canvas-area{flex:1;display:flex;min-width:0}.canvas-pane{flex:1;min-width:0;display:flex;flex-direction:column;position:relative;background:var(--canvas)}.canvas-pane+.canvas-pane{border-left:1px solid var(--line)}.canvas-toolbar{height:47px;background:#fafaf9;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px;padding:0 17px;flex-shrink:0}.canvas-toolbar strong{font-size:11px;font-weight:500}.canvas-toolbar .code{font-size:9px;color:var(--text-3);margin-right:auto}.tool-tabs{display:flex;gap:2px;margin-left:auto}.tool-tabs button{font-size:10px;min-height:25px;padding:4px 7px;background:transparent;border:0;color:var(--text-3)}.tool-tabs button.active{background:#e9e9e6;color:var(--ink)}.stage{flex:1;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}.dieline-stage{background-image:radial-gradient(#d4d4cf .7px,transparent .7px);background-size:16px 16px}.artboard{width:88%;background:#fff;box-shadow:0 2px 8px #00000008;border:1px solid #e8e8e4;padding:20px 12px;position:relative}.artboard svg{width:100%;display:block;overflow:visible}.artboard::before,.artboard::after{content:'+';position:absolute;color:#aaa;font:18px monospace;top:-11px;left:-7px}.artboard::after{left:auto;right:-7px;top:auto;bottom:-10px}.stage-label{position:absolute;top:23px;left:23px;color:#898982;font-size:9px;letter-spacing:1.5px}.canvas-hint{position:absolute;bottom:18px;left:20px;color:#8c8c87;font-size:10px}.statusbar{height:40px;flex-shrink:0;border-top:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:0 16px;background:#fafaf9;font-size:10px}.legend{display:flex;align-items:center;gap:5px;white-space:nowrap}.line{width:15px;border-top:1px solid var(--cut)}.line.fold{border-top:1px dashed var(--crease)}.ready{color:#1f8a4c;display:flex;align-items:center;gap:4px;margin-left:auto}.zoom{display:flex;align-items:center;gap:3px;margin-left:auto}.zoom button{padding:2px 5px;min-height:25px;background:transparent;border:0}.scene{perspective:1000px;cursor:grab;background:radial-gradient(ellipse at 50% 45%,#fafaf8 0,#eeeee9 80%)}.floor{position:absolute;width:150%;height:90%;bottom:-34%;background-image:linear-gradient(#cfcfc644 1px,transparent 1px),linear-gradient(90deg,#cfcfc644 1px,transparent 1px);background-size:35px 35px;transform:rotateX(65deg);mask-image:linear-gradient(transparent,#000)}.box-shadow{position:absolute;width:200px;height:70px;background:#0002;filter:blur(23px);border-radius:50%;transform:translate(10px,140px)}.box{position:relative;width:190px;height:255px;transform-style:preserve-3d;transform:rotateX(-16deg) rotateY(-32deg);transition:transform .3s}.face{position:absolute;border:1px solid #fff2;display:flex;align-items:center;justify-content:center;backface-visibility:hidden;overflow:hidden}.face.front,.face.back{width:100%;height:100%}.face.front{transform:translateZ(var(--depth))}.face.back{transform:rotateY(180deg) translateZ(var(--depth))}.face.left,.face.right{width:calc(var(--depth)*2);height:100%;left:calc(50% - var(--depth))}.face.right{transform:rotateY(90deg) translateZ(95px);filter:brightness(.82)}.face.left{transform:rotateY(-90deg) translateZ(95px);filter:brightness(.85)}.face.top,.face.bottom{width:100%;height:calc(var(--depth)*2);top:calc(50% - var(--depth));filter:brightness(1.12)}.face.top{transform:rotateX(90deg) translateZ(127.5px)}.face.bottom{transform:rotateX(-90deg) translateZ(127.5px)}.pack-art{width:100%;height:100%;position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;color:#f8f2dd;padding:22px 10px}.brand-small{font-size:9px;letter-spacing:3px}.botanical{width:125px;height:120px;margin:12px 0 0;opacity:.85}.pack-brand{font:25px Georgia,serif;line-height:1.1;white-space:pre-line;letter-spacing:1px}.pack-product{font-size:7px;letter-spacing:2px;margin-top:12px}.pack-caption{font-size:6px;line-height:1.8;letter-spacing:1px;margin-top:auto}.pack-rule{width:23px;height:1px;background:currentColor;margin:13px 0}.side-copy{font-size:7px;line-height:2.3;text-align:left;padding:18px;letter-spacing:.4px}.scene-controls{position:absolute;right:15px;top:15px;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:8px;background:white;z-index:3}.scene-controls button{border:0;background:transparent;padding:7px;min-height:29px}.scene-label{position:absolute;top:24px;left:22px;font-size:9px;letter-spacing:1.4px;color:#8b8b83}.foldbar{gap:12px}.foldbar input{flex:1}.foldbar button{border:0;background:transparent}.model-row{width:100%;justify-content:flex-start;text-align:left;border:0;border-radius:6px;padding:12px 8px;margin-bottom:4px;gap:12px}.model-row.active{background:#f0f0ed}.model-row .icon{height:32px;width:32px}.model-row strong{display:block;font-size:11px;font-weight:500}.model-row small{display:block;font-size:9px;color:var(--text-3);margin-top:5px}.search{margin-bottom:12px}.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.tiles button{font-size:10px;flex-direction:column;padding:9px 2px}.field{display:block;font-size:11px;margin-bottom:12px}.field input,.field select{margin-top:6px;font-size:12px}.color-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:11px}.layer{display:flex;gap:6px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line);font-size:11px}.layer span{flex:1}.layer button{border:0;min-height:24px;padding:2px 4px}.wide{width:100%;margin:5px 0}.popover{position:absolute;right:16px;top:50px;width:305px;background:white;border:1px solid var(--line);border-radius:10px;padding:7px;box-shadow:0 12px 32px -12px #17171a44;z-index:20}.export-row{display:flex;width:100%;padding:12px 8px;border:0;text-align:left;justify-content:flex-start}.export-row div{flex:1}.export-row strong{font-size:12px;display:block;font-weight:500}.export-row small{display:block;font-size:10px;color:var(--text-3);margin-top:4px}.badge{font-size:9px;background:#242426;color:white;padding:2px 5px;border-radius:4px}.modal-overlay{position:fixed;inset:0;background:#17171a55;display:grid;place-items:center;z-index:100;backdrop-filter:blur(3px)}.modal{width:650px;background:white;border-radius:16px;padding:30px;position:relative;box-shadow:0 24px 64px -24px #0005}.modal h2{font-size:26px;letter-spacing:-.8px;margin:10px 0}.close{position:absolute;right:15px;top:15px;border:0}.plans{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:25px 0 15px}.plan{border:1px solid var(--line);border-radius:10px;padding:20px}.plan.pro{border-color:var(--ink)}.price{font-size:26px;font-weight:500;margin:14px 0}.price small{font-size:11px;color:var(--text-3);font-weight:400}.plan p{font-size:12px;margin:12px 0}.toast{position:fixed;bottom:60px;left:50%;transform:translateX(-50%);padding:12px 20px;border:1px solid var(--line);border-radius:8px;background:white;box-shadow:0 5px 20px #0001;z-index:120;font-size:12px}.mobile-gate{display:none}.panel-note{background:#fff9ed;border:1px solid #efe4cb;padding:10px;border-radius:6px;font-size:10px;line-height:1.6;color:#886523}.face-elements{position:absolute;inset:0}.design-element{cursor:move}.empty{padding:20px 0;text-align:center;color:var(--text-3);font-size:11px}.project-copy{display:flex;align-items:center;gap:6px;margin:8px 0}.project-copy button:first-child{flex:1;text-align:left;justify-content:flex-start}.rotation{animation:rotate 20s linear infinite}@keyframes rotate{to{transform:rotateX(-16deg) rotateY(328deg)}}@media(max-width:1200px){.save{display:none}.topbar{gap:8px;padding:0 12px}.title{max-width:160px}.panel{width:260px}.canvas-toolbar{padding:0 9px;gap:3px}.code{display:none}.tool-tabs button{padding:4px 5px;font-size:9px}.statusbar{gap:6px;padding:0 10px}.ready{font-size:9px}.topbar .upgrade{font-size:11px;padding:6px 9px}}@media(max-width:980px){.title{max-width:125px}.topbar .divider,.history{display:none}.panel{width:238px}.canvas-hint{font-size:8px}.tool-tabs{gap:0}.tool-tabs button{padding:4px}.statusbar .legend{font-size:9px;gap:3px}.box{scale:.8}.topbar .ghost{font-size:11px}.topbar .pill{padding:6px 9px}}@media(max-width:767px){.topbar,.workspace{display:none}.mobile-gate{display:flex;min-height:100dvh;background:var(--canvas);align-items:center;justify-content:center;flex-direction:column;padding:35px;text-align:center}.mobile-gate .icon{width:50px;height:50px;margin:20px}.mobile-gate h1{font-size:25px;max-width:330px}.mobile-gate p{max-width:350px;color:var(--text-2)}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.box{width:var(--box-w,190px);height:var(--box-h,255px)}.face.right{transform:rotateY(90deg) translateZ(calc(var(--box-w,190px)/2))}.face.left{transform:rotateY(-90deg) translateZ(calc(var(--box-w,190px)/2))}.face.top{transform:rotateX(90deg) translateZ(calc(var(--box-h,255px)/2))}.face.bottom{transform:rotateX(-90deg) translateZ(calc(var(--box-h,255px)/2))}
/* Kadoin workflow: horizontal steps, quieter canvas, contextual inspector. */
.topbar{height:64px;padding:0 24px;gap:18px}.logo{font-size:20px}.brand-wordmark{display:flex;flex-direction:column;align-items:flex-start;gap:1px;line-height:1}.brand-wordmark strong{font-size:15px;font-weight:650;letter-spacing:-.45px}.brand-wordmark small{font-size:8px;font-weight:600;letter-spacing:1.45px;text-transform:uppercase;color:var(--text-3)}.title{max-width:240px;width:230px}.workspace{height:calc(100dvh - 64px);display:grid;grid-template-columns:304px minmax(0,1fr);grid-template-rows:58px minmax(0,1fr)}.rail{grid-column:1/-1;grid-row:1;width:auto;flex-direction:row;align-items:center;border-right:0;border-bottom:1px solid var(--line);padding:0 24px;gap:9px;background:#fafaf8}.workflow-label{font-size:9px;letter-spacing:1.5px;color:var(--text-3);margin-right:16px}.rail>button[role=tab]{flex-direction:row;font-size:12px;min-height:34px;gap:8px;padding:5px 13px;color:var(--text-2)}.rail>button[role=tab].active{background:#e8e8e2;color:var(--ink)}.step-number{display:inline-grid;place-items:center;border:1px solid #d9d9d1;border-radius:50%;width:20px;height:20px;font:10px 'IBM Plex Mono',monospace}.rail .active .step-number{background:var(--ink);color:white;border-color:var(--ink)}.rail .view-switch{margin:0 0 0 auto}.rail .view-switch button{font-size:11px;padding:3px 10px}.rail .bottom{margin:0;min-height:32px;padding:7px}.panel{grid-row:2;grid-column:1;width:100%}.canvas-area{grid-column:2;grid-row:2;gap:12px;padding:14px;background:#ebebe6}.canvas-pane{border:1px solid #deded7;border-radius:9px;overflow:hidden}.canvas-pane+.canvas-pane{border-left:1px solid #deded7}.canvas-toolbar{height:auto;min-height:44px;flex-wrap:wrap;padding:9px 12px;row-gap:6px}.canvas-toolbar strong{font-size:12px}.panel-top{padding:25px 22px 21px}.eyebrow{display:block;font-size:9px;letter-spacing:1.5px;color:var(--text-3);margin-bottom:10px}.panel-top h1{font-size:20px;font-weight:500;letter-spacing:-.65px;line-height:1.25;margin-bottom:9px}.panel-top p{font-size:12px}.section{padding:20px 22px}.section h2{font-size:12px}.dim-label label{font-size:13px}.artboard{width:87%;padding:30px 16px}.stage-label,.scene-label{font-size:9px;letter-spacing:1px}.statusbar{height:43px}.print-check{font-size:10px;border:0;background:transparent;color:#48714c;gap:3px;margin-left:auto;padding:4px}.print-check .icon{width:13px;height:13px}.field-error{font-size:11px;color:#ad2929;line-height:1.4;margin:6px 0 0}input[aria-invalid=true]{outline:1px solid #c62828}.position-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.inspector-actions{display:flex;gap:5px;flex-wrap:wrap}.inspector-actions button{font-size:10px}.layer .layer-name{flex:1;text-align:left;justify-content:flex-start;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:160px;background:transparent;font-size:11px}.layer.selected{border-left:2px solid var(--accent);padding-left:6px;background:#faf8f3}.element-inspector{background:#fafaf7}.tool-tabs button{min-height:28px}.segments button{min-height:28px}.canvas-hint{max-width:calc(100% - 35px);line-height:1.5}.modal{max-width:calc(100vw - 40px);max-height:calc(100dvh - 40px);overflow:auto}.save{min-width:80px}.topbar>.ghost{font-size:12px}@media(min-width:1400px){.canvas-pane:first-child:not(:last-child){flex:1.1}.panel-top{padding-top:30px}}@media(max-width:1200px){.topbar{gap:10px;padding:0 17px}.title{width:185px;max-width:185px}.workspace{grid-template-columns:276px minmax(0,1fr)}.rail{padding:0 17px}.workflow-label{margin-right:3px}.rail>button[role=tab]{padding:5px 8px}.canvas-area{padding:10px;gap:8px}.canvas-toolbar .code{display:none}.canvas-toolbar .tool-tabs{margin-left:0}.canvas-toolbar{justify-content:space-between}.section{padding:18px}.panel-top{padding:23px 18px}.statusbar{gap:5px;padding:0 8px}.statusbar .legend{font-size:9px}.print-check{font-size:9px;padding:3px}.zoom .mono{font-size:10px}.brand-wordmark strong{font-size:14px}}@media(max-width:980px){.workflow-label{display:none}.workspace{grid-template-columns:252px minmax(0,1fr)}.rail{gap:3px;padding:0 12px}.rail>button[role=tab]{font-size:11px;padding:4px 7px}.rail .view-switch button{padding:4px 7px}.topbar .title{width:165px;max-width:165px}.topbar{gap:8px}.history{display:flex}.canvas-area{padding:8px;gap:6px}.canvas-toolbar{padding:7px 8px}.canvas-toolbar strong{font-size:11px}.canvas-toolbar .tool-tabs{width:100%;justify-content:flex-start}.statusbar{flex-wrap:wrap;height:56px;gap:4px}.canvas-hint{font-size:9px;left:12px}.canvas-hint,.scene-label{letter-spacing:0}.box{scale:.7}.panel-top h1{font-size:19px}}@media(max-width:767px){.topbar,.workspace{display:none}}
.design-element.is-selected{filter:drop-shadow(0 0 .7px #e8590c);outline:1px solid #e8590c;outline-offset:1px}input:disabled{background:#eeeeea;color:var(--text-3);cursor:not-allowed}@media(max-width:980px) and (min-width:768px){.scene .box{scale:.72!important}}
/* Functional studio controls */
textarea{font:inherit;color:inherit;resize:vertical;min-height:54px;border:1px solid var(--line);border-radius:5px;padding:8px;width:100%;background:white;line-height:1.5}textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.workflow-tabs{display:flex;gap:8px;align-items:center}.workflow-tabs>button{border:0;background:transparent;min-height:34px;font-size:12px;padding:5px 13px;gap:8px;color:var(--text-2)}.workflow-tabs>button.active{background:#e8e8e2;color:var(--ink)}.local-mode{border:1px solid #e7d5b2;background:#fcf7e9;color:#826124;font-size:10px;white-space:nowrap;padding:4px 8px;border-radius:5px}.side-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.side-tabs button{font-size:11px;min-height:30px;background:#f7f7f4;border-color:transparent}.side-tabs .active{border-color:#c3c3b8;background:#e9e9e3}.tiles{grid-template-columns:repeat(3,1fr)}.scene{background:radial-gradient(ellipse at 50% 45%,#fafaf8,#eaeae4)}#webgl-viewer{position:absolute;inset:0;width:100%;height:100%}#webgl-viewer canvas{display:block;width:100%;height:100%;touch-action:none}#lighting{position:absolute;right:12px;bottom:13px;width:78px;padding:4px;border:0;background:#ffffffcc;font-size:10px;z-index:2}.scene-controls{z-index:3}.scene-label,.scene .canvas-hint{pointer-events:none}.scene .canvas-hint{max-width:calc(100% - 100px)}.artboard svg{height:auto}.issue-row{width:100%;justify-content:flex-start;text-align:left;padding:12px;margin:7px 0;background:#fffaf0;border-color:#eadcbd;line-height:1.5}.shape-options{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:20px 0}.shape-options button{min-height:65px}.local-otp{border:1px dashed #b8b8aa;background:#f5f5ed;padding:15px;border-radius:8px;margin:20px 0}.local-otp strong{font-size:23px;letter-spacing:5px;margin-left:10px}.local-otp p{font-size:11px;color:var(--text-3)}.webgl-error{max-width:260px;padding:25px;font-size:13px;color:var(--text-2);margin:auto;line-height:1.6}.layer .is-hidden{opacity:.35}.layer[draggable=true]{cursor:grab}.layer-name{min-width:0}.cloud-list .project-copy button{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.foldbar{gap:7px}.foldbar .ghost{padding:4px}.zoom .ghost{padding:2px 3px}.zoom .icon{width:12px;height:12px}.section .position-grid input{min-height:32px}.section .field textarea{margin-top:6px}.modal .field input,.modal .field select{height:38px}.modal h2{margin-right:20px}.statusbar .print-check{white-space:nowrap}.plan .wide{font-size:12px}@media(max-width:1200px){.workflow-tabs{gap:3px}.workflow-tabs>button{padding:5px 8px}.topbar .local-mode{font-size:9px;padding:4px}.title{max-width:160px;width:160px}.topbar{gap:8px}}@media(max-width:980px){.workflow-tabs{gap:1px}.workflow-tabs>button{padding:4px 6px;font-size:11px}.topbar .title{width:135px;max-width:135px}.topbar .local-mode{display:none}.scene .canvas-hint{display:none}.statusbar .print-check{font-size:9px}.scene-label{font-size:8px;left:12px}.rail{gap:5px}.rail .view-switch{margin-left:auto}}
.rail .workflow-tabs>button{flex-direction:row;min-height:34px;gap:8px}.rail .workflow-tabs .active .step-number{background:var(--ink);color:white}.rail>.ghost{flex-direction:row;min-height:32px}.side-tabs button:disabled{cursor:not-allowed}.modal .local-otp p{margin-bottom:0}
.boot-screen{height:100dvh;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;background:var(--canvas)}.boot-screen strong{font-size:25px;letter-spacing:-1px}.boot-screen span{font-size:13px;color:var(--text-3)}details{margin-top:14px;font-size:11px}summary{cursor:pointer;padding:8px 0;color:var(--text-3)}

/* Shared custom choice menus */
.choice-field{position:relative;margin:0 0 13px}.choice-label{display:block;margin-bottom:6px;font-size:11px;color:var(--text-2)}.choice-select{position:relative}.choice-trigger{display:flex;width:100%;height:40px;justify-content:space-between;padding:7px 10px;border:1px solid var(--line);border-radius:7px;background:#fff;text-align:left}.choice-trigger:hover,.choice-trigger[aria-expanded=true]{border-color:#b9b9af;background:#fff}.choice-trigger:focus-visible,.choice-option:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.choice-current{display:flex;align-items:center;gap:9px;min-width:0}.choice-current>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.choice-current>.icon{color:var(--text-2)}.choice-trigger>.icon{width:15px;height:15px;color:var(--text-3);transition:transform .16s}.choice-select[data-open=true] .choice-trigger>.icon{transform:rotate(180deg)}.choice-menu{position:fixed;z-index:220;overflow:auto;overscroll-behavior:contain;border:1px solid #d9d9d2;border-radius:10px;background:#fff;box-shadow:0 18px 45px -20px #17171a55,0 4px 12px #17171a12;padding:5px;animation:choice-in .13s ease-out}.choice-menu[hidden]{display:none}.choice-options{overflow:auto;max-height:inherit}.choice-option{display:flex;width:100%;min-height:48px;justify-content:flex-start;text-align:left;border:0;border-radius:7px;padding:7px 9px;gap:10px;background:transparent}.choice-option:hover,.choice-option:focus-visible{background:#f5f5f1}.choice-option.selected{background:#f4f2ed}.choice-option>.icon:first-child{width:17px;height:17px;color:var(--text-2)}.choice-option>.icon:last-child{width:16px;height:16px;color:var(--accent);margin-left:auto}.choice-copy{display:grid;gap:2px;min-width:0;flex:1}.choice-copy strong{font-size:12px;font-weight:500;line-height:1.3}.choice-copy small{font-size:10px;color:var(--text-3);line-height:1.35}.choice-search{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:7px;padding:5px 6px 8px;background:#fff;border-bottom:1px solid var(--line);margin-bottom:4px}.choice-search>.icon{width:15px;height:15px;color:var(--text-3)}.choice-search input{height:32px;border:0;padding:4px;font-size:12px;outline:none}.choice-search input:focus-visible{outline:0}.choice-field .choice-menu{max-height:min(340px,70vh)}.modal .choice-trigger{height:42px}.modal .choice-menu{z-index:230}.modal-overlay{padding:20px}.modal{max-height:calc(100dvh - 40px);overflow:auto}.modal .choice-field{margin-bottom:15px}.choice-menu .choice-option[hidden]{display:none}@keyframes choice-in{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.choice-menu{animation:none}.choice-trigger>.icon{transition:none}}
.lighting-control{position:absolute;right:13px;bottom:13px;z-index:5;display:flex;align-items:center;gap:7px;padding:4px 5px 4px 9px;border:1px solid #d9d9d2;border-radius:9px;background:#ffffffed;box-shadow:0 5px 18px #17171a12}.lighting-title{font-size:9px;color:var(--text-3);white-space:nowrap;padding:0 3px}.lighting-modes{display:flex;align-items:center;gap:2px}.lighting-mode{min-height:29px;padding:4px 7px;gap:4px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--text-2);font-size:9px;white-space:nowrap}.lighting-mode .icon{width:13px;height:13px}.lighting-mode:hover{background:#f2f1ec}.lighting-mode.active{background:#242426;color:#fff}.lighting-mode.active:hover{background:#353538}.scene[data-lighting="Studio"]{background:radial-gradient(ellipse at 50% 42%,#f7f4eb 0%,#d2cdc0 62%,#a7a69f 100%)}.scene[data-lighting="Gelap"]{background:radial-gradient(ellipse at 50% 42%,#555650 0%,#353631 68%,#242520 100%)}.scene[data-lighting="Gelap"] .scene-label,.scene[data-lighting="Gelap"] .canvas-hint{color:#efeee8}.scene[data-lighting="Gelap"] .scene-controls button{background:#f5f4eddd;color:#242520}@media(max-width:980px) and (min-width:768px){.lighting-control{right:8px;bottom:8px;gap:3px;padding:3px}.lighting-title{display:none}.lighting-mode{padding:4px 6px}}
.dieline-focus{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border:1px solid #f0c7b2;border-radius:999px;background:#fff8f3;color:#8f3510;font-size:10px;white-space:nowrap}.dieline-focus strong{font-weight:650}.dieline-side-label{filter:drop-shadow(0 1px 1px #0002)}
@media(max-width:980px){.dieline-focus{font-size:9px;padding:3px 7px}}
/* Dialogs and pop-up menus share a compact, calm surface with clear hierarchy. */
.modal-overlay{padding:24px;background:rgba(23,23,26,.52);backdrop-filter:blur(5px)}
.modal{width:min(540px,100%);max-height:calc(100dvh - 48px);overflow:auto;padding:26px;border:1px solid #e8e7e2;border-radius:18px;box-shadow:0 28px 80px -30px #0008,0 8px 24px #17171a18;overscroll-behavior:contain}
.modal-heading{display:flex;align-items:center;gap:13px;padding:0 38px 19px 0;border-bottom:1px solid #eeede8;margin-bottom:19px}
.modal-mark,.popover-mark{width:42px;height:42px;display:grid;place-items:center;flex:0 0 auto;border:1px solid #f0d4c6;border-radius:12px;background:#fff5ef;color:#b64b1b}
.modal-mark .icon,.popover-mark .icon{width:20px;height:20px}
.modal-title-copy{min-width:0}
.modal-title-copy .eyebrow{display:block;margin:0 0 4px;font-size:9px;letter-spacing:1.3px;color:#8c7062}
.modal-title-copy h2{margin:0;font-size:21px;line-height:1.25;letter-spacing:-.45px;font-weight:600}
.modal-content{min-width:0}
.modal-content form{margin:0}
.modal-content .field{font-size:12px;margin-bottom:14px}
.modal .field input,.modal .field select,.modal .field textarea{margin-top:7px;border-color:#d9d9d3;border-radius:9px;padding:10px 12px;font-size:13px;min-height:42px}
.modal .field textarea{min-height:112px;line-height:1.5;resize:vertical}
.modal .field input:focus-visible,.modal .field textarea:focus-visible,.modal .field select:focus-visible{border-color:#d66a39;outline:3px solid #e8590c26;outline-offset:1px}
.modal-hint{margin:0 0 16px;color:var(--text-3);font-size:11px;line-height:1.5}
.modal .wide{min-height:42px;margin:5px 0 0;border-radius:9px;font-size:12px;font-weight:550}
.modal .primary.wide{box-shadow:0 2px 4px #17171a18}
.modal .close{right:17px;top:17px;width:34px;height:34px;border:1px solid #ecebe7;border-radius:9px;background:#fafaf8;color:var(--text-2)}
.modal .close:hover{background:#f0efeb;color:var(--ink)}
.modal-content .eyebrow{margin-bottom:8px}
.modal-content .plans{gap:10px;margin:18px 0 12px}
.modal-content .plan{padding:15px;border-radius:12px;background:#fbfbf9}
.modal-content .plan.pro{background:#fffaf6;border-color:#e9b89e}
.modal-content .plan p{font-size:11px;line-height:1.45}
.modal-content .price{font-size:22px}
.popover{width:min(340px,calc(100vw - 24px));padding:9px;border:1px solid #e4e3dd;border-radius:14px;box-shadow:0 20px 52px -22px #17171a66,0 5px 14px #17171a12}
.popover-heading{display:flex;align-items:center;gap:10px;padding:7px 7px 12px;border-bottom:1px solid #eeede8;margin-bottom:5px}
.popover-mark{width:34px;height:34px;border-radius:10px}
.popover-mark .icon{width:17px;height:17px}
.popover-heading strong,.popover-heading small{display:block}
.popover-heading strong{font-size:12px;font-weight:600}
.popover-heading small{margin-top:3px;font-size:10px;line-height:1.4;color:var(--text-3)}
.export-row{min-height:58px;padding:10px 8px;border-radius:9px;gap:10px}
.export-row>.icon{width:18px;height:18px;color:#8f4a2a}
.export-row:hover,.export-row:focus-visible{background:#f7f4ef}
.export-row strong{font-size:11px}
.export-row small{font-size:10px;line-height:1.35}
.choice-menu{border-radius:13px;padding:6px;box-shadow:0 20px 52px -22px #17171a66,0 5px 14px #17171a12}
.choice-option{min-height:46px;border-radius:9px}
@media(max-width:600px){.modal-overlay{padding:14px}.modal{max-height:calc(100dvh - 28px);padding:20px;border-radius:15px}.modal-heading{gap:10px;padding-right:35px}.modal-mark{width:36px;height:36px;border-radius:10px}.modal-title-copy h2{font-size:18px}.modal .close{right:12px;top:12px}.modal-content .plans{grid-template-columns:1fr;margin:12px 0}.modal-content .plan{padding:12px}.popover{right:10px;top:50px}}
@media(prefers-reduced-motion:reduce){.modal-overlay{backdrop-filter:none}}
/* Layer rows keep selection, type and actions on a single clear baseline. */
.layers-panel{padding:12px 0 2px}
.layers-heading{display:flex;align-items:center;justify-content:space-between;margin:0 0 8px}
.layers-heading h3{margin:0;font-size:11px;font-weight:600;line-height:1.3}
.layers-heading small{display:block;margin-top:3px;color:var(--text-3);font-size:9px}
.layer-count{display:grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border:1px solid var(--line);border-radius:7px;background:#fafaf8;color:var(--text-2);font:10px 'IBM Plex Mono',monospace}
.layer-list{display:grid;gap:4px}
.layer{display:flex;min-width:0;align-items:center;gap:8px;padding:7px 7px;border:1px solid transparent;border-radius:9px;background:transparent;font-size:11px;transition:background .14s,border-color .14s}
.layer:hover{background:#f8f8f5}
.layer.selected{border:1px solid #efd4c5;border-left:3px solid var(--accent);padding:7px 7px 7px 5px;background:#fff8f3;box-shadow:0 1px 2px #17171a08}
.layer.hidden .layer-name{opacity:.52}
.layer-index{width:18px;flex:0 0 18px;text-align:center;color:#a1a19a;font:9px 'IBM Plex Mono',monospace}
.layer-type-icon{width:30px;height:30px;display:grid;place-items:center;flex:0 0 30px;border:1px solid #e9e8e2;border-radius:8px;background:white;color:#55565a}
.layer-type-icon .icon{width:15px;height:15px}
.layer-name{display:flex;flex:1;min-width:0;max-width:none;align-items:flex-start;flex-direction:column;justify-content:center;gap:2px;padding:3px 2px;text-align:left;border:0;background:transparent;overflow:hidden}
.layer-name:hover{background:transparent}
.layer-name strong,.layer-name small{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.layer-name strong{font-size:11px;font-weight:550;line-height:1.3}
.layer-name small{color:var(--text-3);font-size:9px;line-height:1.3}
.layer-action{width:30px;height:30px;min-height:30px;flex:0 0 30px;padding:0;border:1px solid transparent;border-radius:8px;background:transparent;color:#777871}
.layer-action .icon{width:15px;height:15px}
.layer-action:hover,.layer-action:focus-visible{border-color:#e8e7e1;background:white;color:var(--ink)}
.layer-action.is-hidden{color:#9c5a2e;background:#fff1e7}
.layer-action.layer-delete:hover,.layer-action.layer-delete:focus-visible{border-color:#f0c7c7;background:#fff3f2;color:#b3261e}
.layers-empty{display:grid;justify-items:center;gap:5px;padding:18px 10px;border:1px dashed #deddd6;border-radius:10px;background:#fafaf8;text-align:center}
.layers-empty>span{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:white;color:var(--text-2);font-size:18px}
.layers-empty strong{font-size:10px;font-weight:550}
.layers-empty small{max-width:190px;color:var(--text-3);font-size:9px;line-height:1.45}
.layer:focus-within{outline:2px solid #e8590c55;outline-offset:1px}
@media(max-width:980px){.layer{gap:5px;padding:6px 5px}.layer.selected{padding:6px 5px 6px 3px}.layer-action{width:28px;height:28px;min-height:28px;flex-basis:28px}.layer-type-icon{width:28px;height:28px;flex-basis:28px}}
.layer .layer-index{flex:0 0 18px}
.layer .layer-type-icon{flex:0 0 30px}
.layer .layer-name{max-width:none;min-height:34px;padding:3px 2px}
.layer .layer-action{width:30px;height:30px;min-height:30px;flex:0 0 30px;padding:0}
@media(max-width:980px){.layer .layer-type-icon{flex-basis:28px}.layer .layer-action{width:28px;height:28px;min-height:28px;flex-basis:28px}}
.layer .layer-action{border:1px solid transparent}
/* Keep the section context visible while the settings panel scrolls. */
.panel-top{position:sticky;top:0;z-index:12;flex-shrink:0;background:#fff}

/* Persistent studio appearance preferences */
:root[data-theme="dark"]{color-scheme:dark;--ink:#f0efe9;--text-2:#c0c0b8;--text-3:#a2a39b;--line:#3b3d39;--canvas:#20211f;--accent:#ff8754;--cut:#ff7591;--crease:#83aaff;background:#1c1d1b;color:var(--ink)}
:root[data-theme="dark"] body{background:#1c1d1b;color:var(--ink)}
:root[data-theme="dark"] button,:root[data-theme="dark"] input,:root[data-theme="dark"] select,:root[data-theme="dark"] textarea{color:var(--ink)}
:root[data-theme="dark"] button{border-color:#41433f;background:#292a27}
:root[data-theme="dark"] button:hover,:root[data-theme="dark"] button:focus-visible{background:#343530;border-color:#65665f}
:root[data-theme="dark"] .topbar,:root[data-theme="dark"] .rail,:root[data-theme="dark"] .panel,:root[data-theme="dark"] .statusbar,:root[data-theme="dark"] .canvas-toolbar,:root[data-theme="dark"] .canvas-footer{background:#242522;border-color:var(--line);color:var(--ink)}
:root[data-theme="dark"] .panel-top{background:#242522}
:root[data-theme="dark"] .workspace,:root[data-theme="dark"] .canvas-area,:root[data-theme="dark"] .canvas-pane{background:#1c1d1b;color:var(--ink)}
:root[data-theme="dark"] .section{border-color:var(--line)}
:root[data-theme="dark"] .muted,:root[data-theme="dark"] .section small,:root[data-theme="dark"] .field,:root[data-theme="dark"] .choice-label{color:var(--text-2)}
:root[data-theme="dark"] .field input,:root[data-theme="dark"] .field textarea,:root[data-theme="dark"] .field select,:root[data-theme="dark"] input.search,:root[data-theme="dark"] .title,:root[data-theme="dark"] .stepper input{background:#1d1e1c;border-color:#4b4d47;color:var(--ink)}
:root[data-theme="dark"] input::placeholder,:root[data-theme="dark"] textarea::placeholder{color:#85867f}
:root[data-theme="dark"] .side-tabs button,:root[data-theme="dark"] .segments button,:root[data-theme="dark"] .view-switch button,:root[data-theme="dark"] .workflow-tabs>button,:root[data-theme="dark"] .preset{background:#292a27;border-color:#41433f;color:var(--ink)}
:root[data-theme="dark"] .side-tabs button.active,:root[data-theme="dark"] .segments button.active,:root[data-theme="dark"] .view-switch button.active,:root[data-theme="dark"] .workflow-tabs>button.active{background:#454640;border-color:#77786f;color:#fff}
:root[data-theme="dark"] .step-number,:root[data-theme="dark"] .tag,:root[data-theme="dark"] .layer-count,:root[data-theme="dark"] .badge{background:#343530;border-color:#4b4d47;color:#deddd5}
:root[data-theme="dark"] .hint-box,:root[data-theme="dark"] .panel-note,:root[data-theme="dark"] .layers-empty,:root[data-theme="dark"] .result-row{background:#292a27;border-color:#41433f;color:var(--text-2)}
:root[data-theme="dark"] .layer{color:var(--ink)}
:root[data-theme="dark"] .layer:hover,:root[data-theme="dark"] .layer-action:hover,:root[data-theme="dark"] .layer-action:focus-visible{background:#343530;border-color:#4b4d47;color:var(--ink)}
:root[data-theme="dark"] .layer.selected{background:#3a2b24;border-color:#684833;border-left-color:var(--accent)}
:root[data-theme="dark"] .layer-type-icon{background:#292a27;border-color:#494a45;color:#dddcd5}
:root[data-theme="dark"] .layer-action{color:#bbbcb4}
:root[data-theme="dark"] .layer-action.is-hidden{background:#3c3026;color:#ffc18e}
:root[data-theme="dark"] .layer-action.layer-delete:hover{background:#422a2a;color:#ffaaa2}
:root[data-theme="dark"] .modal-overlay{background:rgba(0,0,0,.68)}
:root[data-theme="dark"] .modal,:root[data-theme="dark"] .popover,:root[data-theme="dark"] .choice-menu{background:#282926;border-color:#484a44;color:var(--ink);box-shadow:0 24px 70px #0009}
:root[data-theme="dark"] .modal-heading,:root[data-theme="dark"] .popover-heading{border-color:#41433f}
:root[data-theme="dark"] .modal-mark,:root[data-theme="dark"] .popover-mark{background:#3a2d25;border-color:#624632;color:#ffae7e}
:root[data-theme="dark"] .modal-title-copy .eyebrow{color:#d0a58d}
:root[data-theme="dark"] .modal .field input,:root[data-theme="dark"] .modal .field select,:root[data-theme="dark"] .modal .field textarea{background:#1d1e1c;border-color:#4b4d47;color:var(--ink)}
:root[data-theme="dark"] .modal .close{background:#33342f;border-color:#484a44;color:#d5d4cd}
:root[data-theme="dark"] .modal .close:hover{background:#41423c;color:white}
:root[data-theme="dark"] .plan,:root[data-theme="dark"] .modal-content .plan{background:#30312d;border-color:#484a44}
:root[data-theme="dark"] .plan.pro,:root[data-theme="dark"] .modal-content .plan.pro{background:#392e27;border-color:#704c36}
:root[data-theme="dark"] .export-row:hover,:root[data-theme="dark"] .export-row:focus-visible,:root[data-theme="dark"] .choice-option:hover,:root[data-theme="dark"] .choice-option:focus-visible{background:#383934}
:root[data-theme="dark"] .choice-option.selected{background:#393a35}
:root[data-theme="dark"] .choice-search{background:#282926;border-color:#41433f}
:root[data-theme="dark"] .choice-search input{background:transparent}
:root[data-theme="dark"] .lighting-control{background:#282926ed;border-color:#484a44;color:var(--ink);box-shadow:0 5px 18px #0005}
:root[data-theme="dark"] .lighting-mode:hover{background:#393a35}
:root[data-theme="dark"] .lighting-mode.active,:root[data-theme="dark"] .lighting-mode.active:hover{background:#eee;color:#222}
:root[data-theme="dark"] .scene[data-lighting="Terang"]{background:radial-gradient(ellipse at 50% 42%,#565751 0%,#343530 68%,#242520 100%)}
:root[data-theme="dark"] .scene[data-lighting="Studio"]{background:radial-gradient(ellipse at 50% 42%,#47443a 0%,#302f2a 65%,#20211f 100%)}
:root[data-theme="dark"] .scene[data-lighting="Gelap"]{background:radial-gradient(ellipse at 50% 42%,#30312c 0%,#22231f 68%,#171815 100%)}
:root[data-theme="dark"] .scene-label,:root[data-theme="dark"] .scene .canvas-hint{color:#ecebe4}
:root[data-theme="dark"] .scene-controls button{background:#33342fdd;color:#f0efe9}
:root[data-theme="dark"] .dieline-stage{background-color:#282926}
:root[data-theme="dark"] .dieline-focus{background:#3a2d25;border-color:#624632;color:#ffb18a}
:root[data-theme="dark"] .toast{background:#383934;color:#f0efe9;border-color:#55574f}
:root[data-theme="dark"] .mobile-gate{background:#1c1d1b;color:var(--ink)}

.preference-section{padding:4px 0 17px;margin-bottom:15px;border-bottom:1px solid var(--line)}
.preference-heading{display:flex;align-items:center;gap:11px;margin-bottom:10px}
.preference-heading>div{display:grid;gap:3px}
.preference-heading strong{font-size:13px;font-weight:600}
.preference-heading small{font-size:11px;color:var(--text-3)}
.preference-icon{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--line);border-radius:10px;background:var(--canvas);color:var(--text-2)}
.preference-icon .icon{width:17px;height:17px}
.preference-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.preference-option{display:flex;min-width:0;min-height:61px;align-items:center;gap:9px;padding:9px 10px;border:1px solid var(--line);border-radius:10px;background:#fff;text-align:left}
.preference-option>.icon:first-child{width:18px;height:18px;flex:0 0 auto;color:var(--text-2)}
.preference-option>span{display:grid;min-width:0;gap:3px;flex:1}
.preference-option strong{font-size:12px;font-weight:550}
.preference-option small{font-size:10px;line-height:1.35;color:var(--text-3)}
.preference-option>.icon:last-child{width:15px;height:15px;flex:0 0 auto;color:var(--accent)}
.preference-option.active{border-color:#e6a17c;background:#fff8f3}
.language-options .preference-option{min-height:44px}
:root[data-theme="dark"] .preference-section{border-color:var(--line)}
:root[data-theme="dark"] .preference-icon,:root[data-theme="dark"] .preference-option{background:#292a27;border-color:#41433f;color:var(--ink)}
:root[data-theme="dark"] .preference-option.active{background:#3a2b24;border-color:#80563d}
.dieline-stage .artboard{transform-origin:center center;will-change:transform}.dieline-stage{cursor:grab;touch-action:none}.dieline-stage.is-panning{cursor:grabbing;user-select:none}