@font-face{font-family:Horror;src:url('./assets/horror.ttf') format('truetype');font-display:swap}*{box-sizing:border-box}html{min-height:100%;background:#160306;color-scheme:dark}body{margin:0;color:#f5eee5;font:14px system-ui,-apple-system,sans-serif;background:linear-gradient(120deg,#9b3d0e 0%,#a3200c 24%,#8c0b0d 53%,#350508 80%,#0d0203 100%);min-height:100svh;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}button,input{font:inherit}button{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible{outline:2px solid #fff;outline-offset:4px}button{color:inherit}button:disabled{opacity:.55;cursor:wait}.machine{max-width:1260px;margin:auto;display:grid;grid-template-columns:210px minmax(0,1fr);gap:18px;grid-template-areas:'controls controls' 'portrait pads' 'footer footer'}.controls{grid-area:controls;display:flex;align-items:center;justify-content:flex-end;gap:28px;min-height:62px;padding:0 8px 10px}.meter-box{background:#140807;border-radius:5px;width:148px;padding:6px 8px;font-size:9px}.meter-box canvas{display:block;width:100%;height:15px}.scale{display:flex;justify-content:space-between;font-size:8px;color:#baaca3}.pitch-control{display:flex;align-items:center;gap:18px;width:min(560px,52vw);font-size:11px}.pitch-control label{font-weight:600}.pitch-control output{width:48px;white-space:nowrap;text-align:right}.slider-wrap{flex:1;position:relative;padding-top:8px}.slider-wrap input{appearance:none;-webkit-appearance:none;width:100%;height:6px;border-radius:5px;background:linear-gradient(to right,#626a75 50%,#58616c 50%);margin:8px 0 0;display:block;position:relative;z-index:2;cursor:pointer;touch-action:pan-y}.slider-wrap input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:30px;height:30px;border-radius:50%;border:1px solid #ff7180;background:#e32b3b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 6 28 32 6 16 34 16 12 32Z' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E");box-shadow:0 2px 3px #0008}.slider-wrap input::-moz-range-thumb{width:30px;height:30px;border:1px solid #ff7180;border-radius:50%;background:#e32b3b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 6 28 32 6 16 34 16 12 32Z' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E")}.ticks{pointer-events:none;position:absolute;z-index:3;left:15px;right:15px;top:13px;height:12px;background:repeating-linear-gradient(to right,#090505 0px,#090505 1px,transparent 1px,transparent calc(100% / 24))}.pitch-scale{display:flex;justify-content:space-between;margin-top:8px;padding:0 7px;font-size:11px}.pitch-scale button{border:0;background:none;padding:0 12px;color:white;font-size:11px}.panic,.blood{font-family:Horror,serif;border:1px solid #c9858d;background:linear-gradient(#8b0714,#54050d);border-radius:6px;color:white}.panic{background:#d62836;font-size:24px;padding:5px 26px}.blood{font-size:29px;min-height:60px}.blood:active,.panic:active{filter:brightness(.7);transform:translateY(1px)}.portrait-panel{grid-area:portrait;min-width:0;background:#000;border-radius:15px;border:1px solid #77351f;display:flex;flex-direction:column;justify-content:center;padding:18px 16px;gap:28px}.art{position:relative;padding-top:60px}.art canvas{display:block;width:100%;height:auto}#yeah{position:absolute;top:0;left:0;width:100%;text-align:center;font:40px Horror,serif;visibility:hidden;line-height:1.2}.side-buttons{display:grid;gap:20px}.shuffle svg{display:block;margin:auto;width:50px;height:50px;fill:none;stroke:#fff;stroke-width:3;stroke-linejoin:round;filter:drop-shadow(0 1px 1px #000)}.pad-grid{grid-area:pads;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:24px 12px;border-radius:18px;padding:20px 14px;background:linear-gradient(135deg,#64200e,#3d0c0b 40%,#180607);border:1px solid #df541f80;min-height:520px}.pad-cell{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}.pad{position:relative;display:block;width:100%;max-width:80px;aspect-ratio:1;border-radius:50%;border:1px solid #fff4;background:linear-gradient(145deg,#ffffff55,transparent 25%,#0007),var(--color);box-shadow:0 5px 3px #0007,inset 0 1px 2px #fff8,inset 0 -3px 3px #0009;touch-action:none;user-select:none;-webkit-user-select:none;padding:13%;isolation:isolate}.pad:before{content:'';position:absolute;inset:3px;border-radius:50%;border-top:2px solid #ffffff55;transform:rotate(-28deg)}.pad-face{position:absolute;inset:15%;border-radius:50%;border:1px solid #ffffff45;background:radial-gradient(circle at 40% 30%,#0001,#ffffff22),var(--color);box-shadow:0 -2px 2px #000b,0 3px 2px #ffffff44,inset 0 0 3px #0005;display:grid;place-items:center;font:20px Horror,serif;color:var(--ink);pointer-events:none}.pad.pressed .pad-face,.pad:active .pad-face{transform:translateY(3px);box-shadow:0 -1px 3px #000c,inset 0 3px 5px #0007}.sample-name{font-size:9px;white-space:nowrap;color:#f4e6df}.pad.playing{outline:1px solid #ffffff66;outline-offset:3px}footer{grid-area:footer;display:flex;justify-content:space-between;gap:20px;min-height:22px;color:#c8a394;font-size:11px}footer>span:last-child{margin-left:auto;white-space:nowrap}.gate{position:fixed;inset:0;z-index:10;background:#080102e8;display:grid;place-items:center;padding:20px;backdrop-filter:blur(12px)}.gate[hidden]{display:none}.gate-card{max-width:440px;width:100%;text-align:center;padding:32px 24px;border:1px solid #8d3023;border-radius:18px;background:radial-gradient(ellipse at top,#55110c,#0c0304 75%);box-shadow:0 30px 100px #000}.eyebrow{font-size:10px;letter-spacing:2px;color:#c49a86}.gate h1{font:clamp(32px,6vw,48px)/1.08 Horror,serif;margin:26px 0}.gate em{color:#ef3e32;font-style:normal}.gate button{width:100%;margin:8px 0}.gate p{font-size:13px;color:#cbb8af;line-height:1.5}.gate .hint{font-size:11px;color:#8e7770}body.locked{overflow:hidden}@media(max-width:1000px){.machine{grid-template-columns:170px 1fr;gap:12px}.pad-grid{gap:16px 7px;padding:14px 10px;min-height:430px}.pad-face{font-size:17px}.blood{font-size:25px}.controls{gap:16px}.portrait-panel{padding:12px;gap:20px}.art{padding-top:48px}#yeah{font-size:34px}.sample-name{font-size:8px}}@media(max-width:760px){body{padding:12px}.machine{grid-template-columns:1fr;grid-template-areas:'controls' 'portrait' 'pads' 'footer';gap:12px}.controls{gap:10px;flex-wrap:wrap;padding:0;justify-content:space-between}.meter-box{width:88px;order:1}.panic{order:2;font-size:22px;min-height:44px;padding:5px 18px}.pitch-control{order:3;width:100%;gap:12px;margin-bottom:2px}.pitch-control label{width:38px}.pitch-control output{width:42px}.slider-wrap{padding-top:10px}.portrait-panel{display:grid;grid-template-columns:125px minmax(0,1fr);align-items:center;gap:20px;padding:10px 20px;min-height:190px}.art{padding-top:32px;max-width:125px}#yeah{font-size:29px}.side-buttons{gap:12px}.blood{min-height:54px;font-size:28px}.shuffle svg{width:42px;height:42px}.pad-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:20px 10px;padding:18px 12px;min-height:0}.pad{max-width:88px;min-width:44px}.pad-face{font-size:20px}.sample-name{font-size:9px}.pad-cell{gap:8px}footer{font-size:10px}}@media(min-width:600px) and (max-width:760px) and (orientation:landscape){.pad-grid{grid-template-columns:repeat(10,minmax(0,1fr))}.portrait-panel{grid-template-columns:105px 1fr;max-height:150px;min-height:0}.art{max-width:85px}.side-buttons{display:flex}.side-buttons button{flex:1}.controls{flex-wrap:nowrap}.pitch-control{order:1;width:65%}.meter-box{order:0}.panic{order:2}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}