:root { color-scheme: light; font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif; color: #fff5da; background: #ed401b; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; background: linear-gradient(105deg, #c92f16 0, #f34b20 19%, #ed3e19 67%, #bd2814 100%); }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .1; mix-blend-mode: soft-light; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); }
button, input, select { font: inherit; }
.app-shell { width: min(100%, 500px); min-height: 100svh; margin: auto; padding: max(16px, env(safe-area-inset-top)) 22px max(18px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; overflow: hidden; }
.mini-header { display: flex; justify-content: center; min-height: 22px; }
.mini-logo { color: #912718; font-size: .7rem; font-weight: 700; letter-spacing: .13em; }
.instrument { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; margin: 0 0 14px; }
.naruko { position: relative; width: min(64vw, 280px); height: clamp(250px, 43svh, 410px); margin: 8px 0 22px; perspective: 420px; transform-style: preserve-3d; touch-action: none; cursor: grab; -webkit-tap-highlight-color: transparent; transition: width 220ms ease, height 220ms ease, margin 220ms ease; }
.naruko.held { cursor: grabbing; }
.naruko.held .clapper, .naruko.held .clapper-stripe { filter: brightness(.84); transition-duration: 90ms; }
.app-shell.menu-open .naruko { width: 108px; height: 104px; margin: 0; }
.clapper { position: absolute; z-index: 2; top: 0; width: 33.333%; height: 100%; border-radius: 5px 5px 13px 13px; background: linear-gradient(90deg, #080706, #2b211b 48%, #070504); box-shadow: inset 2px 0 #72584966, inset -2px 0 #0008, 0 9px 15px #68130e66; transform-origin: 50% 96%; transform-style: preserve-3d; backface-visibility: visible; transition: transform 55ms linear, box-shadow 55ms linear; will-change: transform; }
.clapper::after { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: .25; background: repeating-linear-gradient(88deg, transparent 0 11px, #a17a5d 12px, transparent 13px); }
.clapper-left { left: 0; transform: translate3d(var(--left-x, 0), var(--board-y, 0), var(--board-lift, 0)) rotateX(var(--left-tilt, 0deg)); }
.clapper-right { right: 0; transform: translate3d(var(--right-x, 0), var(--board-y, 0), var(--board-lift, 0)) rotateX(var(--right-tilt, 0deg)); }
.clapper-stripe { position: absolute; z-index: 3; inset: 0 33.333%; border-radius: 2px 2px 8px 8px; background: linear-gradient(90deg, #e8ac00, #ffe12b 45%, #e1a400); box-shadow: inset 2px 0 #fff477, inset -2px 0 #8f6800, 0 8px 12px #71170d40; transform-origin: 50% 96%; transform: translate3d(var(--stripe-x, 0), var(--board-y, 0), var(--stripe-lift, 0)) rotateX(var(--stripe-tilt, 0deg)); transition: transform 75ms linear; will-change: transform; }
.naruko.hit .clapper-left, .naruko.hit .clapper-right { transform: translate3d(0, 10px, 27px) rotateX(-49deg); box-shadow: 0 22px 20px #5c120d70; }
.naruko.hit .clapper-stripe { animation: stripe-hit 140ms ease-out; }
@keyframes stripe-hit { 35% { transform: translate3d(0, 9px, 24px) rotateX(-46deg); filter: brightness(1.2); } }
.status-row { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.status-row p { margin: 0; font-size: .8rem; font-weight: 700; color: #fff0ce; text-shadow: 0 1px #74160c80; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #ffdc96; box-shadow: 0 0 0 4px #ffdc962b; }
.status-dot[data-state="active"] { background: #ffe022; box-shadow: 0 0 0 4px #ffe02232; }
.status-dot[data-state="waiting"] { background: #fff0c7; animation: pulse 1s infinite; }
.status-dot[data-state="muted"] { background: #211915; box-shadow: 0 0 0 4px #21191532; }
.status-dot[data-state="error"], .status-dot[data-state="warning"] { background: #241713; }
@keyframes pulse { 50% { opacity: .35; } }
.meter { width: min(260px, 80%); height: 4px; margin: 12px 0 17px; overflow: hidden; border-radius: 5px; background: #871b12a8; }
.meter span { display: block; width: 0; height: 100%; margin: auto; border-radius: inherit; background: #ffd51b; transition: width 90ms; }
.start-button { width: 100%; min-height: 57px; border: 1px solid #514129; border-radius: 17px; color: #fff4d2; background: linear-gradient(135deg, #211915, #080706); box-shadow: 0 9px 20px #65140d66, inset 0 1px #6e5a45; font-weight: 800; letter-spacing: .07em; cursor: pointer; }
.start-button:disabled { opacity: .68; }
.start-button.active { border-color: #f6c900; color: #1b130c; background: linear-gradient(135deg, #ffe22d, #efb900); box-shadow: 0 9px 20px #65140d55, inset 0 1px #fff59a; }
.start-button.active .button-icon { color: #18100c; }
.button-icon { margin-right: 10px; color: #ffd51b; font-size: .68rem; }
.status-row[hidden], .start-button[hidden] { display: none; }
.settings-panel { flex: 0 0 auto; border: 1px solid #e5cdb2; border-radius: 17px; background: #fffaf0c7; box-shadow: 0 8px 25px #6d3b2020; backdrop-filter: blur(9px); overflow: hidden; }
.settings-panel summary { display: flex; align-items: center; gap: 9px; min-height: 48px; padding: 0 17px; color: #714331; cursor: pointer; list-style: none; font-size: .8rem; font-weight: 800; user-select: none; }
.settings-panel summary::-webkit-details-marker { display: none; }
.settings-icon { color: #b54021; font-size: 1rem; }
.chevron { width: 8px; height: 8px; margin-left: auto; border-right: 2px solid #9d6c58; border-bottom: 2px solid #9d6c58; transform: rotate(45deg) translateY(-2px); transition: transform 180ms; }
.settings-panel[open] .chevron { transform: rotate(225deg) translate(-2px, -2px); }
.controls { padding: 17px 18px 15px; border-top: 1px solid #ead7c1; color: #4d2a1d; }
.field { display: block; margin-bottom: 18px; }
.field > span { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; color: #4d2a1d; font-size: .8rem; }
output { min-width: 36px; padding: 2px 7px; border-radius: 10px; color: #a53b20; background: #ecd7bd; text-align: center; font-weight: 800; }
input[type="range"] { width: 100%; height: 5px; appearance: none; border-radius: 5px; outline: 0; background: #d9bfa4; accent-color: #b94222; }
input[type="range"]::-webkit-slider-thumb { width: 22px; height: 22px; appearance: none; border: 4px solid #fff7e7; border-radius: 50%; background: #bd4423; box-shadow: 0 2px 5px #5d291d55; }
.select-field { display: grid; grid-template-columns: 1fr auto; align-items: center; color: #4d2a1d; font-size: .8rem; font-weight: 700; }
select { max-width: 180px; padding: 9px 32px 9px 11px; border: 1px solid #d6b698; border-radius: 10px; color: #593425; background: #fffaf1; font-size: .78rem; }
.mode-off-button { width: 100%; margin-top: 17px; padding: 11px; border: 1px solid #cba98e; border-radius: 11px; color: #9d321e; background: #fff8eb; font-size: .76rem; font-weight: 800; cursor: pointer; }
.mode-off-button[hidden] { display: none; }
.hint { margin: 15px 0 0; color: #8b6d5c; text-align: center; font-size: .64rem; }
.app-footer { margin-top: 14px; padding-top: 12px; border-top: 1px solid #ead7c1; color: #8b6d5c; text-align: center; font-size: .64rem; line-height: 1.6; }
.app-footer a { color: #873824; text-underline-offset: 2px; }
.app-footer a:hover { color: #b33e21; }
@media (max-height: 740px) { .app-shell { padding-top: 10px; } .naruko { width: min(52vw, 210px); height: clamp(170px, 31svh, 230px); margin: 5px 0 10px; } .app-shell.menu-open .naruko { width: 78px; height: 65px; margin: -8px 0; } .status-row { margin-top: 8px; } .meter { margin-bottom: 11px; } .start-button { min-height: 51px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; } }