@import url("/theme.css");
:root{--bg:var(--t-bg);--bg-alt:var(--t-bg-alt);--card:var(--t-surface);--fg:var(--t-fg);--muted:var(--t-muted);--border:var(--t-border);--primary:var(--t-primary);--accent:var(--t-accent);--warn:var(--t-warn);--info:var(--t-info);--danger:var(--t-danger);--ink:var(--t-ink);--outline:var(--t-outline);--display:var(--t-font-display);--mono:var(--t-font-mono);--paper:#fff;--paper-line:#cfcfcf;font-family:system-ui,-apple-system,'Segoe UI',sans-serif;color:hsl(var(--fg));background:hsl(var(--bg));color-scheme:dark;font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;background-color:hsl(var(--bg));background-image:radial-gradient(hsl(var(--primary) / .12) 1.3px,transparent 1.7px);background-size:14px 14px;position:relative;overflow-x:hidden}
button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.55}a{color:inherit}[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid hsl(var(--warn));outline-offset:3px}
.topbar{height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,4vw,64px);background:hsl(var(--bg) / .92);color:hsl(var(--fg));position:relative;z-index:1;margin-bottom:6px}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:6px;background:var(--t-stripes)}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--display);font-size:15px;letter-spacing:.06em;font-weight:400;text-decoration:none;text-transform:uppercase;text-shadow:2px 2px 0 hsl(var(--accent))}
.brand:hover{text-shadow:2px 0 hsl(var(--accent) / .9),-2px 0 hsl(var(--info) / .9)}
.brand b{color:hsl(var(--warn));font-weight:400}
.brand-icon{display:grid;place-items:center;width:34px;height:34px;color:hsl(var(--ink));font-size:24px;background:hsl(var(--primary));border:var(--t-stroke) solid hsl(var(--outline));border-radius:50%;box-shadow:3px 3px 0 hsl(var(--accent));text-shadow:none}
.top-label{color:hsl(var(--muted));font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
main{max-width:1540px;margin:auto;padding:0 clamp(18px,3vw,45px) 75px;position:relative;z-index:1;animation:crt-boot .7s ease-out both}
.intro{display:flex;justify-content:space-between;align-items:end;gap:32px;padding:52px 8px 34px}
.eyebrow,.index{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;font-weight:700;text-transform:uppercase;color:hsl(var(--ink));background:hsl(var(--warn));border:2px solid hsl(var(--outline));border-radius:8px;padding:.28rem .7rem;transform:rotate(-2deg);box-shadow:3px 3px 0 hsl(var(--accent))}
.eyebrow{margin:0 0 15px}
.eyebrow::before{content:"★ ";color:hsl(var(--accent))}
.intro h1{font-family:var(--display);font-size:clamp(34px,4vw,59px);letter-spacing:.01em;line-height:1.13;margin:0;color:hsl(var(--fg));font-weight:400;text-shadow:4px 4px 0 hsl(var(--accent)),8px 8px 0 hsl(var(--ink))}
.intro h1 em{font-style:normal;color:hsl(var(--primary))}
.lead{max-width:640px;color:hsl(var(--muted));font-size:15px;line-height:1.65;margin:17px 0 0}
.intro-note{max-width:316px;border:var(--t-stroke) solid hsl(var(--outline));background:hsl(var(--info) / .12);border-radius:var(--t-radius);box-shadow:var(--t-offset) var(--t-offset) 0 hsl(var(--info));padding:16px 19px;display:flex;gap:12px;flex-shrink:0}
.intro-note .note-star{color:hsl(var(--warn));font-size:24px;line-height:1}
.intro-note p{font-size:12px;line-height:1.55;margin:0;color:hsl(var(--muted))}
.intro-note strong{color:hsl(var(--fg))}
.steps{display:flex;align-items:center;gap:19px;border-bottom:2px dashed hsl(var(--border));padding:0 8px 20px;margin-bottom:22px;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:hsl(var(--muted))}
.steps b{color:hsl(var(--ink));background:hsl(var(--warn));border:2px solid hsl(var(--outline));border-radius:6px;padding:.1rem .4rem;margin-right:7px;display:inline-block;transform:rotate(-2deg);box-shadow:2px 2px 0 hsl(var(--accent))}
.step-separator{font-size:18px;color:hsl(var(--accent));font-weight:400}
.workspace{display:grid;grid-template-columns:minmax(245px,290px) minmax(350px,1fr) minmax(225px,264px);gap:22px;align-items:start}
.controls{display:grid;gap:22px}
.panel{position:relative;isolation:isolate;background:hsl(var(--card));border:var(--t-stroke) solid hsl(var(--border));border-radius:var(--t-radius);box-shadow:var(--t-offset) var(--t-offset) 0 hsl(var(--info));padding:22px;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.preview-panel{box-shadow:var(--t-offset) var(--t-offset) 0 hsl(var(--primary))}
.export-panel{box-shadow:var(--t-offset) var(--t-offset) 0 hsl(var(--warn))}
.panel:hover{border-color:hsl(var(--outline));transform:translate(-2px,-2px)}
.panel-heading{margin-bottom:10px}
.panel h2{font-family:var(--display);font-weight:400;letter-spacing:.02em;font-size:21px;margin:12px 0 0;color:hsl(var(--fg));text-shadow:3px 3px 0 hsl(var(--accent))}
.panel h2:hover{text-shadow:2px 0 hsl(var(--accent) / .9),-2px 0 hsl(var(--info) / .9)}
.hint{font-size:12px;line-height:1.55;color:hsl(var(--muted));margin:9px 0 16px}
/* CRT monitor hover overlays (never on canvases or the signature overlay) */
.drop::after,.file-item::after,.export-panel::after,.small-button::after,.export-btn::after,.preset-row button::after,.batch-position::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .2s ease;background:repeating-linear-gradient(0deg,hsl(var(--t-shade) / .34) 0 1px,transparent 1px 3px),linear-gradient(180deg,transparent,hsl(var(--fg) / .13) 50%,transparent) 0 -100%/100% 38% no-repeat;box-shadow:inset 0 0 38px hsl(var(--primary) / .38),inset 0 0 0 2px hsl(var(--primary) / .45)}
.drop:hover::after,.drop.over::after,.file-item:hover::after,.export-panel:hover::after,.small-button:hover:not(:disabled)::after,.export-btn:hover:not(:disabled)::after,.preset-row button:hover:not(:disabled)::after,.batch-position:hover::after{opacity:1;animation:crt-sweep 1.3s linear infinite}
.drop:hover,.file-item:hover,.export-panel:hover,.small-button:hover:not(:disabled),.export-btn:hover:not(:disabled),.preset-row button:hover:not(:disabled),.batch-position:hover{animation:crt-pop .3s ease-out}
.drop{position:relative;overflow:hidden;min-height:132px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:var(--t-stroke) dashed hsl(var(--primary));background:hsl(var(--bg-alt));border-radius:var(--t-radius);text-align:center;cursor:pointer;color:hsl(var(--primary));gap:3px;transition:background .2s,border-color .2s}
.drop:hover,.drop.over{background:hsl(var(--primary) / .14);border-color:hsl(var(--primary));border-style:solid}
.drop.over{color:hsl(var(--fg))}
.drop-icon{font-size:28px;line-height:1.1}
.drop strong{font-family:var(--display);font-weight:400;font-size:15px;letter-spacing:.06em;text-transform:uppercase}
.drop small{color:hsl(var(--muted));font-size:11px}
.text-button{background:none;border:0;padding:10px 0;color:hsl(var(--primary));text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.04em;text-align:left;transition:color .2s}
.text-button:hover{color:hsl(var(--warn));text-shadow:2px 0 hsl(var(--accent) / .8),-2px 0 hsl(var(--info) / .8)}
.file-list{display:grid;gap:10px;margin-top:8px;max-height:275px;overflow:auto;padding:2px 6px 6px 2px}
.empty{padding:12px 0;font-size:12px;color:hsl(var(--muted));margin:0}
.file-key{font-size:10px;line-height:1.45;color:hsl(var(--muted));margin:12px 0 0}
.file-item{position:relative;overflow:hidden;border:2px solid hsl(var(--border));background:hsl(var(--bg-alt));color:hsl(var(--fg));border-radius:12px;padding:10px;display:flex;gap:9px;align-items:center;text-align:left;min-width:0;width:100%;transition:background .2s,border-color .2s,transform .12s,box-shadow .12s}
.file-item:hover{background:hsl(var(--t-surface));border-color:hsl(var(--outline));transform:translate(-1px,-1px)}
.file-item.current{border-color:hsl(var(--primary));background:hsl(var(--primary) / .14);box-shadow:3px 3px 0 hsl(var(--primary))}
.file-symbol{border-radius:6px;padding:6px 5px;background:hsl(var(--accent));color:hsl(var(--ink));border:2px solid hsl(var(--outline));font-family:var(--mono);font-size:9px;font-weight:700;flex:none;transform:rotate(-2deg)}
.file-info{display:grid;gap:2px;min-width:0;flex:1}
.file-info strong{font-size:11px;color:hsl(var(--fg));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-info small{color:hsl(var(--muted));font-size:10px}
.file-check{font-size:19px;color:hsl(var(--muted))}
.file-check.checked{color:hsl(var(--info))}
#drawCanvas{width:100%;height:92px;border:var(--t-stroke) solid hsl(var(--outline));border-radius:12px;background:linear-gradient(transparent 74%,var(--paper-line) 74.6%,transparent 75%),var(--paper);touch-action:none;display:block;box-shadow:4px 4px 0 hsl(var(--accent))}
.mark-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.small-button{position:relative;overflow:hidden;background:hsl(var(--primary));border:var(--t-stroke) solid hsl(var(--outline));color:hsl(var(--ink));border-radius:999px;padding:7px 14px;font-family:var(--display);font-size:12px;font-weight:400;letter-spacing:.07em;text-transform:uppercase;text-align:center;display:inline-block;box-shadow:5px 5px 0 hsl(var(--accent));transition:transform .12s ease,box-shadow .12s ease,background .2s}
.small-button:hover:not(:disabled){transform:translate(2px,2px);box-shadow:3px 3px 0 hsl(var(--accent))}
.small-button:active:not(:disabled){transform:translate(5px,5px);box-shadow:0 0 0 hsl(var(--accent))}
.small-button.ghost{background:transparent;color:hsl(var(--fg));box-shadow:5px 5px 0 hsl(var(--info))}
.small-button.ghost:hover:not(:disabled){background:hsl(var(--info) / .18);box-shadow:3px 3px 0 hsl(var(--info))}
.small-button.ghost:active:not(:disabled){box-shadow:0 0 0 hsl(var(--info))}
.upload-label{cursor:pointer}
.mark-status{font-family:var(--mono);font-size:11px;color:hsl(var(--muted));margin:0}
.preview-panel{min-height:610px}
.preview-head{display:flex;gap:8px;align-items:center;justify-content:space-between}
.page-count{font-family:var(--mono);font-weight:700;font-size:11px;padding:7px 10px;background:hsl(var(--warn));border:2px solid hsl(var(--outline));border-radius:8px;color:hsl(var(--ink));white-space:nowrap;transform:rotate(-2deg);box-shadow:3px 3px 0 hsl(var(--accent))}
.preview-stage{background-color:hsl(var(--bg-alt));background-image:radial-gradient(hsl(var(--primary) / .16) 1.3px,transparent 1.7px);background-size:14px 14px;border:2px dashed hsl(var(--border));min-height:430px;padding:24px;display:flex;align-items:center;justify-content:center;border-radius:12px;overflow:hidden;position:relative}
.placeholder{display:flex;flex-direction:column;gap:8px;text-align:center;align-items:center;color:hsl(var(--muted));padding:40px 8px}
.placeholder span{font-size:62px;color:hsl(var(--info))}
.placeholder strong{color:hsl(var(--fg));font-family:var(--display);font-weight:400;font-size:15px;letter-spacing:.04em}
.placeholder small{font-size:11px}
.page-wrap{position:relative;width:fit-content;max-width:100%;background:var(--paper);border:var(--t-stroke) solid hsl(var(--outline));box-shadow:6px 6px 0 hsl(var(--accent));line-height:0}
.page-wrap canvas{display:block;max-width:100%;height:auto;background:var(--paper)}
.signature-overlay{position:absolute;border:2px dashed hsl(var(--accent));background:hsl(var(--accent) / .14);cursor:grab;touch-action:none;display:flex;align-items:center;justify-content:center;line-height:normal;box-shadow:0 0 0 1px hsl(var(--ink))}
.signature-overlay:active{cursor:grabbing}
.signature-overlay img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.preset-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:15px}
.preset-row span{font-family:var(--mono);font-weight:700;font-size:11px;color:hsl(var(--muted));margin-right:4px;text-transform:uppercase;letter-spacing:.06em}
.preset-row button{position:relative;overflow:hidden;font-family:var(--mono);font-weight:700;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:hsl(var(--fg));border:2px solid hsl(var(--outline));background:hsl(var(--info) / .14);border-radius:999px;padding:7px 11px;box-shadow:3px 3px 0 hsl(var(--info));transition:transform .12s,box-shadow .12s,background .2s}
.preset-row button:hover:not(:disabled){transform:translate(2px,2px);box-shadow:1px 1px 0 hsl(var(--info));background:hsl(var(--info) / .26)}
.batch-position{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;padding:14px;background:hsl(var(--primary) / .1);border:2px solid hsl(var(--outline));border-radius:var(--t-radius)}
.batch-position>div:first-child{display:grid;gap:4px}
.batch-actions{display:flex;flex-direction:column;gap:10px;flex:none}
.batch-position strong{font-family:var(--display);font-weight:400;font-size:14px;letter-spacing:.03em;color:hsl(var(--fg))}
.batch-position span{font-size:10px;line-height:1.5;color:hsl(var(--muted))}
.batch-position button{flex:none;white-space:normal}
.review-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:17px}
.review-row span{font-size:11px;color:hsl(var(--muted))}
.review-row button{flex:none}
.notice{font-family:var(--mono);font-weight:700;font-size:12px;color:hsl(var(--info));min-height:19px;margin-top:13px;line-height:1.5}
.notice.error{color:hsl(var(--danger))}
.export-panel{position:sticky;top:18px;overflow:hidden}
.progress{padding:18px 0;border-top:2px dashed hsl(var(--border));border-bottom:2px dashed hsl(var(--border));margin:20px 0;display:grid;gap:2px}
.progress strong{font-family:var(--display);font-weight:400;font-size:28px;color:hsl(var(--warn));text-shadow:3px 3px 0 hsl(var(--accent))}
.progress span{font-size:11px;color:hsl(var(--muted))}
.progress-track{width:100%;height:14px;background:hsl(var(--ink));border:2px solid hsl(var(--outline));border-radius:999px;margin-top:12px;overflow:hidden}
.progress-track>div{width:0;height:100%;background:hsl(var(--info));border-right:2px solid hsl(var(--outline));transition:width .2s}
.consent{display:flex;align-items:start;gap:9px;font-size:11px;line-height:1.55;color:hsl(var(--muted));cursor:pointer}
.consent input{width:17px;height:17px;flex:none;accent-color:hsl(var(--primary));margin:1px 0 0}
.export-btn{position:relative;overflow:hidden;width:100%;background:hsl(var(--primary));color:hsl(var(--ink));font-family:var(--display);font-weight:400;font-size:15px;letter-spacing:.07em;text-transform:uppercase;padding:13px 20px;border:var(--t-stroke) solid hsl(var(--outline));border-radius:999px;margin-top:20px;display:flex;align-items:center;justify-content:space-between;box-shadow:5px 5px 0 hsl(var(--accent));transition:transform .12s,box-shadow .12s,background .2s}
.export-btn:hover:not(:disabled){transform:translate(2px,2px);box-shadow:3px 3px 0 hsl(var(--accent))}
.export-btn:active:not(:disabled){transform:translate(5px,5px);box-shadow:0 0 0 hsl(var(--accent))}
.export-btn:disabled{background:hsl(var(--border));color:hsl(var(--fg));box-shadow:5px 5px 0 hsl(var(--ink));opacity:1}
.export-foot{font-size:10px;color:hsl(var(--muted));line-height:1.55;margin:16px 0 0}
footer{position:relative;z-index:1;background:hsl(var(--ink));color:hsl(var(--muted));font-family:var(--mono);font-weight:700;letter-spacing:.04em;display:flex;justify-content:space-between;gap:12px;padding:33px clamp(20px,4vw,64px) 25px;font-size:11px}
footer::before{content:"";position:absolute;left:0;right:0;top:0;height:8px;background:var(--t-stripes)}
@media(max-width:1160px){.workspace{grid-template-columns:minmax(245px,300px) minmax(310px,1fr)}.export-panel{grid-column:1/-1;position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0 28px;align-items:start}.export-panel>.index,.export-panel>h2,.export-panel>.hint{grid-column:1}.export-panel .progress{grid-column:2;grid-row:1/span 3;margin:0}.export-panel .consent{grid-column:1/-1;margin-top:18px}.export-panel .export-btn{grid-column:1/-1;max-width:330px}.export-panel .export-foot{grid-column:1/-1}}
@media(max-width:700px){.topbar{height:60px;padding:0 18px}.brand{font-size:12px}.top-label{display:none}main{padding:0 14px 46px}.intro{display:block;padding:35px 3px 24px}.intro h1{font-size:39px}.lead{font-size:14px}.intro-note{max-width:none;margin-top:20px}.steps{gap:8px;justify-content:space-between;font-size:10px;padding:0 4px 16px}.steps b{display:block;margin:0 0 4px}.step-separator{font-size:14px}.workspace{grid-template-columns:1fr;gap:18px}.controls{gap:18px}.panel{padding:18px}.preview-panel{min-height:0}.preview-stage{min-height:320px;padding:13px}.batch-position{align-items:stretch;flex-direction:column}.batch-actions{flex-direction:row;flex-wrap:wrap}.batch-position button{align-self:flex-start}.review-row{align-items:stretch;flex-direction:column}.review-row button{align-self:flex-start}.export-panel{display:block}.export-panel .progress{margin:16px 0}.export-btn{max-width:none!important}footer{display:block;padding:33px 18px 25px;line-height:2}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}