:root{
  color-scheme:light;
  --paper:#f6f6f2;
  --ink:rgba(27,29,28,.82);
  --quiet:rgba(27,29,28,.42);
  --glass:rgba(245,245,240,.64);
  --glass2:rgba(255,255,255,.38);
  --line:rgba(255,255,255,.56);
  --shadow:0 26px 80px rgba(20,26,24,.13);
}
*{box-sizing:border-box}
html,body,#field{width:100%;height:100%;margin:0;overflow:hidden}
body{background:var(--paper);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Apple SD Gothic Neo",monospace;color:var(--ink)}
button,input{font:inherit}
#field{
  position:relative;
  background:var(--paper);
  touch-action:manipulation;
  user-select:none;
}
.seed{
  position:fixed;z-index:1000;display:flex;align-items:center;gap:7px;
  transform:translate(-10px,-50%);min-width:min(420px,76vw);max-width:86vw;
  padding:5px 7px 5px 12px;border-radius:18px;background:rgba(255,255,255,.34);
  backdrop-filter:blur(18px) saturate(.85);-webkit-backdrop-filter:blur(18px) saturate(.85);
  box-shadow:0 10px 34px rgba(25,31,29,.09);opacity:0;animation:seedIn .34s ease forwards;
}
.seed input{width:100%;border:0;outline:0;background:transparent;color:var(--ink);font-size:13px;letter-spacing:.01em;padding:8px 0;user-select:text}
.seed button{border:0;background:transparent;color:var(--quiet);cursor:pointer;padding:7px;border-radius:50%}
.seed button:hover{color:var(--ink)}
@keyframes seedIn{to{opacity:1;transform:translate(-10px,-50%) scale(1)}}
@keyframes dissolve{to{opacity:0;filter:blur(9px);transform:translateY(8px) scale(.985)}}
.surface-shell{
  position:fixed;inset:0;z-index:800;display:grid;place-items:center;padding:clamp(18px,5vw,72px);
  background:rgba(246,246,242,.72);backdrop-filter:blur(18px) saturate(.72);-webkit-backdrop-filter:blur(18px) saturate(.72);
  animation:surfaceIn .55s cubic-bezier(.16,1,.3,1) both;
}
@keyframes surfaceIn{from{opacity:0;filter:blur(18px);transform:scale(1.015)}to{opacity:1;filter:none;transform:none}}
.surface{
  width:min(1120px,94vw);max-height:84dvh;overflow:hidden;border-radius:28px;
  background:linear-gradient(135deg,var(--glass),var(--glass2));border:1px solid var(--line);box-shadow:var(--shadow);
}
.surface-head{display:flex;justify-content:space-between;align-items:center;padding:18px 22px 8px;font-size:10px;letter-spacing:.14em;color:var(--quiet)}
.surface-head button{border:0;background:transparent;color:var(--quiet);font-size:18px;cursor:pointer}
.music-body{display:grid;grid-template-columns:1.1fr .9fr;min-height:430px;padding:10px 22px 24px;gap:18px}
.music-now,.track-list,.temple-space{border-radius:24px;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.42)}
.music-now{display:grid;place-items:center;padding:34px;text-align:center}
.music-now h2{font-size:18px;font-weight:500;margin:0 0 8px}.music-now p{font-size:11px;color:var(--quiet);margin:0}
.controls{display:flex;gap:12px;margin-top:26px}.controls button{width:38px;height:38px;border:0;border-radius:50%;background:rgba(255,255,255,.5);color:var(--ink);cursor:pointer}
.track-list{padding:20px;overflow:auto;max-height:430px}.track{display:flex;gap:12px;width:100%;border:0;background:transparent;color:var(--quiet);padding:8px 6px;text-align:left;cursor:pointer;font-size:11px}.track.active{color:var(--ink);font-weight:700}.track:hover{color:var(--ink)}
.temple-space{min-height:480px;padding:clamp(28px,6vw,72px);display:flex;flex-direction:column;justify-content:space-between}
.temple-space h1{font-weight:400;font-size:clamp(24px,5vw,58px);letter-spacing:.04em;margin:0}.temple-space p{max-width:620px;color:var(--quiet);line-height:1.8;font-size:12px}.temple-presence{font-size:10px;letter-spacing:.16em;color:var(--quiet)}
.resonance-trace{position:fixed;z-index:900;left:18px;bottom:16px;font-size:9px;letter-spacing:.08em;color:rgba(27,29,28,.32);pointer-events:none}
@media(max-width:760px){.music-body{grid-template-columns:1fr;min-height:0}.track-list{max-height:42dvh}.surface{max-height:91dvh}.seed{min-width:72vw}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}