:root{--ink:var(--brand-ink);--muted:var(--brand-muted);--blue:var(--brand-blue);--wash:var(--brand-wash);--line:var(--brand-line);--paper:var(--brand-paper);--accent:#cfdfef;font-family:var(--brand-font);color:var(--ink);background:var(--wash)}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:wait;opacity:.55}a{color:var(--blue)}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--brand-focus);outline-offset:3px}header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px max(24px,calc((100vw - 1344px)/2));border-bottom:1px solid var(--line);background:var(--paper)}.brand{font-size:23px;font-weight:750;text-decoration:none;color:var(--ink);letter-spacing:-.8px;display:flex;gap:10px;align-items:center}.edition{font:11px var(--brand-mono);letter-spacing:2px;border-left:1px solid var(--line);padding-left:12px}main{max-width:1392px;padding:32px 24px;margin:auto}nav{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:20px}nav button{border:1px solid var(--line);background:transparent;border-radius:10px;padding:16px 20px;text-align:left;color:var(--ink);font-weight:650;display:grid;grid-template-columns:30px 1fr;column-gap:10px;align-items:center}nav button[aria-pressed=true]{background:var(--paper);border-color:var(--blue);box-shadow:inset 0 -3px var(--blue)}nav button:hover{background:var(--brand-blue-soft)}.desk{display:grid;grid-template-columns:340px minmax(0,1fr);gap:20px;align-items:start}.controls{padding:24px;background:var(--paper);border:1px solid var(--line);border-radius:12px;min-width:0}.section-head,.preview-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}h2{font-size:18px;margin:0}h3{font-size:18px}.quiet{background:transparent;border:0;color:var(--blue);padding:8px}.muted{font-size:13px;line-height:1.8;color:var(--muted);margin:12px 0 20px}fieldset{border:0;padding:0;margin:0;min-width:0}.file-pick{padding:16px;background:var(--brand-surface-soft);border:1px dashed #8da9c2;border-radius:8px}.file-pick label{display:block}.file-pick strong{font-size:14px}.file-pick span{display:block;font-size:11px;color:var(--muted);margin:8px 0 14px;line-height:1.6}input[type=file]{font-size:12px;max-width:100%;color:var(--muted)}input::file-selector-button{border:1px solid var(--line);padding:8px;color:var(--ink);background:white;border-radius:4px;margin-right:8px}#file-list{list-style:none;padding:0;margin:12px 0 20px;display:grid;gap:8px}#file-list li{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:8px;align-items:center;font-size:12px}#file-list img{width:34px;height:34px;object-fit:cover;border-radius:3px}#file-list .name{overflow-wrap:anywhere}#file-list .arrows{display:flex;gap:2px}#file-list button{border:1px solid var(--line);background:white;color:var(--ink);border-radius:4px;min-width:28px;min-height:32px;padding:3px}#settings{display:grid;gap:16px;margin:18px 0}#settings label{display:grid;gap:7px;font-size:13px}#settings input:not([type=checkbox]),#settings select{width:100%;min-width:0;border:1px solid var(--brand-input-line);border-radius:5px;padding:9px;background:white;color:var(--ink)}#settings input[type=range]{padding:5px 0;accent-color:var(--blue)}#settings input[type=color]{height:40px}#settings .check{display:flex;align-items:center;gap:8px}#settings small{line-height:1.6;color:var(--muted)}.primary{width:100%;border:0;border-radius:6px;background:var(--blue);color:white;padding:13px;font-weight:650}.primary:hover{background:var(--brand-blue-dark)}#status{font-size:13px;line-height:1.8;margin:16px 0 0;overflow-wrap:anywhere}#status.error{color:#a13526}.preview-panel{border:1px solid var(--line);border-radius:12px;background:var(--paper);overflow:hidden;min-width:0}.preview-heading{padding:20px 24px;border-bottom:1px solid var(--line)}#dimensions{font:12px var(--brand-mono);color:var(--muted)}.stage{min-height:450px;max-height:760px;overflow:auto;padding:32px;display:flex;justify-content:center;align-items:flex-start;background-color:var(--brand-preview);background-image:radial-gradient(#b2c3d3 .7px,transparent .7px);background-size:14px 14px}#empty{align-self:center;text-align:center;color:var(--muted);padding:64px 12px}#empty p{font-size:13px;line-height:1.7}.paper-stack{position:relative;width:126px;height:90px;margin:0 auto 35px}.paper-stack i{position:absolute;width:100px;height:65px;background:#f9fcff;border:2px solid #84a1bd;border-radius:5px;left:12px;top:0;transform:rotate(-9deg)}.paper-stack i:nth-child(2){transform:rotate(5deg);top:12px}.paper-stack i:nth-child(3){transform:rotate(-2deg);top:25px;background:linear-gradient(transparent 55%,#c7daec 55%,#c7daec 64%,transparent 64%,transparent 75%,#c7daec 75%,#c7daec 84%,transparent 84%),#fff}canvas{max-width:100%;height:auto;object-fit:contain;box-shadow:0 4px 20px #233c5020}.preview-note{font-size:12px;color:var(--muted);padding:0 24px;line-height:1.7}#results{padding:0 24px 20px;display:grid;gap:8px}#results:empty{padding-bottom:0}#results a{display:flex;justify-content:space-between;gap:12px;align-items:center;border:1px solid var(--line);border-radius:6px;padding:12px;text-decoration:none;font-size:13px;overflow-wrap:anywhere}#results a:hover{background:var(--wash)}#results small{white-space:nowrap;color:var(--muted)}footer{font-size:12px;line-height:1.8;color:var(--muted);margin:28px 0}footer p{margin:4px 0}summary{cursor:pointer;margin-top:12px}.sr-only,.skip:not(:focus){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}.skip:focus{display:block;padding:12px;background:white}
@media(max-width:900px){.desk{grid-template-columns:300px minmax(0,1fr)}nav button{padding:14px 12px}.stage{padding:18px}}
@media(max-width:660px){header{padding:16px}.brand{font-size:20px}main{padding:24px 14px}.desk{grid-template-columns:minmax(0,1fr);gap:16px}nav{grid-template-columns:repeat(2,minmax(0,1fr))}nav button{font-size:14px;padding:12px}.controls{padding:20px}.stage{min-height:300px;max-height:580px;padding:16px}.preview-heading{padding:18px}#empty{padding:40px 4px}#empty h3{font-size:16px}.preview-note{padding:0 18px}#results{padding-left:18px;padding-right:18px}#file-list button{min-width:34px;min-height:36px}}

.tool-icon{display:block;flex-shrink:0;width:24px;height:24px}
.file-pick.drag-over{outline:3px solid var(--blue);background:#dcebf8}
#preview-wrap{position:relative;max-width:100%;min-width:0;overflow:hidden;flex-shrink:1}
#preview-wrap canvas{display:block}
#wm-outline{position:absolute;border:1px dashed #fff;outline:1px dashed var(--blue);pointer-events:none}
.image-handle{position:absolute;transform:translate(-50%,-50%);width:48px;height:48px;padding:0;border:2px solid #fff;border-radius:8px;color:white;background:var(--blue);box-shadow:0 1px 6px #233c5066;font-size:12px;touch-action:none;user-select:none;cursor:move}
#wm-resize{cursor:nwse-resize}
#wm-rotate{cursor:grab}#wm-rotate:active{cursor:grabbing}
.image-handle svg{width:24px;height:24px;display:block;margin:auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.image-handle:focus-visible{outline:3px solid var(--brand-focus);outline-offset:-5px}
#editor-controls{padding:14px 24px;border-bottom:1px solid var(--line);background:#f7faff}
#editor-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
#editor-fields label{display:grid;gap:4px;font-size:13px;min-width:0}
#editor-fields output{font:12px var(--brand-mono);color:var(--blue);margin-left:6px}
#editor-fields input[type=range]{width:100%;min-width:0;min-height:44px;margin:0;accent-color:var(--blue)}
#gesture-help{font-size:12px;line-height:1.7;color:var(--muted);margin:0;align-self:center;grid-column:1/-1}
#custom-position{display:grid;gap:16px}
.mobile-jump{display:none}
@media(max-width:660px){
  #settings input:not([type=checkbox]),#settings select{font-size:16px;min-height:48px}
  #settings .check{min-height:48px}#settings input[type=checkbox]{width:24px;height:24px}
  #file-list button{min-width:48px;min-height:48px}.quiet{min-height:48px}
  #editor-controls{padding:12px 18px}#editor-fields{grid-template-columns:minmax(0,1fr);gap:8px}
  #editor-fields input[type=range]{min-height:48px}
  .mobile-jump{display:flex;align-items:center;min-height:48px;font-size:14px}
  .preview-panel>.mobile-jump{margin:0 18px}
  #preview-panel,#form{scroll-margin-top:12px}
}