:root{
  color-scheme: light;
  --ink:#2c4038;--ink-soft:#76857c;--line:#e9eee9;--paper:#f7f8f4;--white:#fff;
  --green:#507a6d;--green-dark:#42675c;--sage:#dae7db;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;
}
*{box-sizing:border-box}
html{min-height:100%;background:var(--paper)}
body{margin:0;min-height:100vh;min-height:100dvh;color:var(--ink);background:radial-gradient(ellipse 58% 28% at 5% 4%,#e7eee3 0%,transparent 100%),radial-gradient(ellipse 48% 22% at 99% 95%,#e9efec 0%,transparent 100%),var(--paper)}
button,select,input{font:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
button:disabled{cursor:default}
button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid #b7cfc0;outline-offset:3px}
.app-shell{width:min(100% - 32px,540px);margin:0 auto;padding:25px 0 max(34px,env(safe-area-inset-bottom))}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:24px;height:47px}
.brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink)}
.brand-mark{width:34px;height:34px;display:grid;place-items:center;color:#5d866c}
.brand-name{font-size:24px;font-weight:725;letter-spacing:-1.4px;line-height:1}
.brand-dot,.dot{color:#95b69d}
.language{display:flex;gap:10px;align-items:center;font-size:12px;font-weight:700;letter-spacing:.075em;color:#c0c8c1}
.lang-button{border:0;background:none;padding:11px 2px;color:#a6b0a8;font-size:12px;letter-spacing:.08em;font-weight:700}
.lang-button.active{color:#3c6556}
.intro{margin:51px 0 28px}
.eyebrow{display:flex;align-items:center;gap:11px;font-size:10px;font-weight:800;color:#85988b;letter-spacing:.21em}
.eyebrow-line{display:inline-block;width:22px;height:1.5px;background:#9aac9d}
h1{margin:14px 0 7px;font-size:clamp(34px,8vw,49px);line-height:1.09;letter-spacing:-2px;font-weight:670}
.subtitle{margin:0;color:#7b8b7f;font-size:15px;line-height:1.5}
.player-card{background:rgba(255,255,255,.94);border:1px solid #e9eee8;border-radius:26px;padding:26px 26px 23px;box-shadow:0 18px 60px rgba(58,81,63,.065),0 2px 7px rgba(44,65,48,.025)}
.section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.section-heading h2{margin:0;font-size:15px;font-weight:660;letter-spacing:-.2px}
.section-count{font-size:11px;color:#9aa99e;letter-spacing:.035em}
.category-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.category{min-width:0;min-height:94px;border:1px solid #edf0ed;border-radius:17px;background:#fbfcfb;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;color:#809087;transition:background .2s,border-color .2s,transform .2s}
.category:hover{border-color:#d9e3da;background:#f7faf7}
.category:active{transform:scale(.975)}
.category[aria-pressed="true"]{background:var(--category-fill);border-color:color-mix(in srgb,var(--category-color) 36%,white);color:var(--category-color);box-shadow:inset 0 0 0 .4px currentColor}
.category svg{width:30px;height:30px;flex:none}
.category span{font-size:12.5px;font-weight:620}
.sound-selector{margin-top:26px}
.sound-selector label{display:block;font-size:12px;font-weight:650;margin-bottom:10px;color:#6c7d70}
.select-wrap{position:relative}
.select-wrap select{width:100%;height:53px;border:1px solid #e5ebe6;border-radius:13px;background:#fbfcfa;color:#2f483c;font-weight:625;font-size:14px;padding:0 42px 0 16px;appearance:none;-webkit-appearance:none;outline-offset:2px}
.select-wrap svg{position:absolute;pointer-events:none;right:15px;top:18px;width:18px;height:18px;stroke:#708277;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.sound-note{margin:9px 2px 0;color:#98a99e;font-size:11px;min-height:16px}
.time-setting{margin-top:27px;padding:24px 0 23px;border-top:1px solid #eef2ee}
.timer-label-row{display:flex;justify-content:space-between;align-items:center;gap:16px}
.micro-label{font-size:10px;color:#92a296;letter-spacing:.15em;font-weight:800}
.infinite-button{border:0;background:transparent;color:#8b9c8e;font-size:11px;padding:8px 2px;display:flex;align-items:center;gap:6px}
.infinite-button>span:first-child{font-size:21px;line-height:11px;font-weight:500}
.infinite-button[aria-pressed="true"]{color:#507a6d;font-weight:740}
.timer-controls{display:flex;align-items:center;justify-content:center;gap:27px;margin:16px 0 0;transition:opacity .2s}
.timer-controls.is-disabled{opacity:.30;pointer-events:none}
.time-button{border:1px solid #e5ece5;border-radius:50%;width:46px;height:46px;display:grid;place-items:center;background:#f7faf7;color:#617b69}
.time-button:hover{background:#edf4ed}
.time-button svg{width:19px;height:19px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
.time-number{display:flex;align-items:baseline;justify-content:center;gap:7px;min-width:119px}
.time-number input{display:block;padding:0;margin:0;width:83px;border:0;background:transparent;color:#314c3d;text-align:right;line-height:1.08;font-size:40px;letter-spacing:-1.5px;font-weight:640;appearance:textfield;-moz-appearance:textfield;border-radius:4px}
.time-number input::-webkit-outer-spin-button,.time-number input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.time-number span{font-size:15px;color:#829486;font-weight:500}
.play-button{width:100%;height:57px;display:flex;align-items:center;justify-content:center;gap:11px;border:0;border-radius:14px;background:#537d6c;color:#fff;box-shadow:0 6px 18px rgba(65,104,80,.18);font-size:15px;font-weight:680;transition:background .18s,transform .18s}
.play-button:hover:not(:disabled){background:var(--green-dark)}
.play-button:active:not(:disabled){transform:translateY(1px)}
.play-button:disabled{opacity:.6}
.play-button svg{width:20px;height:20px;color:#fff}
.progress{height:3px;background:#eef2ed;margin-top:19px;border-radius:9px;overflow:hidden}
.progress-fill{height:100%;width:0%;background:#91b8a2;transition:width .2s linear;border-radius:9px}
.playback-footer{min-height:31px;display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:11px}
.offline-status{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:525;color:#819389;line-height:1.4}
.status-dot{width:7px;height:7px;flex:none;border-radius:50%;background:#e4b978}
.offline-status[data-state="ready"] .status-dot{background:#87ab8b}
.offline-status[data-state="error"] .status-dot{background:#cc997a}
.time-left{font-size:11px;color:#7e9989;white-space:nowrap;letter-spacing:.01em}
.error-message{font-size:12px;color:#a95b4d;margin:5px 2px 0}
.footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:17px 9px 0}
.info-button{display:flex;align-items:center;gap:7px;background:none;border:0;padding:8px 2px;color:#8ca094;font-size:11px}
.info-circle{display:grid;place-items:center;font-size:10px;font-weight:700;border:1px solid #9dad9f;border-radius:50%;width:14px;height:14px}
.footer-version{color:#a7b5a7;font-size:10px}
dialog{border:1px solid #e7eee7;border-radius:21px;max-width:min(450px,calc(100vw - 32px));padding:0;color:var(--ink);box-shadow:0 20px 80px rgba(28,44,34,.17)}
dialog::backdrop{background:rgba(27,46,35,.28);backdrop-filter:blur(4px)}
.dialog-inner{position:relative;padding:30px 30px 26px}
.dialog-inner h2{font-size:21px;margin:0 0 18px}
.dialog-inner p{font-size:13px;color:#617567;line-height:1.65}
.close-button{position:absolute;right:18px;top:15px;border:0;background:transparent;font-size:30px;line-height:1;color:#839687;padding:5px}
[hidden]{display:none!important}
@media(max-width:400px){.app-shell{width:calc(100% - 28px);padding-top:17px}.intro{margin-top:37px}.player-card{padding:21px 17px 18px}.category-grid{gap:7px}.category{min-height:85px;border-radius:14px;gap:7px}.category svg{width:28px;height:28px}.category span{font-size:12px}.timer-controls{gap:19px}}
@media(min-width:760px){.app-shell{padding-top:43px}.intro{margin-top:70px}.player-card{padding:30px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* Compact optional creator/license details; the main screen stays uncluttered. */
dialog{max-height:calc(100dvh - 34px);overflow-y:auto}
.sound-credits{margin-top:16px;border-top:1px solid #e8efe9;padding-top:16px;color:#668172;font-size:12px}
.sound-credits summary{cursor:pointer;font-weight:650;padding:5px 0}
.sound-credits ol{columns:2;column-gap:14px;padding-left:22px;margin:10px 0 1px}
.sound-credits li{break-inside:avoid;font-size:11px;padding:3px 0}
.sound-credits a{color:#587d69;text-underline-offset:2px}
@media(max-width:380px){.sound-credits ol{columns:1}}