:root { color-scheme: light; font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif; color: #51321d; background: #f2b13e; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; overflow-x: hidden; overflow-y: auto; background: #c86d24; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .13; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.7' numOctaves='3' stitchTiles='stitchTiles'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); }
button, input, select { font: inherit; }
.app-shell { position: relative; isolation: isolate; width: min(100%, 500px); min-height: 100svh; margin: auto; padding: max(15px, env(safe-area-inset-top)) 22px max(18px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; overflow: visible; }
.mini-header { position: relative; z-index: 20; display: flex; justify-content: center; min-height: 22px; pointer-events: none; }
.mini-logo { color: #8f4b20; font-size: .68rem; font-weight: 700; letter-spacing: .15em; }
.instrument { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; margin-bottom: 14px; pointer-events: none; }
.instrument::before { content: ""; flex: 0 0 clamp(250px, 43svh, 410px); width: 1px; margin: 8px 0 22px; pointer-events: none; }
.guiro-stage { position: fixed; z-index: 0; inset: 0; width: 100%; height: 100%; margin: 0; overflow: hidden; cursor: ew-resize; touch-action: none; user-select: none; -webkit-tap-highlight-color: transparent; pointer-events: auto; }
.guiro { position: absolute; inset: 0 -4%; overflow: hidden; border: 0; outline: none; background: radial-gradient(ellipse at 50% 27%, #ffc34b 0 19%, #e98528 40%, transparent 62%), radial-gradient(ellipse at 50% -8%, #ffe177 0, transparent 38%), radial-gradient(ellipse at 50% 110%, #71301499 0, transparent 48%), linear-gradient(90deg, #833717 0, #d77122 8%, #f6ad38 28%, #ffc850 48%, #e28127 72%, #8a3817 100%); box-shadow: inset 28px 0 38px #4b1e107a, inset -30px 0 40px #4b1e107a, inset 0 22px 35px #ffe48a55, inset 0 -30px 45px #56200f66; transform: translateZ(0); }
.guiro::before { content: ""; position: absolute; z-index: 5; right: 8%; bottom: max(7%, calc(env(safe-area-inset-bottom) + 24px)); width: clamp(38px, 11vw, 64px); aspect-ratio: 1; border: 4px solid #723016; border-radius: 50%; background: radial-gradient(circle at 44% 43%, #461b0c 0 24%, #9e471b 29% 61%, #e88828 68%); box-shadow: inset 3px 3px 7px #351407aa, 0 2px 3px #ffd86b66; }
.guiro::after { content: ""; position: absolute; z-index: 6; inset: 0; pointer-events: none; opacity: .2; background: repeating-radial-gradient(ellipse at 48% 42%, transparent 0 62px, #6d2813 64px, transparent 67px 118px); box-shadow: inset 0 12px 18px #45180d88, inset 0 -10px 16px #ffe68155; }
.guiro-shine { position: absolute; z-index: 7; inset: 0 52% 0 19%; background: linear-gradient(90deg, transparent, #fff0a65c, transparent); transform: skewX(-7deg); pointer-events: none; }
.ridges { position: absolute; z-index: 7; top: max(45px, calc(env(safe-area-inset-top) + 30px)); left: 50%; width: 319px; height: clamp(250px, 43svh, 410px); overflow: hidden; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 8px, #ffd069 8px 11px, #b44d1b 11px 13px, #61230f 13px 18px, transparent 18px 29px); background-size: 29px 100%; transform: translateX(-50%); transition: width 220ms ease, height 220ms ease, top 220ms ease; }
.ridges::before, .ridges::after { content: none; }
.wood-grain { position: absolute; z-index: 8; inset: 0; opacity: .12; pointer-events: none; mix-blend-mode: multiply; background: repeating-radial-gradient(ellipse at 50% 50%, transparent 0 35px, #5c2111 37px, transparent 40px 66px); transform: scale(1.7, 1); }
.sound-wave { position: absolute; z-index: 8; top: 46%; left: 50%; width: 34px; height: 34px; border: 3px solid #fff1a5; border-radius: 50%; opacity: 0; pointer-events: none; }
.guiro.sounding .sound-wave { animation: sound-wave 300ms ease-out; }
.guiro.sounding .wave-two { animation-delay: 45ms; }
.guiro.reverse .sound-wave { left: 30%; }
@keyframes sound-wave { from { opacity: .8; transform: translate(-50%, -50%) scale(.2); } to { opacity: 0; transform: translate(-50%, -50%) scale(2.6); } }
.scraper { --scraper-x: 50vw; --scraper-y: 50vh; position: absolute; z-index: 10; left: 0; top: 0; width: 106px; height: 10px; border-radius: 999px; opacity: 0; pointer-events: none; background: #6f3218; box-shadow: 0 2px 3px #4a1b0d55; transform: translate(var(--scraper-x), var(--scraper-y)) translate(-12%, -50%) rotate(-13deg); transition: opacity 150ms; }
.scraper span { display: none; }
.guiro-stage.active .scraper { opacity: .45; }
.guiro-stage.engaged .scraper { opacity: 1; }
.play-guide { position: relative; z-index: 20; min-height: 18px; margin: 5px 0 7px; padding: 6px 12px; border-radius: 999px; color: #fff2c0; background: #5a25168f; text-align: center; font-size: .77rem; font-weight: 800; text-shadow: 0 1px #3e160b; backdrop-filter: blur(5px); }
.play-guide[hidden] { display: none; }
.play-guide[data-state="waiting"] { animation: pulse 1s infinite; }
.play-guide[data-state="error"] { color: #6d1717; }
@keyframes pulse { 50% { opacity: .4; } }
.meter { position: relative; z-index: 20; width: min(270px, 80%); height: 4px; margin: 5px 0 16px; overflow: hidden; border-radius: 5px; background: #5d2516a8; }
.meter span { display: block; width: 0; height: 100%; margin: auto; border-radius: inherit; background: #fff0a0; transition: width 70ms; }
.start-button { position: relative; z-index: 20; width: 100%; min-height: 57px; border: 1px solid #603118; border-radius: 17px; color: #fff5d5; background: linear-gradient(135deg, #552a18, #25140d); box-shadow: 0 9px 20px #6b331488, inset 0 1px #a9683d; font-weight: 800; letter-spacing: .07em; cursor: pointer; pointer-events: auto; }
.start-button:disabled { opacity: .68; }
.button-icon { margin-right: 10px; color: #ffc94d; font-size: .68rem; }
.start-button[hidden] { display: none; }
.settings-panel { position: relative; z-index: 30; flex: 0 0 auto; border: 1px solid #f1d69b; border-radius: 17px; overflow: hidden; background: #fff9e5e8; box-shadow: 0 8px 25px #6d3b2055; backdrop-filter: blur(9px); }
.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: #ad601f; 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 #ead7b2; }
.field { display: block; margin-bottom: 18px; }
.field > span { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: .8rem; }
output { min-width: 36px; padding: 2px 7px; border-radius: 10px; color: #91461d; background: #f1dcb7; text-align: center; font-weight: 800; }
input[type="range"] { width: 100%; height: 5px; appearance: none; border-radius: 5px; outline: 0; background: #d8bb8e; accent-color: #b96323; }
input[type="range"]::-webkit-slider-thumb { width: 22px; height: 22px; appearance: none; border: 4px solid #fff7df; border-radius: 50%; background: #b96323; box-shadow: 0 2px 5px #5d291d55; }
.select-field { display: grid; grid-template-columns: 1fr auto; align-items: center; font-size: .8rem; font-weight: 700; }
select { max-width: 180px; padding: 9px 30px 9px 11px; border: 1px solid #d6b681; border-radius: 10px; color: #593425; background: #fffaf1; font-size: .78rem; }
.custom-audio { margin-top: 18px; padding: 13px; border: 1px solid #ead7b2; border-radius: 14px; background: #fff6e7b8; }
.custom-audio-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.custom-audio h2 { margin: 0; font-size: .82rem; }
.audio-badge { flex: 0 0 auto; padding: 3px 8px; border-radius: 999px; color: #873f20; background: #ecd6ae; font-size: .66rem; font-weight: 800; }
.audio-status { margin: 0 0 10px; color: #6f4d3c; font-size: .7rem; line-height: 1.55; }
.audio-download { display: inline-block; margin: -5px 0 10px; color: #873f20; font-size: .64rem; text-underline-offset: 2px; }
.audio-download[hidden] { display: none; }
.audio-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.audio-actions button { min-height: 39px; padding: 8px; border: 1px solid #cba274; border-radius: 10px; color: #873f20; background: #fffaf1; font-size: .72rem; font-weight: 800; cursor: pointer; }
.audio-actions button:disabled { opacity: .48; cursor: not-allowed; }
.audio-actions button[hidden] { display: none; }
.audio-note { margin: 9px 0 0; color: #806048; font-size: .62rem; line-height: 1.45; }
.audio-editor { margin-top: 11px; padding: 10px; border: 1px solid #dfbc8c; border-radius: 11px; background: #fffaf1; }
.audio-editor[hidden] { display: none; }
.audio-editor-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.audio-editor h3 { margin: 0; font-size: .72rem; }
.audio-editor-heading output { font-size: .65rem; }
.audio-waveform { display: block; width: 100%; height: 82px; border-radius: 8px; background: #f2dfb8; touch-action: none; }
.trim-control { display: block; margin-top: 9px; }
.trim-control > span { display: flex; justify-content: space-between; color: #6f4d3c; font-size: .65rem; font-weight: 700; }
.trim-control output { padding: 0; color: #93461d; background: transparent; font-size: inherit; }
.trim-control input { margin-top: 7px; }
.audio-editor-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 11px; }
.audio-editor-actions button { min-height: 37px; padding: 7px; border: 1px solid #cba274; border-radius: 9px; color: #873f20; background: #fff; font-size: .68rem; font-weight: 800; cursor: pointer; }
.audio-editor-actions #saveSelectionButton { color: #fff8e8; border-color: #873716; background: #a9501e; }
.audio-editor-actions #cancelSelectionButton { grid-column: 1 / -1; min-height: 32px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mode-off-button { width: 100%; margin-top: 17px; padding: 11px; border: 1px solid #c99b6e; border-radius: 11px; color: #923f1c; background: #fff8e7; font-size: .76rem; font-weight: 800; cursor: pointer; }
.mode-off-button[hidden] { display: none; }
.hint { margin: 15px 0 0; color: #806048; text-align: center; font-size: .64rem; line-height: 1.55; }
.app-footer { margin-top: 14px; padding-top: 12px; border-top: 1px solid #ead7b2; color: #806048; text-align: center; font-size: .64rem; line-height: 1.6; }
.app-footer a { color: #873f20; text-underline-offset: 2px; }
.app-shell.menu-open .scraper { opacity: 0; }
.app-shell.menu-open .instrument::before { flex-basis: 104px; margin: 0; }
.app-shell.menu-open .ridges { top: max(37px, calc(env(safe-area-inset-top) + 22px)); width: 116px; height: 104px; }
@media (max-width: 350px) { .ridges { width: 261px; } }
@media (max-height: 740px) { .app-shell { padding-top: 10px; } .instrument::before { flex-basis: clamp(170px, 31svh, 230px); margin: 5px 0 10px; } .ridges { top: max(37px, calc(env(safe-area-inset-top) + 27px)); width: 261px; height: clamp(170px, 31svh, 230px); } .app-shell.menu-open .instrument::before { flex-basis: 65px; margin: 0; } .app-shell.menu-open .ridges { top: max(32px, calc(env(safe-area-inset-top) + 22px)); width: 87px; height: 65px; } .play-guide { margin-top: 2px; } .meter { margin-bottom: 10px; } .start-button { min-height: 51px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; } }