:root{
  --ink:#17231e;
  --muted:#66736d;
  --paper:#f7f8f8;
  --card:#fff;
  --acid:#f6d365;
  --line:#d8dfdc;
  --accent:#0f766e;
  --soft:#eefaf7;
  --danger:#e11d48;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif}
.topbar{min-height:76px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:22px;align-items:center;padding:12px max(24px,calc((100% - 1180px)/2));border-bottom:1px solid var(--line);background:rgba(247,248,248,.96);position:sticky;top:0;z-index:10;backdrop-filter:blur(10px)}
.brand{display:inline-flex;align-items:center;gap:2px;color:var(--ink);font-weight:900;font-size:22px;text-decoration:none;letter-spacing:0;white-space:nowrap}.brand:before{content:'A';display:grid;place-items:center;width:32px;height:32px;margin-right:8px;border-radius:8px;background:var(--ink);color:var(--acid);font-size:15px}.brand span{color:var(--accent)}
.feature-nav{justify-self:center;display:flex;align-items:center;gap:4px;max-width:100%;min-width:0;padding:5px;border:1px solid var(--line);border-radius:8px;background:#fff;box-shadow:0 4px 18px rgba(23,35,30,.04)}
.feature-nav a{display:inline-flex;align-items:center;justify-content:center;min-height:36px;border:1px solid transparent;background:transparent;color:var(--muted);font:800 13px Arial,Helvetica,sans-serif;padding:0 14px;border-radius:7px;cursor:pointer;white-space:nowrap;text-decoration:none;transition:background .18s,color .18s,border-color .18s}.feature-nav a:hover{background:#edf1ef;color:var(--ink)}.feature-nav a.active{background:var(--ink);border-color:var(--ink);color:white}.feature-nav a.disabled{color:#a7afaa;background:#f5f6f5;cursor:default;pointer-events:none}.feature-nav a.disabled:hover{color:#a7afaa;background:#f5f6f5}
.privacy{font-size:12px;color:var(--muted);white-space:nowrap}.privacy:before{content:'.';color:var(--accent);margin-right:8px}.shell{max-width:1180px;margin:auto;padding:44px 24px}.intro{max-width:760px;margin-bottom:30px}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:800;color:var(--accent);margin:0 0 12px}.intro h1{font-size:clamp(42px,6vw,70px);line-height:.98;letter-spacing:0;margin:0 0 20px}.intro h1 em{font-family:Georgia,serif;font-weight:400;color:var(--accent)}.intro>p:last-child{max-width:620px;color:var(--muted);font-size:17px;line-height:1.6;margin:0}.workspace{display:grid;grid-template-columns:340px 1fr;gap:18px}.panel,.preview-card{background:var(--card);border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 28px rgba(34,43,37,.05)}.controls{padding:24px}.step{display:flex;gap:10px;align-items:center;font-size:13px;font-weight:800;margin:2px 0 14px}.step b{width:25px;height:25px;border-radius:8px;display:grid;place-items:center;background:var(--ink);color:white;font-size:11px}.dropzone{width:100%;height:145px;border:1.5px dashed #aeb5af;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;background:#fafbf8;margin-bottom:28px;transition:.2s;font:inherit;color:inherit}.dropzone:hover,.dropzone.drag{border-color:var(--accent);background:var(--soft)}.upload-icon{font-size:28px;color:var(--accent)}.dropzone strong{font-size:13px;margin:8px 0 5px}.dropzone small{font-size:10px;color:var(--muted)}.feature-panel{display:none}.feature-panel.active{display:block}.section-divider{height:1px;background:var(--line);margin:22px 0}.field{display:block;margin:16px 0}.field>span{display:flex;justify-content:space-between;gap:12px;font-size:12px;font-weight:700;margin-bottom:8px}.field output{color:var(--accent);white-space:nowrap}.input-unit{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:white}.size-apply-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:stretch}.size-apply-row .input-unit{min-width:0}.inline-apply{width:auto;min-width:74px;margin-top:0;padding:0 12px;white-space:nowrap}.input-unit input{min-width:0;flex:1;border:0;padding:10px 12px;font-weight:800;outline:none}.input-unit select{border:0;border-left:1px solid var(--line);background:#f2f4ef;padding:0 10px;color:var(--muted)}input[type=range]{width:100%;accent-color:var(--accent)}.color-field{display:flex;align-items:center;justify-content:space-between;gap:12px}.color-field>span{margin:0}.color-field input{width:42px;height:30px;padding:1px;border:1px solid var(--line);border-radius:6px;background:white}.check{font-size:12px;display:flex;gap:8px;align-items:center;margin:15px 0}.check input{accent-color:var(--accent)}.primary,.secondary{width:100%;padding:13px;border:0;border-radius:8px;font-weight:900;color:var(--ink);cursor:pointer;margin-top:8px}.primary{background:var(--acid)}.secondary{background:var(--soft);border:1px solid var(--accent);color:var(--accent)}.primary:disabled,.secondary:disabled{background:#e5e8df;border-color:#e5e8df;color:#9ba29e;cursor:not-allowed}.custom-distance{margin-bottom:10px}.custom-distance span{display:grid;place-items:center;border-left:1px solid var(--line);background:#f2f4ef;padding:0 12px;color:var(--muted);font-size:12px;font-weight:800}.hanger-options{display:none;padding:12px 12px 2px;margin:4px 0 16px;border:1px solid var(--line);border-radius:8px;background:#fbfcfb}.hanger-options.active{display:block}.hanger-options .field{margin:10px 0}.mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.preview-card{padding:18px;display:flex;flex-direction:column;min-width:0}.preview-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:3px 4px 16px}.preview-head div:first-child{display:flex;flex-direction:column;gap:5px;min-width:0}.preview-head span{font-size:9px;letter-spacing:1.5px;color:var(--muted);font-weight:800}.preview-head strong{font-size:13px;max-width:460px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dimensions{font:700 12px monospace;color:#637068;white-space:nowrap}.stage{height:clamp(360px,58vh,450px);min-height:0;display:grid;place-items:center;background-color:#e9ebe6;background-image:linear-gradient(45deg,#dfe2dc 25%,transparent 25%),linear-gradient(-45deg,#dfe2dc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#dfe2dc 75%),linear-gradient(-45deg,transparent 75%,#dfe2dc 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0;border-radius:8px;overflow:hidden;padding:18px}.empty-state{text-align:center;color:#89938d}.empty-state span{font-size:55px;font-weight:100}.empty-state p{font-size:12px;margin:6px 0 0}.stage:not(.empty) .empty-state{display:none}#preview{display:flex;align-items:center;justify-content:center;width:100%;height:100%;max-width:100%;max-height:100%;min-width:0;min-height:0}#preview svg,#preview img,#preview canvas{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 4px 7px rgba(0,0,0,.13))}.hanger-drag-handle{cursor:move}.hanger-drag-handle circle{pointer-events:all}.stage.dragging,#preview svg.dragging{cursor:grabbing}.download-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}.download-row button{border:1px solid var(--line);background:white;padding:11px;border-radius:8px;text-align:left;font-weight:800;cursor:pointer;color:var(--ink);min-width:0}.download-row button:last-child{background:var(--ink);color:white}.download-row button span{display:block;font-size:9px;font-weight:400;opacity:.68;margin-top:3px;white-space:normal}.download-row button:disabled{opacity:.35;cursor:not-allowed}.tips{display:flex;gap:28px;margin-top:22px;padding:20px 23px;border:1px solid #cfd4c1;border-radius:8px;background:var(--soft)}.tips b{font-size:10px;letter-spacing:1.2px;white-space:nowrap;color:var(--accent)}.tips p{font-size:12px;line-height:1.6;margin:0;color:#5e695f}footer{text-align:center;border-top:1px solid #ddd9d0;padding:25px;color:#858d88;font-size:11px}@media(max-width:900px){.topbar{grid-template-columns:1fr;justify-items:start}.feature-nav{justify-self:start;justify-content:flex-start;max-width:100%;overflow:auto;padding-bottom:5px}.privacy{display:none}.workspace{grid-template-columns:1fr}.shell{padding-top:32px}.stage{height:clamp(360px,58vh,450px);min-height:0;display:grid;place-items:center;background-color:#e9ebe6;background-image:linear-gradient(45deg,#dfe2dc 25%,transparent 25%),linear-gradient(-45deg,#dfe2dc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#dfe2dc 75%),linear-gradient(-45deg,transparent 75%,#dfe2dc 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0;border-radius:8px;overflow:hidden;padding:18px}.tips{display:block}.tips b{display:block;margin-bottom:8px}}@media(max-width:560px){.shell{padding-left:14px;padding-right:14px}.intro h1{font-size:42px}.feature-nav{width:100%}.feature-nav a{flex:0 0 auto;padding:0 11px}.mini-grid{grid-template-columns:1fr}.download-row{grid-template-columns:1fr}.preview-head{align-items:flex-start;flex-direction:column}.controls,.preview-card{padding:16px}}
/* Compact single-screen layout */
html,body{height:100%;overflow:hidden}
.topbar{min-height:54px;gap:14px;padding:7px max(16px,calc((100% - 1260px)/2))}
.brand{font-size:20px}.brand:before{width:28px;height:28px;margin-right:6px;font-size:13px}.feature-nav a{min-height:30px;padding:0 11px;font-size:12px}.feature-nav{padding:4px}.privacy{font-size:11px}.shell{max-width:1260px;height:calc(100vh - 54px);padding:10px 16px;margin:auto;display:flex;flex-direction:column;overflow:hidden}.intro{max-width:none;margin:0 0 8px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center}.eyebrow{display:none}.intro h1{font-size:28px;line-height:1;margin:0}.intro>p:last-child{max-width:none;font-size:12px;line-height:1.35}.workspace{grid-template-columns:310px minmax(0,1fr);gap:12px;min-height:0;flex:1;overflow:hidden}.controls{padding:12px;overflow:hidden}.preview-card{padding:12px;min-height:0}.step{gap:8px;font-size:12px;margin:0 0 7px}.step b{width:20px;height:20px;border-radius:6px;font-size:10px}.dropzone{height:62px;margin-bottom:10px}.upload-icon{display:none}.dropzone strong{font-size:12px;margin:0 0 3px}.dropzone small{font-size:9px}.section-divider{margin:10px 0}.field{margin:7px 0}.field>span{font-size:11px;margin-bottom:4px}.input-unit input{padding:7px 9px}.input-unit select{padding:0 7px}.color-field input{height:26px;width:38px}.check{font-size:11px;margin:7px 0}.primary,.secondary{min-height:34px;padding:8px 10px;margin-top:6px;border-radius:7px;font-size:12px}.inline-apply{min-width:66px;padding:0 10px}.custom-distance{margin-bottom:6px}.custom-distance span{padding:0 9px;font-size:11px}.hanger-options{padding:8px 8px 2px;margin:2px 0 8px}.hanger-options .field{margin:6px 0}.mini-grid{gap:8px}.preview-head{padding:0 2px 8px}.preview-head strong{font-size:12px}.dimensions{font-size:11px}.stage{height:auto;min-height:0;flex:1;padding:12px}.download-row{gap:8px;margin-top:8px}.download-row button{padding:8px}.download-row button span{font-size:8px}.tips,footer{display:none}@media(max-width:900px){html,body{height:auto;overflow:auto}.shell{height:auto;overflow:visible}.workspace{overflow:visible}.controls{overflow:visible}.tips{display:block}footer{display:block}}
/* Dense control grouping */
.workspace{grid-template-columns:430px minmax(0,1fr)}.feature-panel.active{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 10px;align-items:end}.feature-panel.active>.section-divider,.feature-panel.active>.step,.feature-panel.active>#contourBgBtn,.feature-panel.active>.hanger-options,.feature-panel.active>#hangerApplyBtn{grid-column:1/-1}.feature-panel.active>.field,.feature-panel.active>.check{margin:0}.feature-panel.active>.color-field{min-height:34px}.hanger-options.active{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 8px}.hanger-options.active>.mini-grid{grid-column:1/-1}.hanger-options .field{margin:0}.controls>.step{margin-bottom:7px}.controls>.primary{margin-top:8px}
.feature-panel.active>#processBtn{grid-column:1/-1}
#hangerApplyBtn{margin-top:0}
.original-strip{display:flex;align-items:center;gap:10px;margin:0 0 8px;padding:7px 8px;border:1px solid var(--line);border-radius:8px;background:#fbfcfb}.original-strip>span{font-size:10px;font-weight:900;color:var(--muted);white-space:nowrap}.original-preview{height:52px;min-width:0;flex:1;display:flex;align-items:center;justify-content:flex-start;overflow:hidden}.original-preview img{display:block;max-height:52px;max-width:100%;object-fit:contain;border-radius:5px}.original-preview small{font-size:11px;color:#9ba29e}.preview-card{min-height:0}.stage{min-height:0}
#preview{transform:scale(var(--preview-zoom,1.18));transform-origin:var(--preview-origin-x,50%) var(--preview-origin-y,50%);will-change:transform}.stage{cursor:zoom-in}


/* Larger source preview and sharper zoom rendering */
.original-strip{min-height:96px;padding:10px 12px;align-items:center}.original-strip>span{font-size:11px}.original-preview{height:86px}.original-preview img{max-height:86px;image-rendering:auto;transform:translateZ(0);backface-visibility:hidden}.original-preview small{font-size:12px}
#preview{backface-visibility:hidden;transform:translateZ(0) scale(var(--preview-zoom,1.18));transform-origin:var(--preview-origin-x,50%) var(--preview-origin-y,50%)}#preview svg{shape-rendering:geometricPrecision;text-rendering:geometricPrecision}#preview img,#preview canvas{image-rendering:auto;transform:translateZ(0)}#preview svg,#preview img,#preview canvas{filter:none}

/* Side-by-side result and source preview */
.preview-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;min-height:0;flex:1}.preview-body .stage{height:auto;min-height:0}.preview-body .original-strip{margin:0;min-height:0;height:auto;display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:10px;border-radius:8px}.preview-body .original-strip>span{flex:0 0 auto}.preview-body .original-preview{height:auto;min-height:0;flex:1;display:grid;place-items:center;background-color:#eef0ec;background-image:linear-gradient(45deg,#dfe2dc 25%,transparent 25%),linear-gradient(-45deg,#dfe2dc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#dfe2dc 75%),linear-gradient(-45deg,transparent 75%,#dfe2dc 75%);background-size:22px 22px;background-position:0 0,0 11px,11px -11px,-11px 0;border-radius:8px;overflow:hidden}.preview-body .original-preview img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:0}.preview-body .original-preview small{align-self:center;justify-self:center}@media(max-width:900px){.preview-body{grid-template-columns:1fr}.preview-body .original-strip{min-height:260px}}

/* Wider canvas workspace */
.shell{max-width:1520px}.workspace{grid-template-columns:360px minmax(0,1fr)}.preview-card{min-width:0}.preview-body{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}.preview-body .stage,.preview-body .original-strip{min-width:0}
@media(max-width:1100px){.workspace{grid-template-columns:320px minmax(0,1fr)}.preview-body{grid-template-columns:1fr}}
@media(max-width:900px){.workspace{grid-template-columns:1fr}}

/* Clearer zoom preview without changing exported vector */
#preview{transform:scale(var(--preview-zoom,1.18)) !important;backface-visibility:visible;will-change:auto}#preview svg{shape-rendering:geometricPrecision;text-rendering:geometricPrecision;overflow:visible}#preview svg path{stroke-width:.16 !important;stroke-linecap:round;stroke-linejoin:round}#preview svg circle{shape-rendering:geometricPrecision}#preview img,#preview canvas{image-rendering:auto;filter:none;transform:none !important}

/* Fix contour size field visibility */
.size-apply-row{grid-template-columns:minmax(128px,1fr) auto;gap:8px}.size-apply-row .input-unit{height:36px;min-width:128px}.size-apply-row .input-unit input{display:block;min-width:0;width:100%;padding:7px 10px}.size-apply-row .input-unit select{flex:0 0 62px;min-width:62px;padding:0 8px}.inline-apply{height:36px;min-width:72px;align-self:stretch}.custom-distance{height:36px}.custom-distance input{height:100%}.custom-distance span{min-width:44px}
@media(max-width:1180px){.size-apply-row{grid-template-columns:1fr}.inline-apply{width:100%}}

/* Keep size field from covering contour distance */
.feature-panel.active>.size-field{grid-column:1/-1}.size-field .size-apply-row{grid-template-columns:minmax(0,1fr) 72px}.size-field .input-unit{min-width:0}.size-field .inline-apply{width:72px;min-width:72px}.size-field #sizeMm{min-width:0}.size-field #sizeUnit{flex:0 0 64px;min-width:64px}
@media(max-width:1180px){.size-field .size-apply-row{grid-template-columns:minmax(0,1fr) 72px}.size-field .inline-apply{width:72px}}

/* AI background button layout */
.feature-panel.active>#contourAiBgBtn{grid-column:1/-1;margin-top:0}

/* Alarm Lagu */
.plain-input{width:100%;height:36px;border:1px solid var(--line);border-radius:8px;background:white;padding:7px 10px;font:800 12px Arial,Helvetica,sans-serif;color:var(--ink);outline:none}.alarm-panel.active>.step,.alarm-panel.active>#alarmArmBtn,.alarm-panel.active>.alarm-status{grid-column:1/-1}.alarm-panel.active>#alarmTestBtn,.alarm-panel.active>#alarmStopBtn,.alarm-panel.active>#alarmCancelBtn{margin-top:0}.alarm-status{min-height:42px;display:flex;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#fbfcfb;color:#58645e;font-size:12px;font-weight:800;line-height:1.35}.alarm-status[data-state=armed]{border-color:#0f766e;background:#eefaf7;color:#0f766e}.alarm-status[data-state=playing]{border-color:#f6d365;background:#fff8df;color:#6d5300}.alarm-status[data-state=error]{border-color:#e11d48;background:#fff1f2;color:#be123c}body[data-mode=alarm] .preview-body{grid-template-columns:1fr}body[data-mode=alarm] .original-strip,body[data-mode=alarm] .download-row{display:none}body[data-mode=alarm] .stage{cursor:default;background:#f4f7f6;background-image:none;padding:18px}body[data-mode=alarm] #preview{transform:none !important;width:100%;height:100%}.alarm-preview{width:100%;height:100%;min-height:300px;display:grid;place-items:center;align-content:center;gap:14px;border:1px solid var(--line);border-radius:8px;background:linear-gradient(180deg,#ffffff 0%,#eefaf7 100%);text-align:center;padding:24px}.alarm-clock{font:900 clamp(54px,10vw,132px)/1 Arial,Helvetica,sans-serif;color:var(--ink);letter-spacing:0}.alarm-preview strong{max-width:680px;font-size:clamp(18px,2.4vw,32px);line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.alarm-preview span{font-size:14px;font-weight:800;color:var(--accent)}.alarm-player{width:min(620px,100%);height:42px;margin-top:4px}@media(max-width:900px){body[data-mode=alarm] .download-row{display:none}.alarm-preview{min-height:360px}.alarm-preview strong{white-space:normal}}




.note-field{grid-column:1/-1}.note-input{height:66px;resize:none;line-height:1.35;font-weight:700}.alarm-note-preview{max-width:680px;margin:0;color:#58645e;font-size:13px;font-weight:800;line-height:1.35;overflow-wrap:anywhere}



.schedule-table-wrap{grid-column:1/-1;border:1px solid var(--line);border-radius:8px;background:#fff;overflow:hidden}.schedule-table-title{padding:9px 10px;border-bottom:1px solid var(--line);font-size:11px;font-weight:900;color:var(--ink)}.schedule-table{width:100%;border-collapse:collapse;font-size:11px}.schedule-table th,.schedule-table td{padding:8px 10px;border-bottom:1px solid #edf1ef;text-align:left;vertical-align:top}.schedule-table th{background:#fbfcfb;color:#66736d;font-weight:900}.schedule-table td{color:#17231e;font-weight:700;overflow-wrap:anywhere}.schedule-table tr:last-child td{border-bottom:0}.schedule-table td[colspan]{color:#9ba29e;text-align:center;font-weight:800}