:root{--color-black: #000000;--color-blue-100: #d9f3ec;--color-blue-50: #f2fbf8;--color-blue-600: #197b72;--color-blue-700: #145f59;--color-blue-800: #0f4842;--color-green-500: #2fa88f;--color-neutral-100: #eef4f1;--color-neutral-200: #dde8e3;--color-neutral-300: #c9d8d2;--color-neutral-400: #9bb2aa;--color-neutral-50: #fdf9ef;--color-neutral-500: #628078;--color-neutral-600: #4d6961;--color-neutral-700: #37504a;--color-neutral-900: #17443f;--color-mono-ink: #17443f;--color-red-700: #d9613f;--color-coral: #ff7b5c;--color-yellow: #ffd34e;--color-sky: #d9efff;--color-white: #ffffff;--color-white-alpha-70: rgba(255, 255, 255, .7);color-scheme:light;--color-text: var(--color-neutral-900);--color-text-muted: var(--color-neutral-500);--color-page-background: var(--color-neutral-50);--color-border: var(--color-neutral-200);--color-primary: var(--color-blue-600);--color-primary-hover: var(--color-blue-700);--color-primary-soft: var(--color-blue-50);--color-calm-focus-ring: rgba(25, 123, 114, .18);--color-calm-shadow-brand: rgba(25, 123, 114, .22);--color-calm-shadow-button: rgba(255, 123, 92, .28);--color-calm-shadow-panel: rgba(23, 68, 63, .07);--color-calm-shadow-panel-strong: rgba(23, 68, 63, .09);--color-calm-shadow-soft: rgba(23, 68, 63, .06);--color-calm-shadow-subtle: rgba(23, 68, 63, .05);--shadow-panel: 0 1px 2px var(--color-calm-shadow-panel);--radius-panel: 20px;--space-panel-padding: clamp(14px, 2.2vh, 22px);--space-section-gap: clamp(10px, 1.8vh, 16px);--space-field-gap: clamp(9px, 1.6vh, 15px);--space-divider-gap: clamp(11px, 2vh, 18px);--space-column-gap: clamp(10px, 1.6vh, 14px);--control-height: clamp(38px, 4.6vh, 42px);--preview-panel-height: clamp(360px, 62vh, 560px);--preview-stage-height: clamp(280px, 52vh, 460px);--color-alert-text: #496158;--color-content-on-primary: var(--color-white);--color-badge-background: rgba(255, 253, 247, .75);--color-badge-border: #cbd8d1;--color-badge-status: #2c9475;--color-badge-status-ring: rgba(44, 148, 117, .12);--color-button-ghost-border: #d7d8d0;--color-button-secondary-background: #fffdf8;--color-button-secondary-border: #c9cec8;--color-button-secondary-hover-background: #f8f7f1;--color-control-border: #cfd2cc;--color-control-border-hover: #9ea8a1;--color-control-background: var(--color-white);--color-control-focus-ring: rgba(21, 94, 75, .1);--color-control-track: #e8ebe9;--color-divider: #dedfd8;--color-focus-outline: rgba(39, 130, 101, .25);--color-input-placeholder: #a2a7a3;--color-layout-border: rgba(194, 195, 185, .78);--color-menu-background: var(--color-white);--color-menu-option-hover: var(--color-neutral-100);--color-menu-option-text: var(--color-neutral-700);--color-noscript-background: var(--color-white);--color-noscript-text: #7b271c;--color-page-accent-cool: rgba(217, 243, 236, .7);--color-page-accent-warm: rgba(255, 211, 78, .16);--color-panel-background: rgba(255, 255, 255, .96);--color-placeholder-border: #9bb2aa;--color-placeholder-detail: #c9d8d2;--color-placeholder-watermark-band: rgba(255, 123, 92, .88);--color-preview-background: #e3e7e2;--color-preview-border: #bdc7c0;--color-preview-drag-background: #d9f3ec;--color-preview-grid: rgba(255, 255, 255, .45);--color-scrollbar-thumb: #c9d8d2;--color-segmented-background: #eef4f1;--color-segment-active-background: var(--color-white);--color-shadow-brand: rgba(23, 68, 63, .18);--color-shadow-button-primary: rgba(255, 123, 92, .24);--color-shadow-dropdown-soft: rgba(23, 68, 63, .06);--color-shadow-dropdown-strong: rgba(23, 68, 63, .12);--color-shadow-medium: rgba(23, 68, 63, .16);--color-shadow-preview: rgba(23, 68, 63, .2);--color-shadow-segment: rgba(23, 68, 63, .09);--color-shadow-slider-thumb: rgba(23, 68, 63, .15);--color-shadow-slider-value: rgba(23, 68, 63, .06);--color-shadow-toast: rgba(23, 68, 63, .24);--color-swatch-inner-border: var(--color-white);--color-swatch-border: #c9d8d2;--color-text-optional: #85998f;--color-toast-background: #145f59;--color-toast-text: var(--color-white);--color-upload-hint: #7d938a}*{box-sizing:border-box}[hidden]{display:none!important}html{min-width:320px;background:var(--color-page-background)}body{margin:0;min-height:100vh;color:var(--color-text);background:radial-gradient(circle at 8% 2%,var(--color-page-accent-warm),transparent 24rem),radial-gradient(circle at 94% 12%,var(--color-page-accent-cool),transparent 26rem),var(--color-page-background);font-family:ui-rounded,Arial Rounded MT Bold,Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button,label,input[type=range],select{touch-action:manipulation}.app-shell{width:min(1420px,calc(100% - 40px));margin:0 auto;padding:24px 0 42px}header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:16px}.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:var(--color-primary);color:var(--color-content-on-primary);box-shadow:0 8px 20px var(--color-shadow-brand)}.brand-symbol{width:62%;height:62%;display:block}.brand-name{margin:0;font-weight:800;letter-spacing:-.03em;font-size:19px;line-height:1}.brand-sub{margin-top:5px;color:var(--color-text-muted);font-size:12px}.privacy-badge{display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border:1px solid var(--color-badge-border);border-radius:999px;color:var(--color-primary-hover);background:var(--color-badge-background);font-size:12px;font-weight:750}.privacy-badge:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--color-badge-status);box-shadow:0 0 0 4px var(--color-badge-status-ring)}main{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(340px,.6fr);gap:22px;align-items:start}.preview-column{min-width:0;display:flex;flex-direction:column;gap:var(--space-column-gap)}.app-panel{border:1px solid var(--color-layout-border);border-radius:var(--radius-panel);background:var(--color-panel-background);box-shadow:var(--shadow-panel)}.preview-panel{min-height:var(--preview-panel-height);padding:var(--space-panel-padding);display:flex;flex-direction:column}.preview-header{min-height:46px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 4px 13px}.preview-header-end{display:flex;align-items:center;gap:10px;min-width:0}.btn-replace{flex:none}.preview-title{font-size:14px;font-weight:780}.preview-file-meta{color:var(--color-text-muted);font-size:12px;text-align:right;overflow-wrap:anywhere}.preview-stage{position:relative;flex:1;height:var(--preview-stage-height);min-height:var(--preview-stage-height);max-height:var(--preview-stage-height);padding:14px;display:grid;place-items:center;overflow:hidden;border:1px dashed var(--color-preview-border);border-radius:17px;background-color:var(--color-preview-background);background-image:linear-gradient(45deg,var(--color-preview-grid) 25%,transparent 25%),linear-gradient(-45deg,var(--color-preview-grid) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--color-preview-grid) 75%),linear-gradient(-45deg,transparent 75%,var(--color-preview-grid) 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0;transition:border-color .18s,background-color .18s}.preview-stage.dragover{border-color:var(--color-primary);background-color:var(--color-preview-drag-background)}#previewCanvas{display:none;min-width:0;min-height:0;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;box-shadow:0 14px 36px var(--color-shadow-preview)}.upload-placeholder{width:min(420px,86%);text-align:center}.upload-placeholder-icon{position:relative;width:92px;height:68px;margin:0 auto 24px;border:2px solid var(--color-placeholder-border);border-radius:13px;background:var(--color-white-alpha-70);transform:rotate(-3deg)}.upload-placeholder-icon:before{content:"";position:absolute;left:13px;top:15px;width:20px;height:20px;border-radius:50%;background:var(--color-placeholder-detail);box-shadow:32px 0 0 -7px var(--color-placeholder-detail),32px 12px 0 -7px var(--color-placeholder-detail)}.upload-placeholder-icon:after{content:"CONTOH";position:absolute;left:-17px;top:25px;width:124px;padding:5px 0;color:var(--color-content-on-primary);background:var(--color-placeholder-watermark-band);font-size:9px;font-weight:900;letter-spacing:.08em;transform:rotate(-24deg)}.upload-placeholder-title{margin:0;font-size:clamp(23px,3vw,34px);line-height:1.12;letter-spacing:-.04em}.upload-placeholder p{max-width:350px;margin:12px auto 20px;color:var(--color-text-muted);font-size:14px;line-height:1.6}.btn{min-height:44px;border-radius:12px;border:1px solid transparent;padding:10px 15px;cursor:pointer;font-weight:760;transition:transform .12s,background .16s,border-color .16s,box-shadow .16s}.btn-primary{background:var(--color-primary);color:var(--color-content-on-primary);box-shadow:0 8px 18px var(--color-shadow-button-primary)}.btn-primary:hover{background:var(--color-primary-hover)}.btn-secondary{border-color:var(--color-button-secondary-border);background:var(--color-button-secondary-background);color:var(--color-text)}.btn-secondary:hover,.btn-ghost:hover{border-color:var(--color-control-border-hover);background:var(--color-button-secondary-hover-background)}.btn-ghost{min-height:38px;border-color:var(--color-button-ghost-border);padding:7px 11px;color:var(--color-text-muted);background:transparent;font-size:12px}button:active{transform:translateY(1px)}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--color-focus-outline);outline-offset:2px}button:disabled{cursor:not-allowed;border-color:var(--color-neutral-200);color:var(--color-neutral-400);background:var(--color-neutral-100);opacity:1;box-shadow:none}.upload-hint{display:block;margin-top:12px;color:var(--color-upload-hint);font-size:11px}#fileInput{position:fixed;left:-9999px}.settings-column{min-width:0;display:flex;flex-direction:column;gap:var(--space-column-gap)}.settings-panel{min-height:0;padding:20px;container-type:inline-size}.privacy-panel{padding:0}.privacy-panel .privacy-alert{margin-top:0}.section-heading{display:flex;align-items:flex-start;gap:11px}.section-number{flex:0 0 auto;width:27px;height:27px;display:grid;place-items:center;border-radius:8px;background:var(--color-primary-soft);color:var(--color-primary-hover);font-weight:850;font-size:12px}.section-heading h2{margin:1px 0 4px;font-size:16px;letter-spacing:-.02em}.section-heading p{margin:0;color:var(--color-text-muted);font-size:12px;line-height:1.45}.form-field{min-width:0;margin-bottom:var(--space-field-gap)}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.form-row-3{grid-template-columns:repeat(3,1fr)}label,.form-label{display:block;margin-bottom:7px;font-size:12px;font-weight:760}.label-optional{color:var(--color-text-optional);font-weight:550}input[type=text],input[type=date],select{width:100%;min-height:43px;border:1px solid var(--color-control-border);border-radius:11px;padding:9px 11px;color:var(--color-text);background:var(--color-control-background);outline:none}input[type=text]:focus,input[type=date]:focus,select:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-control-focus-ring)}input::placeholder{color:var(--color-input-placeholder)}.custom-select-native{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important;opacity:0!important;pointer-events:none!important}.custom-dropdown{position:relative;width:100%}.custom-dropdown-trigger{width:100%;min-height:43px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 11px;border:1px solid var(--color-control-border);border-radius:11px;color:var(--color-text);background:var(--color-control-background);text-align:left;cursor:pointer}.custom-dropdown-trigger:hover{border-color:var(--color-control-border-hover)}.custom-dropdown-trigger:focus-visible{border-color:var(--color-primary);outline:0;box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 18%,transparent)}.custom-dropdown-chevron{flex:0 0 auto;width:8px;height:8px;margin:-4px 3px 0 0;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;color:var(--color-text-muted);transform:rotate(45deg);transition:transform .16s ease}.custom-dropdown.open .custom-dropdown-chevron{margin-top:4px;transform:rotate(225deg)}.custom-dropdown-menu{position:absolute;top:calc(100% + 7px);left:0;z-index:60;min-width:100%;width:max-content;max-width:min(330px,calc(100vw - 32px));display:none;padding:4px;border:1px solid var(--color-border);border-radius:9px;background:var(--color-menu-background);box-shadow:0 10px 24px var(--color-shadow-dropdown-strong),0 2px 6px var(--color-shadow-dropdown-soft)}.custom-dropdown.open .custom-dropdown-menu{display:block;animation:dropdown-in .14s ease-out}.custom-dropdown.drop-up .custom-dropdown-menu{top:auto;bottom:calc(100% + 7px);transform-origin:bottom}.custom-dropdown-option{width:100%;min-height:36px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:8px 10px;border:0;border-radius:7px;color:var(--color-menu-option-text);background:transparent;text-align:left;white-space:nowrap;cursor:pointer;font-size:12px;font-weight:500}.custom-dropdown-option:hover,.custom-dropdown-option:focus-visible{outline:0;background:var(--color-menu-option-hover)}.custom-dropdown-option[aria-selected=true]{color:var(--color-primary-hover);background:var(--color-primary-soft);font-weight:650}.custom-dropdown-option[aria-selected=true]:after{content:"\2713";flex:0 0 auto;color:var(--color-primary);font-weight:800}@keyframes dropdown-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.segmented{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:12px;background:var(--color-segmented-background)}.segment{min-height:37px;border:0;border-radius:9px;color:var(--color-text-muted);background:transparent;cursor:pointer;font-size:12px;font-weight:750}.segment[aria-pressed=true]{color:var(--color-primary-hover);background:var(--color-segment-active-background);box-shadow:0 2px 8px var(--color-shadow-segment)}.slider-track{display:grid;grid-template-columns:1fr;align-items:center}input[type=range]{width:100%;height:18px;margin:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:linear-gradient(to right,var(--color-primary) 0 var(--fill, 0%),var(--color-control-track) var(--fill, 0%) 100%)}input[type=range]::-webkit-slider-thumb{width:18px;height:18px;margin-top:-6px;border:3px solid var(--color-primary);border-radius:50%;background:var(--color-control-background);box-shadow:0 1px 3px var(--color-shadow-slider-thumb);appearance:none;-webkit-appearance:none}input[type=range]::-moz-range-track{height:6px;border:0;border-radius:999px;background:var(--color-control-track)}input[type=range]::-moz-range-progress{height:6px;border-radius:999px;background:var(--color-primary)}input[type=range]::-moz-range-thumb{width:12px;height:12px;border:3px solid var(--color-primary);border-radius:50%;background:var(--color-control-background);box-shadow:0 1px 3px var(--color-shadow-slider-thumb)}.slider-control{position:relative;padding-top:34px}.slider-value{position:absolute;left:0;top:0;min-width:30px;padding:5px 7px;border:1px solid var(--color-border);border-radius:8px;color:var(--color-text);background:var(--color-control-background);box-shadow:0 2px 7px var(--color-shadow-slider-value);font-size:11px;font-weight:700;line-height:1;text-align:center;opacity:0;transform:translate(-50%);pointer-events:none}.slider-control.range-ready .slider-value{opacity:1}.color-swatches{display:flex;gap:8px}.color-swatch{width:34px;height:34px;border:2px solid var(--color-swatch-inner-border);border-radius:50%;box-shadow:0 0 0 1px var(--color-swatch-border);cursor:pointer}.color-swatch[aria-pressed=true]{box-shadow:0 0 0 2px var(--color-primary)}.collapsible-step{margin-bottom:var(--space-field-gap)}.collapsible-summary{display:flex;list-style:none;cursor:pointer;border-radius:8px;padding:2px;margin-left:-2px;margin-right:-2px}.collapsible-summary::-webkit-details-marker{display:none}.collapsible-summary::marker{content:""}.collapsible-summary:hover .collapsible-chevron{color:var(--color-neutral-700)}.collapsible-summary:focus-visible{outline:3px solid var(--color-focus-outline);outline-offset:2px}.collapsible-chevron{flex:0 0 auto;align-self:center;width:8px;height:8px;margin-left:auto;margin-top:-4px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;color:var(--color-neutral-400);transform:rotate(45deg);transition:transform .16s ease}.collapsible-step[open] .collapsible-chevron{margin-top:4px;transform:rotate(225deg)}.collapsible-body{padding-top:var(--space-section-gap)}.collapsible-body>.form-field:last-child{margin-bottom:0}.section-divider{height:1px;background:var(--color-divider)}.export-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.preset-description{margin:-7px 0 0;color:var(--color-text-muted);font-size:10px;line-height:1.45}.privacy-alert{display:flex;gap:10px;margin-top:var(--space-field-gap);padding:12px;border-radius:12px;color:var(--color-alert-text);background:var(--color-primary-soft);font-size:11px;line-height:1.5}.privacy-alert strong{color:var(--color-primary-hover)}.privacy-lock-icon{flex:0 0 auto;width:18px;height:22px;margin-top:2px;position:relative}.privacy-lock-icon:after{content:"";position:absolute;left:0;bottom:0;width:18px;height:13px;border:2px solid var(--color-primary);border-radius:4px;box-sizing:border-box}.privacy-lock-icon:before{content:"";position:absolute;left:3px;top:0;width:8px;height:8px;border:2px solid var(--color-primary);border-bottom:0;border-radius:7px 7px 0 0}.toast-notification{position:fixed;left:50%;bottom:24px;z-index:10;max-width:calc(100% - 32px);padding:11px 16px;border-radius:999px;color:var(--color-toast-text);background:var(--color-toast-background);box-shadow:0 10px 30px var(--color-shadow-toast);font-size:12px;font-weight:700;transform:translate(-50%,20px);opacity:0;pointer-events:none;transition:.2s ease}.toast-notification.show{transform:translate(-50%);opacity:1}.noscript-message{max-width:680px;margin:80px auto;padding:24px;border-radius:16px;color:var(--color-noscript-text);background:var(--color-noscript-background)}body{background:radial-gradient(circle at 10% 4%,var(--color-page-accent-warm),transparent 26rem),radial-gradient(circle at 92% 8%,var(--color-page-accent-cool),transparent 28rem),var(--color-page-background)}.app-shell{width:min(1300px,calc(100% - 40px));padding-top:0}header{padding-top:20px;margin-bottom:0}.brand{gap:10px}.brand-mark{width:40px;height:40px;position:relative;color:var(--color-blue-600);font-size:14px;transform:rotate(-3deg)}.brand-symbol{width:100%;height:100%}.brand-name{font-size:19px;font-weight:800;letter-spacing:-.02em}.brand-sub{margin-top:4px;color:var(--color-neutral-500)}.privacy-badge{padding:8px 13px;border-width:2px;border-color:var(--color-blue-600);border-radius:999px;color:var(--color-blue-700);background:var(--color-white);box-shadow:none;font-weight:900;font-size:11px}main{gap:16px;grid-template-columns:minmax(0,1.4fr) minmax(360px,.6fr)}.app-panel{border:2px solid var(--color-neutral-900);border-radius:var(--radius-panel);background:var(--color-white);box-shadow:5px 6px 0 var(--color-neutral-900)}.preview-panel{min-height:var(--preview-panel-height);padding:var(--space-panel-padding)}.preview-header{min-height:42px;padding:0 2px 11px}.preview-title{color:var(--color-neutral-700);font-size:13px;font-weight:600}.preview-file-meta{color:var(--color-neutral-400)}.preview-stage{border:0;border-radius:17px;background-color:#e3e7e2;background-image:radial-gradient(#bdc7c0 1px,transparent 1px);background-size:12px 12px}.preview-stage.dragover{outline:2px solid var(--color-blue-600);outline-offset:-2px;background-color:var(--color-blue-50)}.upload-placeholder-icon{border-color:var(--color-neutral-400);border-radius:12px;background:var(--color-white)}.upload-placeholder-title{color:var(--color-neutral-900);font-size:clamp(22px,2.7vw,32px);font-weight:650}.upload-placeholder p{color:var(--color-neutral-500)}.settings-panel{padding:var(--space-panel-padding)}.section-heading{gap:10px;margin-bottom:var(--space-section-gap)}.collapsible-summary{margin-bottom:0}.section-number{border-radius:9px;color:var(--color-blue-700);background:var(--color-blue-100);font-weight:900}.section-heading h2{color:var(--color-neutral-900);font-size:16px;font-weight:800}.section-heading p{color:var(--color-neutral-500)}label,.form-label{color:var(--color-neutral-700);font-size:12px;font-weight:600}input[type=text],input[type=date],select{min-height:var(--control-height);border-width:2px;border-color:var(--color-neutral-300);border-radius:13px;color:var(--color-neutral-900);background-color:#fbfffd;box-shadow:none}select{padding-right:34px;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--color-neutral-500) 50%),linear-gradient(135deg,var(--color-neutral-500) 50%,transparent 50%);background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}input[type=text]:hover,input[type=date]:hover,select:hover{border-color:var(--color-neutral-400)}input[type=text]:focus,input[type=date]:focus,select:focus{border-color:var(--color-blue-600);box-shadow:0 0 0 3px var(--color-calm-focus-ring)}.custom-dropdown-trigger{min-height:var(--control-height);border-width:2px;border-color:var(--color-neutral-300);border-radius:13px;color:var(--color-neutral-900);background-color:#fbfffd;box-shadow:none}.custom-dropdown-trigger:hover{border-color:var(--color-neutral-400);background:var(--color-neutral-50)}.custom-dropdown-trigger:focus-visible{border-color:var(--color-blue-600);box-shadow:0 0 0 3px var(--color-calm-focus-ring)}.btn{min-height:43px;border-width:2px;border-color:var(--color-neutral-900);border-radius:13px;font-size:12px;font-weight:800}.btn-primary{background:var(--color-coral);color:var(--color-white);box-shadow:3px 3px 0 var(--color-neutral-900)}.btn-primary:hover{background:#ff6947}.btn-secondary,.btn-ghost{color:var(--color-neutral-900);background:var(--color-white);box-shadow:none}.btn-secondary:hover,.btn-ghost:hover{border-color:var(--color-neutral-400);background:var(--color-neutral-50)}.slider-value{border-color:var(--color-neutral-200);border-radius:7px;color:var(--color-neutral-700);box-shadow:0 1px 2px var(--color-calm-shadow-soft)}.color-swatch{box-shadow:0 0 0 1px var(--color-neutral-300)}.color-swatch[aria-pressed=true]{box-shadow:0 0 0 2px var(--color-blue-600)}.section-divider{margin:var(--space-divider-gap) 0;background:var(--color-neutral-200)}.privacy-alert{border:0;border-radius:14px;color:var(--color-neutral-600);background:var(--color-blue-100)}.privacy-alert strong{color:var(--color-blue-800)}.privacy-lock-icon:after,.privacy-lock-icon:before{border-color:var(--color-blue-600)}.toast-notification{border:2px solid var(--color-neutral-900);border-radius:15px;color:var(--color-neutral-900);background:var(--color-yellow);box-shadow:4px 4px 0 var(--color-neutral-900);font-weight:900}@media (max-width: 920px){.app-shell{width:min(100% - 24px,740px)}main{display:flex;flex-direction:column;gap:14px}.preview-column,.settings-column{display:contents}.preview-panel{width:100%;height:auto!important;order:1;min-height:clamp(300px,42vh,470px)}.settings-panel{width:100%;overflow-y:visible;order:2}.privacy-panel{width:100%;order:3}.preview-stage{height:clamp(240px,34vh,380px);min-height:clamp(240px,34vh,380px);max-height:clamp(240px,34vh,380px);order:-2}.preview-panel>.preview-header{order:-3}.preview-panel>.section-heading{order:-1}.preview-panel>.form-row-3{order:-1}.preview-panel>.section-divider{order:-1}}@container (max-width: 500px){.form-row{grid-template-columns:minmax(0,1fr);gap:0}.export-actions{grid-template-columns:minmax(0,1fr)}.custom-dropdown-menu{width:100%;max-width:100%}.custom-dropdown-option{white-space:normal}}.form-row-2{grid-template-columns:1fr 1fr;gap:10px}@media (max-width: 520px){.app-shell{width:min(100% - 16px,480px);padding-top:0}header{margin:0;padding:14px 4px 12px}.brand-sub{display:none}.privacy-badge{padding:8px 10px;font-size:10px}main{gap:12px}.settings-panel{padding:var(--space-panel-padding)}.settings-panel .form-field,.settings-panel .form-row,.settings-panel .form-row>.form-field,.settings-panel .custom-dropdown,.settings-panel .slider-track{width:100%;max-width:none}.preview-panel{min-height:min(380px,40vh);padding:18px}.preview-header{flex-wrap:wrap;align-items:flex-start;row-gap:6px;padding:2px 2px 12px}.preview-header-end{flex-basis:100%;justify-content:space-between}.preview-file-meta{max-width:none;text-align:left}.preview-stage{height:min(300px,32vh);min-height:min(300px,32vh);max-height:min(300px,32vh)}.upload-placeholder{width:min(390px,92%)}.upload-placeholder-icon{width:78px;height:58px;margin-bottom:16px}.upload-placeholder-icon:after{left:-15px;top:21px;width:108px;font-size:8px}.upload-placeholder-title{font-size:21px}.upload-placeholder p{margin:10px auto 15px;font-size:12px;line-height:1.5}.upload-hint{max-width:260px;margin:10px auto 0;line-height:1.45;text-wrap:balance}.form-row,.export-actions{grid-template-columns:1fr}}@media (max-width: 380px){.app-shell{width:calc(100% - 12px);padding-top:0}header{padding:10px 4px}.brand-mark{width:36px;height:36px}.brand-name{font-size:17px}.privacy-badge{gap:6px;padding:7px 8px}.preview-panel{min-height:min(350px,38vh)}.preview-stage{height:min(270px,30vh);min-height:min(270px,30vh);max-height:min(270px,30vh)}.settings-panel{padding:var(--space-panel-padding)}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}