:root{--ink: #1a1a1a;--paper: #f5f1e8;--paper-dark: #ebe5d3;--accent: #e8692b;--accent-soft: #f5c9a8;--yellow: #f5d547;--mute: #888275;--line: #2a2a2a;--green: #5c8a3a;--red: #c94a3a}*{box-sizing:border-box}html,body{margin:0;padding:0;overflow-y:scroll;background:var(--paper);color:var(--ink);font-family:system-ui,sans-serif;font-size:16px;line-height:1.4}body{background-image:linear-gradient(to right,rgba(0,0,0,.04) 1px,transparent 1px),linear-gradient(to bottom,rgba(0,0,0,.04) 1px,transparent 1px);background-size:24px 24px}.mono{font-family:JetBrains Mono,monospace;font-size:.85em}.hand,.print{font-family:system-ui,sans-serif}.topbar{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:2px solid var(--line);padding:12px 24px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}.topbar h1{font-family:system-ui,sans-serif;margin:0;font-size:28px;font-weight:700}.topbar .subtitle{font-family:system-ui,sans-serif;color:var(--mute);font-size:16px}.tabs{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}.tab{font-family:system-ui,sans-serif;font-size:17px;padding:6px 14px;border:2px solid var(--line);background:var(--paper);cursor:pointer;border-radius:18px 22px 19px 21px/20px 18px 22px 19px;transition:transform .1s}.tab:hover{transform:translate(-1px,-1px)}.tab.active{background:var(--accent);color:#fff;box-shadow:3px 3px 0 var(--line)}.canvas{padding:24px;max-width:1600px;margin:0 auto}.canvas.canvas-wide{max-width:1920px}@keyframes tabSlide{0%{opacity:0;transform:translate(calc(var(--dir, 1) * 40px))}to{opacity:1;transform:translate(0)}}.tab-slide{animation:tabSlide .34s cubic-bezier(.22,.8,.3,1) backwards}@media(prefers-reduced-motion:reduce){.tab-slide{animation:none}}.screen-label{font-family:system-ui,sans-serif;font-size:22px;font-weight:700;margin:8px 0 4px;display:flex;align-items:baseline;gap:10px}.screen-label .num{background:var(--yellow);padding:0 8px;border:2px solid var(--line);border-radius:4px;font-size:18px}.screen-label .desc{font-family:system-ui,sans-serif;font-size:15px;color:var(--mute);font-weight:400}.frame{background:var(--paper);border:2.5px solid var(--line);border-radius:14px 18px 15px 20px/16px 14px 19px 15px;box-shadow:5px 5px #1a1a1a26;position:relative}.frame-header{padding:10px 16px;border-bottom:2px dashed var(--line);display:flex;align-items:center;justify-content:space-between;background:var(--paper-dark);border-radius:14px 18px 0 0/16px 14px 0 0}.frame-header .title{font-family:system-ui,sans-serif;font-size:22px;font-weight:700}.frame-header .meta{font-family:JetBrains Mono,monospace;font-size:12px;color:var(--mute)}.btn{font-family:system-ui,sans-serif;font-size:16px;padding:7px 16px;border:2px solid var(--line);background:var(--paper);cursor:pointer;border-radius:10px 14px 11px 13px/12px 10px 14px 11px;box-shadow:2px 2px 0 var(--line);transition:all .1s}.btn:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--line)}.btn:active{transform:translate(2px,2px);box-shadow:none}.btn.primary{background:var(--accent);color:#fff}.btn.accent{background:var(--yellow)}.btn.ghost{box-shadow:none;background:transparent}.btn.danger{background:var(--red);color:#fff}.btn.sm{font-size:14px;padding:4px 10px}.btn.lg{font-size:22px;padding:14px 28px;font-family:system-ui,sans-serif;font-weight:700}.btn:disabled{opacity:.4;cursor:not-allowed;filter:grayscale(.55);box-shadow:none;transform:none}.btn:disabled:hover{transform:none;box-shadow:none}button{transition:transform .07s ease,box-shadow .07s ease}button:active:not(:disabled):not(.no-press){transform:translate(2px,2px)!important;box-shadow:none!important}.box-card{cursor:pointer;transition:transform .1s ease,box-shadow .1s ease;box-shadow:4px 4px 0 var(--line)}.box-card:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--line)}.box-card:active,.box-card.is-selected{transform:translate(4px,4px);box-shadow:0 0 0 var(--line)}.loc-btn{animation:locIn .32s cubic-bezier(.2,.8,.2,1) both}@keyframes locIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.loc-btn:active:not(:disabled){transform:translate(2px,2px) scale(.97)!important}.input{font-family:JetBrains Mono,monospace;font-size:15px;padding:10px 14px;border:2px solid var(--line);background:#fff;border-radius:10px 13px 11px 14px/12px 11px 13px 12px;width:100%}.input:focus{outline:3px solid var(--yellow)}.input.big{font-size:22px;padding:16px 20px;border-width:3px}.chip{display:inline-flex;align-items:center;gap:4px;font-family:system-ui,sans-serif;font-size:14px;padding:2px 10px;border:1.5px solid var(--line);border-radius:20px;background:var(--paper-dark)}.chip.ok{background:#d8e8c4}.chip.warn{background:#fae5b0}.chip.err{background:#f5c2bb}.chip.info{background:#c4d8f5}.note{font-family:system-ui,sans-serif;font-size:18px;color:var(--accent);font-weight:700;position:absolute;max-width:220px;line-height:1.1;pointer-events:none;display:var(--note-display, block)}.note svg{overflow:visible}.placeholder-img{background:repeating-linear-gradient(45deg,var(--paper-dark),var(--paper-dark) 6px,var(--paper) 6px,var(--paper) 12px);border:1.5px dashed var(--line);display:flex;align-items:center;justify-content:center;font-family:JetBrains Mono,monospace;font-size:10px;color:var(--mute);border-radius:6px}.row{display:flex;gap:12px;align-items:center}.col{display:flex;flex-direction:column;gap:10px}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.grid-3-pack{display:grid;grid-template-columns:2fr 1.1fr;gap:20px}.spacer{flex:1}.tbl{width:100%;border-collapse:separate;border-spacing:0;font-family:system-ui,sans-serif;font-size:15px}.tbl th,.tbl td{padding:8px 10px;text-align:left;border-bottom:1.5px dashed var(--mute)}.tbl th{font-family:system-ui,sans-serif;font-size:17px;font-weight:700;background:var(--paper-dark)}.tbl tr:last-child td{border-bottom:none}.tbl .num-col{font-family:JetBrains Mono,monospace;font-size:12px}.variant-label{display:inline-block;font-family:system-ui,sans-serif;font-size:24px;font-weight:700;background:var(--accent);color:#fff;padding:4px 14px;transform:rotate(-2deg);margin-bottom:6px;border:2px solid var(--line);box-shadow:3px 3px 0 var(--line)}.tweaks-panel{position:fixed;bottom:20px;right:20px;width:280px;background:var(--paper);border:2.5px solid var(--line);border-radius:14px;padding:14px;box-shadow:6px 6px 0 var(--line);z-index:100;font-family:system-ui,sans-serif}.tweaks-panel h3{font-family:system-ui,sans-serif;margin:0 0 8px;font-size:22px;display:flex;align-items:center;gap:8px}.tweak-row{display:flex;justify-content:space-between;align-items:center;padding:5px 0;gap:10px}.tweak-row label{font-size:14px}.seg{display:inline-flex;border:1.5px solid var(--line);border-radius:8px;overflow:hidden}.seg button{font-family:system-ui,sans-serif;font-size:13px;padding:3px 8px;border:none;background:var(--paper);cursor:pointer;border-right:1.5px solid var(--line)}.seg button:last-child{border-right:none}.seg button.on{background:var(--accent);color:#fff}.scribble{text-decoration:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8'><path d='M1 4 Q 25 1 50 4 T 99 4' stroke='%23e8692b' stroke-width='2' fill='none' stroke-linecap='round'/></svg>");background-repeat:no-repeat;background-position:bottom left;background-size:100% 6px;padding-bottom:4px}.hl-yellow{background:linear-gradient(100deg,transparent 0%,var(--yellow) 10%,var(--yellow) 90%,transparent 100%);padding:0 3px}.flow-arrow{display:flex;align-items:center;justify-content:center;margin:10px 0;color:var(--accent);font-family:system-ui,sans-serif;font-size:18px}.scan-indicator{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border:1.5px dashed var(--green);border-radius:20px;font-family:system-ui,sans-serif;font-size:13px;color:var(--green)}.scan-indicator:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green);animation:blink 1.2s infinite}@keyframes blink{50%{opacity:.3}}.skeleton-list{display:flex;flex-direction:column;gap:6px}.skeleton-spinner-row{display:flex;align-items:center;gap:8px;padding:4px 2px 10px}.skeleton-spinner{width:16px;height:16px;border-radius:50%;border:2.5px solid var(--paper-dark);border-top-color:var(--accent);animation:skeletonSpin .7s linear infinite}@keyframes skeletonSpin{to{transform:rotate(360deg)}}.skeleton-card{height:54px;border-radius:10px;border:2px solid var(--line);background:var(--paper-dark);animation:skeletonPulse 1.1s ease-in-out infinite both}@keyframes skeletonPulse{0%,to{opacity:.45}50%{opacity:.9}}.item-card-exit{animation:itemSlideUpFade .42s ease forwards}@keyframes itemSlideUpFade{0%{transform:translateY(0);opacity:1}to{transform:translateY(-18px);opacity:0}}.toast-anim{animation:toastIn .55s cubic-bezier(.34,1.56,.34,1) both}.toast-anim.toast-leaving{animation:toastOut .34s cubic-bezier(.5,0,.75,0) both}@keyframes toastIn{0%{opacity:0;transform:translateY(40px) scale(.85)}to{opacity:1;transform:none}}@keyframes toastOut{0%{opacity:1;transform:none}to{opacity:0;transform:translateY(30px) scale(.9)}}.section-divider{text-align:center;margin:40px 0 20px;font-family:system-ui,sans-serif;font-size:26px;color:var(--mute);position:relative}.section-divider:before,.section-divider:after{content:"~~~~~~~~~~~~~~";color:var(--mute);margin:0 14px;letter-spacing:2px}.coffee-stain{position:absolute;width:60px;height:60px;border-radius:50%;background:radial-gradient(circle,rgba(139,90,43,.12) 0%,rgba(139,90,43,.05) 60%,transparent 80%);pointer-events:none}@media(max-width:640px){.topbar{padding:8px 10px;gap:8px}.topbar h1{font-size:20px}.topbar .subtitle{display:none}.tabs{gap:2px}.tab{font-size:13px;padding:4px 8px;border-radius:12px 14px 13px 15px/14px 12px 15px 13px}.canvas{padding:8px}.grid-2,.grid-3-pack{grid-template-columns:1fr}.btn.lg{font-size:18px;padding:10px 18px}.input.big{font-size:18px;padding:12px 14px}.tbl th{font-size:14px;padding:6px 8px}.tbl td{font-size:13px;padding:6px 8px}.frame-header{padding:8px 12px}.frame-header .title{font-size:18px}.chip{font-size:12px;padding:2px 8px}.btn.sm{font-size:12px;padding:3px 8px}}@page{size:90mm 65mm;margin:0}.print-only-label{display:none}@media print{#root{display:none!important}.print-only-label{display:flex!important}}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}