:root{--paper:#d8d2c4;--paper-dim:#b8b1a2;--ink:#14161a;--accent:#8c1c1c;--frame:#d8d2c459}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{color:var(--paper);background:#030407;font-family:Courier New,Courier,ui-monospace,monospace;overflow:hidden}.app{height:100%;position:relative}.app canvas{touch-action:none;cursor:grab;display:block}.film{pointer-events:none;z-index:5;background:radial-gradient(120% 90% at 50% 45%,#0000 42%,#0000008c 78%,#000000d9 100%);position:fixed;inset:0}.film:after{content:"";opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");position:absolute;inset:0}.topbar{z-index:20;pointer-events:none;text-shadow:0 2px 10px #000000e6;justify-content:space-between;align-items:flex-start;gap:12px;padding:clamp(10px,2.5vh,22px) clamp(14px,3vw,34px) 0;display:flex;position:fixed;top:0;left:0;right:0}.brand{letter-spacing:.34em;text-transform:uppercase;color:var(--paper-dim);align-items:center;gap:10px;font-size:12px;display:flex}.brand-mark{background:var(--accent);width:10px;height:10px;display:inline-block;transform:rotate(45deg);box-shadow:0 0 12px #8c1c1ccc}.actions{pointer-events:auto;gap:8px;display:flex}.btn{font:inherit;letter-spacing:.18em;text-transform:uppercase;color:var(--paper);border:1px solid var(--frame);cursor:pointer;white-space:nowrap;background:#08090c9e;padding:8px 14px;font-size:11px;transition:background .18s,border-color .18s,color .18s}.btn:hover,.btn:focus-visible{background:#181412d9;border-color:#d8d2c4b3;outline:none}.btn.small{letter-spacing:.12em;padding:4px 9px;font-size:10px}.btn.primary{border-color:#8c1c1ce6}.panel{z-index:20;pointer-events:none;flex-direction:column;gap:6px;width:min(680px,100vw - 24px);padding:8px;display:flex;position:fixed;bottom:clamp(10px,2.4vh,22px);left:50%;transform:translate(-50%)}.panel-row{pointer-events:auto;flex-wrap:wrap;justify-content:center;gap:6px;display:flex}.vp{font:inherit;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-dim);border:1px solid var(--frame);cursor:pointer;background:#08090c9e;align-items:center;gap:7px;padding:7px 12px;font-size:11px;transition:color .15s,border-color .15s,background .15s;display:inline-flex}.vp-num{opacity:.6;font-size:9px}.vp:hover,.vp.active{color:var(--paper);background:#181412e0;border-color:#d8d2c4bf}.vp.active{box-shadow:inset 0 0 0 1px #8c1c1c8c}.markers{z-index:15;pointer-events:none;position:fixed;inset:0}.marker{font:inherit;letter-spacing:.12em;text-transform:uppercase;color:var(--paper);border:1px solid var(--frame);cursor:pointer;pointer-events:auto;opacity:0;background:#06070ab8;align-items:center;gap:7px;padding:5px 10px 5px 6px;font-size:10.5px;transition:opacity .25s,background .15s,border-color .15s;display:inline-flex;position:absolute;top:0;left:0}.marker:before{content:attr(data-num);color:#0b0b0d;background:var(--paper);border-radius:50%;place-items:center;width:16px;height:16px;font-size:9px;display:grid}.marker.show{opacity:.88}.marker.show:hover,.marker.show.hover{opacity:1;background:#1c1614eb;border-color:#d8d2c4cc}.card{z-index:30;width:min(360px,100vw - 28px);max-height:78vh;color:var(--ink);background:linear-gradient(160deg,#e4ded0 0%,#d2cbba 100%);border:1px solid #00000059;padding:20px 22px 18px;font-size:13px;line-height:1.55;animation:.28s ease-out card-in;position:fixed;top:50%;right:clamp(14px,3vw,40px);overflow:auto;transform:translateY(-50%);box-shadow:0 18px 60px #000000bf,0 0 0 5px #d8d2c414}.card:before{content:"ДЕЛО";letter-spacing:.35em;color:#14161a73;font-size:9px;position:absolute;top:10px;right:12px}.card h2{letter-spacing:.1em;text-transform:uppercase;margin:0 0 2px;font-size:17px}.card .sub{letter-spacing:.16em;text-transform:uppercase;color:#14161a99;border-bottom:1px solid #14161a40;margin:0 0 12px;padding-bottom:10px;font-size:11px}.card p{margin:0 0 10px}.card .stamp{border:2px solid var(--accent);color:var(--accent);letter-spacing:.3em;text-transform:uppercase;margin:12px 0 16px;padding:4px 10px;font-size:10px;display:inline-block;transform:rotate(-2deg)}.card .row{flex-wrap:wrap;gap:8px;margin-top:4px;display:flex}.card .ink-btn{font:inherit;letter-spacing:.16em;text-transform:uppercase;color:var(--paper);background:var(--ink);border:1px solid var(--ink);cursor:pointer;padding:8px 14px;font-size:11px}.card .ink-btn.ghost{color:var(--ink);background:0 0}.card .ink-btn:hover{opacity:.82}.card .close{color:#14161a99;cursor:pointer;background:0 0;border:none;padding:4px;font-size:15px;line-height:1;position:absolute;top:6px;left:8px}@keyframes card-in{0%{opacity:0;transform:translateY(-46%)translate(14px)}to{opacity:1;transform:translateY(-50%)translate(0)}}.hint{z-index:25;border-left:2px solid var(--accent);max-width:300px;color:var(--paper-dim);background:#06070ad1;padding:12px 16px;font-size:12px;line-height:1.5;position:fixed;bottom:clamp(74px,12vh,110px);left:clamp(14px,3vw,40px)}.hint b{color:var(--paper);letter-spacing:.2em;text-transform:uppercase;margin-bottom:6px;font-size:10px;display:block}.hint .x{margin-top:8px}.loader{z-index:40;text-align:center;letter-spacing:.3em;text-transform:uppercase;color:var(--paper-dim);background:#030407;place-content:center;gap:14px;font-size:11px;display:grid;position:fixed;inset:0}.loader .bar{background:#d8d2c42e;width:220px;height:2px;overflow:hidden}.loader .bar i{background:var(--paper);width:40%;height:100%;animation:1.1s linear infinite sweep;display:block}@keyframes sweep{0%{transform:translate(-100%)}to{transform:translate(350%)}}.loader.error{color:#d99}@media (width<=640px){.card{width:auto;max-height:52vh;inset:auto 12px 12px;transform:none}@keyframes card-in{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}.hint{display:none}}
