:root{--ink:#14110c;--paper:#f4f0e5;--frame:#d9d4c6}*{box-sizing:border-box}html,body{height:100%;margin:0}body{color:var(--ink);background:repeating-linear-gradient(0deg,#b9b4a6,#b9b4a6 2px,#b4afa1 2px 4px);min-height:100%;font-family:Courier New,ui-monospace,Menlo,monospace}#root{justify-content:center;align-items:center;min-height:100vh;padding:24px 16px;display:flex}.machine{width:100%;max-width:920px}.scope{border:3px solid var(--ink);background:var(--paper);box-shadow:0 0 0 6px var(--frame), 0 14px 40px #00000059;line-height:0;position:relative}canvas{cursor:crosshair;touch-action:none;width:100%;height:auto;display:block}.panel{border:3px solid var(--ink);background:var(--paper);box-shadow:0 0 0 6px var(--frame), 0 8px 22px #00000047;grid-template-columns:repeat(2,1fr);gap:16px 34px;margin-top:14px;padding:14px 18px 16px;display:grid}.ctrl{flex-direction:column;gap:7px;display:flex}.ctrl .row{text-transform:uppercase;letter-spacing:.14em;justify-content:space-between;align-items:baseline;font-size:12px;font-weight:700;display:flex}.ctrl .val{letter-spacing:.06em;border-bottom:2px solid var(--ink);padding:0 3px 1px;font-size:15px}.ctrl .hint{letter-spacing:.18em;opacity:.55;text-transform:uppercase;font-size:9.5px}input[type=range]{appearance:none;cursor:pointer;background:0 0;width:100%;height:22px;margin:0}input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(var(--ink), var(--ink)) center/100% 2px no-repeat;border-left:2px solid var(--ink);border-right:2px solid var(--ink);height:22px}input[type=range]::-moz-range-track{background:linear-gradient(var(--ink), var(--ink)) center/100% 2px no-repeat;border-left:2px solid var(--ink);border-right:2px solid var(--ink);height:22px}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--paper);border:2px solid var(--ink);width:14px;height:22px;margin-top:0}input[type=range]::-moz-range-thumb{background:var(--paper);border:2px solid var(--ink);border-radius:0;width:14px;height:22px}.shutter-bar{justify-content:center;margin-top:14px;display:flex}.shutter-btn{border:3px solid var(--ink);background:var(--paper);width:60px;height:60px;box-shadow:0 0 0 6px var(--frame), 0 6px 16px #0000004d;cursor:pointer;border-radius:50%;justify-content:center;align-items:center;padding:0;transition:transform 50ms;display:flex}.shutter-btn span{background:var(--ink);border-radius:50%;width:36px;height:36px;display:block}.shutter-btn:hover{background:var(--frame)}.shutter-btn:active{transform:scale(.92)}.shutter-btn:active span{background:#3a3326}.credit{text-align:center;letter-spacing:.32em;text-transform:uppercase;opacity:.5;margin-top:12px;font-size:10px}.roll{border:3px solid var(--ink);background:var(--paper);box-shadow:0 0 0 6px var(--frame), 0 8px 22px #00000047;margin-top:14px;padding:12px 14px 14px}.roll-head{justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.roll-title{text-transform:uppercase;letter-spacing:.14em;font-size:12px;font-weight:700}.btn-clear{letter-spacing:.14em;text-transform:uppercase;color:var(--ink);background:var(--paper);border:2px solid var(--ink);cursor:pointer;padding:4px 12px;font-family:inherit;font-size:11px;font-weight:700}.btn-clear:hover{background:var(--ink);color:var(--paper)}.roll-empty{letter-spacing:.2em;text-transform:uppercase;opacity:.45;padding:14px 2px;font-size:11px}.roll-strip{gap:10px;padding-bottom:4px;display:flex;overflow-x:auto}.roll-thumb{border:2px solid var(--ink);background:var(--paper);cursor:pointer;flex:none;padding:0;line-height:0}.roll-thumb:hover{box-shadow:0 0 0 3px var(--frame)}.roll-thumb img{width:132px;height:auto;display:block}.lightbox{z-index:50;background:#14110cd1;justify-content:center;align-items:center;padding:24px;display:flex;position:fixed;inset:0}.lightbox-inner{border:3px solid var(--ink);background:var(--paper);max-width:min(92vw,1000px);box-shadow:0 0 0 6px var(--frame), 0 18px 50px #00000080;padding:14px;position:relative}.lightbox-img{width:auto;max-width:100%;height:auto;max-height:72vh;display:block}.lightbox-meta{letter-spacing:.1em;flex-wrap:wrap;gap:6px 20px;margin-top:12px;font-size:13px;font-weight:700;display:flex}.lightbox-meta .stamp{opacity:.55;margin-left:auto}.lightbox-close{letter-spacing:.12em;text-transform:uppercase;color:var(--paper);background:var(--ink);border:2px solid var(--paper);cursor:pointer;padding:6px 12px;font-family:inherit;font-size:11px;font-weight:700;position:absolute;top:-14px;right:-14px}