.pochi-app:has(#cassette-touch){--app-bg:#f0eee7;--app-text:#343b36;--app-muted:#697067;--app-line:#d3d7cc;--app-focus:#b34822}#cassette-touch{--ct-ink:#363e38;--ct-muted:#6a7167;--ct-orange:#c05c32;--ct-paper:#eee9d3;--ct-green:#405b48;width:min(1120px,calc(100% - 64px));margin:12px auto 6px;font-size:13px}#cassette-touch button,#cassette-touch select{cursor:pointer;color:inherit}#cassette-touch button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0}#cassette-touch button:disabled{opacity:.38;cursor:default}#cassette-touch button:focus-visible,#cassette-touch input:focus-visible,#cassette-touch select:focus-visible{outline:3px solid #c65e33;outline-offset:4px}#cassette-touch [hidden]{display:none!important}#cassette-touch .ct-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px;gap:12px}#cassette-touch .ct-inputs,#cassette-touch .ct-toolbar-tail{display:flex;align-items:center;gap:12px}#cassette-touch .ct-soft{background:#fffdf5;border:1px solid #d4d6c9;border-radius:9px;min-height:44px;padding:9px 15px;font-weight:600;font-size:12px;box-shadow:0 2px #d6d8cc}#cassette-touch .ct-soft:hover{background:#e5e8da}#cassette-touch .ct-icon{background:transparent;min-width:44px;min-height:44px;border-radius:50%}#cassette-touch .ct-icon:hover{background:#dfe2d5}#cassette-touch .ct-state{font-size:11px;display:flex;align-items:center;gap:7px}#cassette-touch .ct-state:before{content:"";width:6px;height:6px;background:#80916d;border-radius:50%}#cassette-touch[data-mode=recording] .ct-state:before{background:#c34837}#cassette-touch .ct-scene{padding:8px 40px 9px;background:radial-gradient(ellipse at 50% 80%,#d0d4c4,transparent 64%);position:relative}#cassette-touch .ct-case{position:relative;max-width:900px;margin:auto;background:#38403b;padding:22px 43px 6px;border-radius:24px 24px 18px 18px;box-shadow:inset 0 2px 1px #647266,0 5px #232b26,0 14px 25px #5a62432b;border:1px solid #2e352f}#cassette-touch .ct-paper{background:var(--ct-paper);padding:12px 25px 8px;border-radius:10px 10px 4px 4px;overflow:hidden;box-shadow:0 0 0 2px #272f28}#cassette-touch .ct-source-label{display:flex;align-items:baseline;justify-content:space-between;gap:12px}#cassette-touch .ct-source-name{font-size:16px;font-weight:700;max-width:76%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#3c453b}#cassette-touch .ct-source-meta{font:10px ui-monospace,monospace;white-space:nowrap;color:#596351}#cassette-touch .ct-label-stripes{height:13px;margin:7px -25px 12px;background:linear-gradient(to bottom,#be5d39 0 4px,transparent 4px 6px,#ad5a36 6px 8px,transparent 8px 10px,#9a512f 10px 13px)}#cassette-touch .ct-window{height:167px;border-radius:80px;background:#252e27;border:3px solid #484f40;display:flex;align-items:center;justify-content:space-around;position:relative;box-shadow:inset 0 5px 9px #101b18}#cassette-touch .ct-tape-thread{position:absolute;left:18%;right:18%;height:48%;border-top:8px solid #725542;border-bottom:7px solid #725542;opacity:.7}#cassette-touch .ct-reel{position:relative;width:160px;height:160px;border-radius:50%;background:transparent;touch-action:none;-moz-user-select:none;user-select:none;-webkit-user-select:none;padding:0}#cassette-touch .ct-coil{position:absolute;inset:0;border-radius:50%;background:repeating-radial-gradient(circle,#685140 0 1px,#574637 1px 3px);box-shadow:inset 0 0 0 2px #aa8260;transform:scale(.98);transition:transform .07s linear}#cassette-touch .ct-rotor{position:absolute;inset:26px;border-radius:50%;background:#e6e5ca;box-shadow:0 2px 2px #050b085c;color:#414c3d;will-change:transform}#cassette-touch .ct-rotor svg{width:100%;height:100%}#cassette-touch .ct-reel-touch{position:absolute;bottom:16px;right:12px;width:32px;height:32px;display:grid;place-items:center;background:#e9ebd7;color:#425242;border-radius:50%;opacity:.84;box-shadow:0 1px 2px #111}#cassette-touch .ct-reel:hover .ct-reel-touch,#cassette-touch .ct-reel:active .ct-reel-touch{background:#d98753;color:#262f26}#cassette-touch .ct-reel:active .ct-rotor{box-shadow:inset 0 2px 7px #333c395c}#cassette-touch .ct-motion{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:3px;color:#c1caae;font:14px ui-monospace,monospace;pointer-events:none}#cassette-touch .ct-motion>span{font-size:24px;line-height:1}#cassette-touch .ct-touch-hint{display:flex;justify-content:space-between;color:#65705b;font-size:11px;gap:10px;margin-top:8px}#cassette-touch .ct-source-strip{position:relative;height:50px;margin:13px 2px 0}#cassette-touch .ct-source-strip canvas{position:absolute;width:100%;height:34px;display:block}#cassette-touch .ct-source-strip input{position:absolute;inset:0;width:100%;height:34px;margin:0;background:transparent;opacity:.8;cursor:ew-resize;accent-color:#d78b4c}#cassette-touch .ct-source-strip input::-webkit-slider-runnable-track{background:transparent}#cassette-touch .ct-source-strip input::-webkit-slider-thumb{width:8px}#cassette-touch .ct-source-times{position:absolute;bottom:0;width:100%;display:flex;justify-content:space-between;font:10px ui-monospace,monospace;color:#acb698;pointer-events:none}#cassette-touch .ct-case-base{height:14px;width:40%;margin:7px auto 0;border:1px solid #19281c;border-bottom:none;border-radius:30px 30px 0 0;display:flex;align-items:center;justify-content:space-around}#cassette-touch .ct-case-base i{width:5px;height:5px;border-radius:50%;background:#1c261e}#cassette-touch .ct-case-base span{height:5px;width:30%;background:#202c24}#cassette-touch .ct-screw{position:absolute;width:10px;height:10px;background:#a3a795;border:2px solid #16271b;border-radius:50%;z-index:1}#cassette-touch .ct-screw:after{content:"";height:1px;position:absolute;top:3px;left:0;right:0;background:#35442f;transform:rotate(-35deg)}#cassette-touch .ct-screw-1{top:13px;left:13px}#cassette-touch .ct-screw-2{top:13px;right:13px}#cassette-touch .ct-screw-3{bottom:12px;left:13px}#cassette-touch .ct-screw-4{bottom:12px;right:13px}#cassette-touch .ct-controls{display:flex;align-items:center;justify-content:center;gap:25px;margin:8px auto 10px}#cassette-touch .ct-transport{display:flex;gap:5px;padding:6px;background:#d4d9cb;border-radius:12px;box-shadow:inset 0 1px 2px #b7bfac}#cassette-touch .ct-key{min-height:53px;min-width:99px;background:#e8eadc;border-radius:6px;padding:8px 14px;font-weight:600;font-size:11px;flex-direction:column;gap:4px;box-shadow:0 3px #a7b39c}#cassette-touch .ct-key:hover{background:#f6f5e6}#cassette-touch .ct-play{background:#46614d;color:#f7f3d9;box-shadow:0 3px #2d4230}#cassette-touch .ct-play:hover{background:#3a5441}#cassette-touch .ct-record{color:#b44837}#cassette-touch[data-mode=recording] .ct-record{background:#b74837;color:#fff3df;box-shadow:0 3px #803427}#cassette-touch[data-mode=playing] .ct-play{background:#e8c98b;color:#374133}#cassette-touch .ct-level{width:5px;height:44px;border-radius:2px;background:#cdd3c3;position:relative;overflow:hidden}#cassette-touch .ct-level span{position:absolute;bottom:0;left:0;right:0;height:0;background:#668157;transition:height .04s}#cassette-touch .ct-tuning{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:center;width:90%;margin:0 auto 12px}#cassette-touch .ct-range-caption{display:flex;align-items:center;gap:18px;margin-bottom:2px}#cassette-touch .ct-range-caption label{font-size:11px;color:#5e6b56}#cassette-touch .ct-speeds{display:flex;justify-content:space-between;flex:1;font-size:10px;color:#68715e}#cassette-touch input[type=range]{accent-color:#526b4b;cursor:pointer;min-height:25px}#cassette-touch .ct-speed-panel>input{width:100%;margin:0}#cassette-touch .ct-speed-ticks{display:flex;justify-content:space-between;font:9px ui-monospace,monospace;color:#747e6a;margin:0 5px}#cassette-touch .ct-texture{display:grid;grid-template-columns:1fr 1fr;gap:22px}#cassette-touch .ct-texture-control{display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:6px;font-size:11px}#cassette-touch .ct-texture-control svg{color:#7b866d}#cassette-touch .ct-texture-control output{font:10px ui-monospace,monospace;color:#7a816e}#cassette-touch .ct-texture-control input{grid-column:1/-1;width:100%;margin:0}#cassette-touch .ct-take{border-top:1px solid #cbd2c3;padding-top:12px}#cassette-touch .ct-take-heading{display:flex;align-items:center;gap:16px;margin-bottom:8px;font-size:11px}#cassette-touch .ct-take-label{display:flex;align-items:center;gap:7px;font-weight:700}#cassette-touch .ct-take-label i{width:7px;height:7px;background:#a4ae97;border-radius:50%}#cassette-touch[data-mode=recording] .ct-take-label i{background:#c34f3d}#cassette-touch .ct-take-hint{color:#7a826e}#cassette-touch .ct-take-heading>output{margin-left:auto;font:12px ui-monospace,monospace;font-variant-numeric:tabular-nums}#cassette-touch .ct-take-track{height:49px;position:relative;background:#e5e7dc;border-top:1px solid #d7dbcc;border-bottom:1px solid #d7dbcc;overflow:hidden;border-radius:3px}#cassette-touch .ct-take-track canvas{width:100%;height:100%;display:block}#cassette-touch .ct-take-cursor{position:absolute;top:0;bottom:0;width:2px;background:#c6653b;pointer-events:none}#cassette-touch .ct-output{display:flex;align-items:center;justify-content:space-between;margin-top:10px;gap:12px}#cassette-touch .ct-save-group{display:flex;align-items:center;gap:10px}#cassette-touch .ct-save-group select{min-height:44px;border:0;border-bottom:1px solid #a3af99;background:transparent;padding:6px 26px 6px 8px;font:11px ui-monospace,monospace}#cassette-touch .ct-save{min-height:44px;padding:9px 23px;background:#bc6039;color:#fff8e6;border-radius:8px;box-shadow:0 2px #8e4021;font-size:12px;font-weight:700}#cassette-touch .ct-save:hover{background:#a74b29}#cassette-touch .ct-status{min-height:16px;margin:9px 0 0;text-align:center;font-size:10px;color:#68745e}#cassette-touch .ct-status[data-error=true]{color:#a13025}#cassette-touch .ct-help{background:#f3f2e7;color:#354531;border:1px solid #b1be9f;border-radius:16px;width:min(620px,calc(100% - 30px));padding:24px;box-shadow:0 20px 100px #25332555}#cassette-touch .ct-help::backdrop{background:#172f2360;backdrop-filter:blur(3px)}#cassette-touch .ct-help-header{display:flex;align-items:center;justify-content:space-between}#cassette-touch .ct-help h2{margin:0;font-size:16px}#cassette-touch .ct-help-diagrams{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:24px 0}#cassette-touch .ct-help-diagrams>div{display:flex;flex-direction:column;gap:12px;font-size:12px}#cassette-touch .ct-help-diagrams span{font-size:11px;line-height:1.9;color:#637458}#cassette-touch .ct-help-keys{display:flex;flex-wrap:wrap;gap:10px 18px;font-size:11px;padding:15px 0;border-top:1px solid #c7d0bc;border-bottom:1px solid #c7d0bc}#cassette-touch kbd{font:10px ui-monospace,monospace;background:#e0e6d5;border:1px solid #c3ceb5;border-radius:3px;padding:3px 5px;margin-right:4px}#cassette-touch .ct-help p{font-size:11px;line-height:1.9;color:#627254;margin:16px 0 0}@media(max-width:700px){#cassette-touch{width:calc(100% - 28px);margin:8px auto;font-size:12px}#cassette-touch .ct-toolbar{margin-bottom:5px;gap:4px}#cassette-touch .ct-inputs,#cassette-touch .ct-toolbar-tail{gap:7px}#cassette-touch .ct-soft{padding:9px 12px;gap:6px}#cassette-touch .ct-state{font-size:10px}#cassette-touch .ct-scene{padding:8px 0 9px}#cassette-touch .ct-case{padding:18px 17px 6px;border-radius:18px 18px 14px 14px}#cassette-touch .ct-paper{padding:8px 10px 6px}#cassette-touch .ct-source-name{font-size:12px;max-width:62%}#cassette-touch .ct-source-meta{font-size:9px}#cassette-touch .ct-label-stripes{margin:7px -10px 10px;height:11px}#cassette-touch .ct-window{height:120px;border-radius:65px;justify-content:space-between;padding:0 5px;border-width:2px}#cassette-touch .ct-reel{width:112px;height:112px}#cassette-touch .ct-rotor{inset:17px}#cassette-touch .ct-reel-touch{bottom:9px;right:3px;width:25px;height:25px}#cassette-touch .ct-reel-touch svg{width:17px;height:17px}#cassette-touch .ct-motion{font-size:10px;gap:3px}#cassette-touch .ct-motion>span{font-size:18px}#cassette-touch .ct-touch-hint{font-size:9px;gap:4px}#cassette-touch .ct-source-strip{margin-top:9px;height:43px}#cassette-touch .ct-screw{width:8px;height:8px}#cassette-touch .ct-screw:after{top:2px}#cassette-touch .ct-screw-1,#cassette-touch .ct-screw-2{top:10px}#cassette-touch .ct-screw-1,#cassette-touch .ct-screw-3{left:6px}#cassette-touch .ct-screw-2,#cassette-touch .ct-screw-4{right:6px}#cassette-touch .ct-controls{gap:8px;margin:7px auto 11px}#cassette-touch .ct-transport{width:calc(100% - 13px);padding:5px;gap:4px}#cassette-touch .ct-key{min-width:0;flex:1;min-height:53px;padding:7px 6px;font-size:10px}#cassette-touch .ct-level{height:45px;width:4px}#cassette-touch .ct-tuning{grid-template-columns:1fr;gap:10px;width:96%;margin-bottom:11px}#cassette-touch .ct-range-caption label{font-size:10px}#cassette-touch .ct-speeds{font-size:9px}#cassette-touch .ct-texture{gap:28px}#cassette-touch .ct-texture-control{font-size:10px}#cassette-touch .ct-take-heading{gap:9px;font-size:10px}#cassette-touch .ct-take-hint{font-size:9px}#cassette-touch .ct-output{gap:8px}#cassette-touch .ct-save-group{gap:7px}#cassette-touch .ct-save{padding:9px 18px}#cassette-touch .ct-status{font-size:9px}#cassette-touch .ct-help{padding:18px}#cassette-touch .ct-help-diagrams{gap:12px}#cassette-touch .ct-help-diagrams b,#cassette-touch .ct-help-diagrams span{font-size:10px}}@media(max-width:355px){#cassette-touch .ct-window{height:119px}#cassette-touch .ct-reel{width:99px;height:99px}#cassette-touch .ct-rotor{inset:16px}#cassette-touch .ct-source-meta{font-size:8px}}@media(prefers-reduced-motion:reduce){#cassette-touch *{transition:none!important}}#cassette-touch .ct-source-strip input{-moz-appearance:none;appearance:none;-webkit-appearance:none;border:0;opacity:1}#cassette-touch .ct-source-strip input::-webkit-slider-runnable-track{height:34px;background:transparent;border:0}#cassette-touch .ct-source-strip input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:3px;height:34px;background:#d89b56;border:0;border-radius:0}#cassette-touch .ct-source-strip input::-moz-range-track,#cassette-touch .ct-source-strip input::-moz-range-progress{height:34px;background:transparent;border:0}#cassette-touch .ct-source-strip input::-moz-range-thumb{width:3px;height:34px;background:#d89b56;border:0;border-radius:0}@media(max-width:700px){#cassette-touch .ct-take{padding-top:10px}#cassette-touch .ct-take-heading{margin-bottom:6px}#cassette-touch .ct-take-track{height:43px}#cassette-touch .ct-output{margin-top:8px}#cassette-touch .ct-status{margin-top:6px}}