*{box-sizing:border-box}:root{color-scheme:light;--ink:#233d38;--green:#26594d;--dim:#50655d;--rule:#d5dfd5;--paper:#fffef9}body{margin:0;background:#f4f3ec;color:var(--ink);font:1rem/1.65 system-ui,-apple-system,"Malgun Gothic",sans-serif;word-break:keep-all}a{color:inherit;text-underline-offset:.2em}main,.nav{width:min(100% - 36px,840px);margin:auto}.nav{display:flex;align-items:center;justify-content:space-between;min-height:68px;border-bottom:1px solid var(--rule)}.nav a{display:inline-flex;align-items:center;min-height:44px;font-size:.9rem}.nav .brand{font:bold 1.25rem Georgia,Batang,serif;text-decoration:none}.welcome{display:grid;grid-template-columns:1fr minmax(120px,28%);gap:clamp(16px,4vw,40px);align-items:center;padding:clamp(22px,5vw,48px) 0}.portrait{display:block;width:100%;height:auto;aspect-ratio:5/6;object-fit:cover;object-position:50% 25%;border-radius:45% 45% 13px 13px}.welcome-copy{min-width:0}.welcome h1{font:700 clamp(2rem,5.4vw,3.4rem)/1.15 Georgia,Batang,serif;letter-spacing:-.06em;margin:0 0 15px}.lead{font-size:clamp(1.1rem,2.4vw,1.4rem);font-weight:620}.welcome p{margin:8px 0}.panel{background:var(--paper);border:1px solid var(--rule);border-radius:20px;padding:clamp(18px,4vw,32px);margin-bottom:16px}h2,h3,h4,p{margin:0}h2{font-size:clamp(1.25rem,2.6vw,1.6rem);line-height:1.4;letter-spacing:-.035em}p{margin:8px 0}.actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}button,input{font:inherit}button,.pick{cursor:pointer;min-height:48px;border-radius:10px;padding:9px 17px;font-weight:650}.pick,.primary{position:relative;display:inline-grid;place-items:center;background:var(--green);color:white;border:1px solid var(--green)}.pick input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.secondary{color:var(--ink);border:1px solid #b3c5b9;background:#f2f5ed}.quiet{border:none;background:transparent;color:var(--green);text-decoration:underline;padding:4px}.pick:focus-within,:focus-visible{outline:3px solid #8b532f;outline-offset:3px}details{border-top:1px solid var(--rule);margin-top:18px}summary{cursor:pointer;min-height:44px;padding:12px 0 8px;font-weight:650}details p,footer,.subtle,small{color:var(--dim);font-size:.9rem}.kicker{color:var(--green);font-size:.9rem;font-weight:650}.result audio{display:block;width:100%;margin:14px 0 20px}#clip-explanation:not(:empty){border-left:3px solid #759383;padding:8px 12px}#keepsake label{display:block;margin:12px 0 0}input[type=text]{display:block;width:100%;margin:5px 0;padding:10px;border:1px solid #a5b6ad;border-radius:8px;background:white;color:var(--ink)}canvas{display:block;width:100%;height:auto;margin-top:12px;background:#edf2e9;border-radius:10px}.panel [role=status]:empty{margin:0}footer{padding:4px 0 36px}footer a{display:inline-flex;align-items:center;min-height:44px}[hidden]{display:none!important}@media(max-width:500px){.welcome{grid-template-columns:minmax(0,1fr) 88px;gap:12px}.welcome-copy>p:last-child{font-size:.92rem}.actions>*{flex:1 1 210px}}
.listening-desk{margin-top:12px;padding:clamp(14px,3vw,22px);border:1px solid var(--rule);border-radius:12px;background:#f2f6ef}
.clip-filters{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.clip-filters button{min-height:44px;padding:6px 12px;border:1px solid #adbeb2;background:#fffef9;color:var(--ink);font-weight:600;font-size:.9rem}
.clip-filters button[aria-pressed=true]{background:var(--green);color:white;border-color:var(--green)}
.clip-filters button:disabled{color:#59685f;background:#ebeee8;cursor:default}
.listening-desk>label[for=clip-select]{display:block;font-weight:620;font-size:.92rem}
.listening-desk select{display:block;margin:4px 0 8px;width:100%;min-height:48px;padding:8px;border:1px solid #9cafa3;border-radius:8px;background:var(--paper);color:var(--ink);font:inherit;font-variant-numeric:tabular-nums}
.listen-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px}
.listen-actions>label,#channel-option{display:inline-flex;align-items:center;min-height:44px;gap:5px;cursor:pointer}
.listening-desk input{width:18px;height:18px;accent-color:var(--green)}
#clip-save{font-size:.92rem}
@media(max-width:430px){.clip-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.clip-filters button{padding:6px 8px;font-size:.9rem;white-space:nowrap}}

.care-option{display:flex;align-items:center;gap:8px;min-height:48px;margin-top:8px}.care-option input{width:20px;height:20px}#care-hint{max-width:48em}
.sound-story{display:flex;align-items:center;gap:18px;padding:24px;background:#e8eee4;border:1px solid #cbd8c8;border-radius:20px;color:#295d50;text-decoration:none;margin:26px 0}.sound-story>span:nth-child(2){flex:1;min-width:0}.sound-story small,.sound-story strong,.sound-story>span:nth-child(2)>span{display:block}.sound-story small{font-size:11px;letter-spacing:.07em;color:#536d56}.sound-story strong{font-size:18px;line-height:1.55;margin:6px 0}.sound-story>span:nth-child(2)>span{font-size:13px;color:#50655d}.story-icon{display:grid;place-items:center;width:46px;height:46px;flex:0 0 46px;border-radius:50%;background:#d8e5d6;font:36px Georgia,serif}.story-arrow{font-size:23px}.sound-story:focus-visible{outline:3px solid #a46737;outline-offset:4px}@media(max-width:480px){.sound-story{padding:20px 17px;gap:12px}.sound-story strong{font-size:16px}.story-icon{width:34px;height:34px;flex-basis:34px;font-size:28px}.story-arrow{font-size:20px}}

button:disabled{opacity:.55;cursor:wait}.pick:has(input:disabled){opacity:.55;cursor:wait}
.result{scroll-margin-top:20px}.result-label{display:flex;align-items:center;gap:10px;color:#50655d;font-size:13px;margin:0 0 14px}.result-label strong{display:inline-block;padding:3px 12px;background:#e2ebe2;border-radius:20px;color:#24584b;font-size:13px}.result[data-kind=hoof] .result-label strong{background:#f1e6d0;color:#775322}.result[data-kind=mixed] .result-label strong{background:#e9e5ee;color:#645273}.result[data-kind=unclear] .result-label strong{background:#ecebe5;color:#62655b}.result #impression-title{font-size:clamp(25px,4vw,34px);line-height:1.45;letter-spacing:-.035em;margin-bottom:14px}.result #impression-title:focus{outline:none}.result-scope{font-size:13px;color:#50655d;border-left:2px solid #adbda8;padding-left:12px;margin:18px 0 22px}.type-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:22px 0 12px}.type-summary button{display:flex;flex-direction:column;align-items:flex-start;gap:7px;padding:18px 15px;min-height:112px;text-align:left;background:#f0f4ed;color:#24584b;border:1px solid #b8cbb8;border-radius:14px}.type-summary button[data-summary-kind=hoof]{background:#f7f1e5;color:#775322;border-color:#dfceb1}.type-summary button[data-summary-kind=unclear]{background:#efefea;color:#555e54;border-color:#ced2c8}.type-summary strong{font-size:17px}.type-summary span{font-size:13px}.type-summary small{font-size:12px;text-decoration:underline;text-underline-offset:4px}.type-summary button:disabled{opacity:.58;cursor:default}.type-summary button:disabled small{text-decoration:none}.type-summary button:focus-visible{outline:3px solid #a46737;outline-offset:3px}.type-summary button:hover:not(:disabled){border-color:currentColor}.result #summary-total{margin:10px 0 24px}@media(max-width:540px){.type-summary{grid-template-columns:1fr;gap:8px}.type-summary button{display:grid;grid-template-columns:1fr auto;gap:2px 8px;min-height:76px;padding:13px 15px;align-items:center}.type-summary strong{font-size:16px}.type-summary span{grid-column:1;grid-row:2;font-size:12px}.type-summary small{grid-column:2;grid-row:1 / span 2;font-size:12px}.result #impression-title{font-size:26px}}