:root{color:#e6d6a2;background:#101513;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-synthesis:none;color-scheme:dark;--ivory: #e6d6a2;--dim: #9ba69e;--metal: #23312c;--edge: #68766d;--amber: #d9a541;--green: #31564b}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}body{min-width:320px}button,input{font:inherit}.machine{position:relative;width:100%;height:100%;isolation:isolate}#film{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair;touch-action:none}.rack-label{position:absolute;z-index:4;inset:0 0 auto;height:53px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-bottom:1px solid rgba(141,158,147,.22);color:var(--dim);background:#0a0e0cbd;font-size:9px;line-height:1;letter-spacing:.12em;text-transform:uppercase;pointer-events:none}.rack-label b{color:var(--ivory);font-size:12px;letter-spacing:.24em}.rack-label .status{display:flex;gap:9px;align-items:center;color:#c9ba89}.rack-label i{width:8px;height:8px;border-radius:50%;background:var(--amber);box-shadow:0 0 9px #d9a5418c;animation:lamp 2.8s ease-in-out infinite}.frame-readout{position:absolute;z-index:4;left:22px;top:68px;width:172px;display:grid;gap:4px;padding:10px 12px;color:#c5d0c8;background:#263630;border:2px solid #77867b;box-shadow:0 5px 18px #000000a6,inset 0 0 0 3px #17211d;pointer-events:none;font-size:8px;letter-spacing:.1em;text-transform:uppercase}.frame-readout:after{content:"";position:absolute;right:9px;top:9px;width:8px;height:8px;border-radius:50%;background:var(--amber);box-shadow:0 0 7px #d9a54180}.frame-readout strong{color:var(--ivory);font-size:14px;letter-spacing:.16em}.loupe-note{position:absolute;z-index:5;left:73%;top:45%;transform:translate(44px,-56px);color:#1b251f;background:#d7c985;border:2px solid #2b433b;padding:4px 7px;font-size:9px;font-weight:900;pointer-events:none}.transport{position:absolute;z-index:6;inset:0;pointer-events:none}.transport>*{position:absolute;pointer-events:auto}button{min-width:44px;min-height:44px;border:1px solid #718077;border-radius:2px;color:#e1d39f;background:linear-gradient(#34463f,#17211d);box-shadow:inset 0 1px #ffffff14,0 3px #070a09;cursor:pointer;transition:color .1s,border-color .1s,transform .1s}button:hover{color:#fff3c4;border-color:#b8c5bb}button:active{transform:translateY(2px);box-shadow:inset 0 1px #00000080}button:focus-visible,input:focus-visible{outline:3px solid #f3cf5b;outline-offset:3px}.mode-bank{left:24px;bottom:24px;width:272px;height:84px;display:grid;grid-template-columns:.72fr .92fr 1.45fr;gap:5px;padding:9px;border:3px solid #526159;background:#111815;box-shadow:0 8px 24px #000000b3,inset 0 0 0 3px #26342f}.mode-bank button{font-size:9px;letter-spacing:.08em}.mode-bank button[aria-pressed=true]{color:#18201c;background:linear-gradient(#e0b552,#a9762c);border-color:#f1d17d;box-shadow:inset 0 0 0 1px #6d4d20}.speed-control{left:50%;top:67px;transform:translate(-50%);width:320px;min-height:72px;display:grid;align-content:center;gap:4px;padding:9px 14px;border:3px solid #59675f;background:#121a17;box-shadow:0 8px 22px #0000009e,inset 0 0 0 2px #26352f;color:var(--dim);font-size:8px;letter-spacing:.12em}.speed-control span{display:flex;justify-content:space-between;align-items:baseline}.speed-control output{color:var(--ivory);font-size:12px}input[type=range]{width:100%;height:44px;margin:-7px 0 -9px;accent-color:var(--amber);cursor:ew-resize}.transport-keys{right:24px;bottom:24px;width:202px;height:84px;display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:9px;border:3px solid #526159;background:#111815;box-shadow:0 8px 24px #000000b3,inset 0 0 0 3px #26342f}.transport-keys button{display:grid;place-items:center;padding:0;font-size:13px}.transport-keys span{display:block;color:#96a198;font-size:7px;margin-top:-7px}.splice{left:50%;bottom:21px;transform:translate(-50%);width:224px;height:74px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 14px;background:linear-gradient(#b58032,#65461d);border:3px solid #ddb65a;color:#161b17;letter-spacing:.1em;font-size:9px;font-weight:900;text-align:left;box-shadow:0 8px 24px #000000b8,inset 0 0 0 2px #6b4b20}.splice output{font-size:17px;color:#fff0ad}.meter{right:24px;top:68px;width:178px;height:72px;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 12px;align-content:center;gap:7px 10px;padding:9px 12px;border:3px solid #59675f;background:#111815;box-shadow:0 8px 22px #0000009e,inset 0 0 0 2px #26352f;color:var(--dim);font-size:8px;letter-spacing:.1em}.meter strong{color:var(--ivory);font-size:16px}.meter>div{grid-column:1 / -1;background:#202c27;border:1px solid #69766e;padding:2px}.meter i{display:block;height:5px;width:50%;background:#d9a541;transition:width .2s ease}@keyframes lamp{0%,to{opacity:.48}50%{opacity:1}}@media(max-width:900px)and (min-width:601px){.mode-bank{width:230px}.transport-keys{width:180px}.meter{display:none}}@media(max-width:600px){.rack-label{height:53px;padding:0 11px;font-size:7px}.rack-label b{font-size:10px}.rack-label div:first-child span{display:none}.frame-readout{left:92px;top:68px;width:calc(100% - 184px);min-width:191px;padding:6px 8px;gap:2px;text-align:center}.frame-readout strong{font-size:11px}.frame-readout span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.loupe-note,.meter{display:none}.mode-bank{left:12px;bottom:185px;width:calc(100% - 24px);height:60px;padding:6px}.speed-control{left:12px;top:auto;bottom:116px;transform:none;width:calc(100% - 24px);min-height:61px;padding:5px 10px;grid-template-columns:102px 1fr;align-items:center}.speed-control span{display:grid;gap:2px}.transport-keys{left:12px;right:auto;bottom:17px;width:calc(50% - 17px);height:90px;padding:7px}.splice{left:auto;right:12px;bottom:17px;transform:none;width:calc(50% - 17px);height:90px;padding:0 10px;flex-direction:column;justify-content:center;align-items:flex-start;gap:3px}.splice output{font-size:16px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}