:root{
  color-scheme: light;
  --ink:#27352b;
  --muted:#65736a;
  --glass:rgba(249,250,244,.72);
  --line:rgba(55,75,59,.13);
}
*{box-sizing:border-box}
html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}
body{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:#e8efe1;
  color:var(--ink);
}
canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.title-card{
  position:absolute;left:clamp(20px,4vw,56px);top:clamp(20px,5vh,54px);
  width:min(420px,calc(100vw - 40px));
  pointer-events:none;
  text-shadow:0 1px 20px rgba(255,255,255,.55);
}
.eyebrow{
  font-size:11px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  color:#71806f;margin-bottom:8px
}
h1{
  margin:0;font-family:Georgia, "Times New Roman", serif;font-size:clamp(34px,5vw,62px);
  font-weight:500;letter-spacing:-.035em;line-height:.95;color:#344936
}
.title-card p{margin:12px 0 0;font-size:14px;color:#687568}
.hint{
  position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
  padding:8px 12px;border:1px solid rgba(255,255,255,.5);border-radius:999px;
  background:rgba(246,248,241,.5);backdrop-filter:blur(12px);
  font-size:11px;letter-spacing:.04em;color:#687568;pointer-events:none
}
.round-button{
  position:absolute;right:20px;bottom:20px;width:45px;height:45px;border-radius:50%;
  border:1px solid var(--line);background:var(--glass);backdrop-filter:blur(18px);
  color:#536354;font-size:18px;cursor:pointer;box-shadow:0 8px 30px rgba(53,70,54,.08);
  transition:transform .2s, background .2s
}
.round-button:hover{transform:translateY(-2px);background:rgba(255,255,250,.88)}
.settings-button{bottom:75px}
.sound-on{display:none}
#soundToggle[aria-pressed="true"] .sound-on{display:inline}
#soundToggle[aria-pressed="true"] .sound-off{display:none}
.panel{
  position:absolute;right:20px;bottom:130px;width:min(300px,calc(100vw - 40px));
  border:1px solid var(--line);border-radius:20px;padding:18px;
  background:rgba(248,249,243,.78);backdrop-filter:blur(24px);
  box-shadow:0 16px 55px rgba(42,60,43,.13);
  transform:translateY(10px) scale(.98);opacity:0;pointer-events:none;
  transition:.22s ease
}
.panel.open{transform:none;opacity:1;pointer-events:auto}
.panel-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px}
.panel-head strong{font-family:Georgia,serif;font-size:20px;font-weight:500}
.close-button{border:0;background:none;font-size:25px;line-height:1;color:#728075;cursor:pointer}
.panel label{display:block;margin:14px 0;font-size:12px;color:#58685b}
.panel label>span{display:flex;justify-content:space-between;margin-bottom:7px}
input[type=range]{width:100%;accent-color:#718a67}
.check{display:flex!important;align-items:center;gap:9px}
.check span{display:inline!important;margin:0!important}
.check input{accent-color:#718a67}
@media (max-width:650px){
  .title-card{top:24px;left:22px}
  .title-card p{display:none}
  .hint{bottom:18px;white-space:nowrap}
  .round-button{right:16px}
  .settings-button{bottom:70px}
  .panel{right:15px;bottom:124px}
}