*,*:before,*:after{box-sizing:border-box}*{margin:0}html{interpolate-size:allow-keywords}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p{overflow-wrap:break-word;text-wrap:pretty}h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;text-wrap:balance}#root,#app{isolation:isolate}:root{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;color-scheme:dark;--bg-deep: #06060f;--ink: rgba(255, 255, 255, .92);--ink-soft: rgba(255, 255, 255, .62);--ink-faint: rgba(255, 255, 255, .34);--line: rgba(255, 255, 255, .08);--line-strong: rgba(255, 255, 255, .18);--mood-a: rgba(255, 128, 92, .85);--mood-b: rgba(162, 80, 200, .85);--mood-c: rgba(255, 92, 152, .75);--mood-glow: #ffb38a;--mood-accent: #ffd2bc}html,body,#app{height:100%}body{min-height:100dvh;background:var(--bg-deep);color:var(--ink);overflow:hidden;font-feature-settings:"ss01";letter-spacing:.01em;-webkit-tap-highlight-color:transparent}#app{max-width:none;margin:0;padding:0;height:100dvh;position:relative;overflow:hidden;isolation:isolate}button{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;width:100%}.eno{position:relative;height:100dvh;width:100%;display:grid;grid-template-rows:auto 1fr auto auto;padding:max(env(safe-area-inset-top),1rem) max(env(safe-area-inset-right),1rem) max(env(safe-area-inset-bottom),1rem) max(env(safe-area-inset-left),1rem);gap:clamp(.75rem,2vh,1.5rem);transition:background-color 6s ease;background:radial-gradient(ellipse at 50% 120%,rgba(255,255,255,.04),transparent 60%),var(--bg-deep)}.light-field{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}.orb{position:absolute;width:min(90vmax,1200px);height:min(90vmax,1200px);border-radius:50%;filter:blur(80px);opacity:.85;mix-blend-mode:screen;transition:background 8s ease;will-change:transform,opacity}.orb-a{background:radial-gradient(circle,var(--mood-a) 0%,transparent 65%);top:-28%;left:-22%;animation:drift-a 38s ease-in-out infinite alternate}.orb-b{background:radial-gradient(circle,var(--mood-b) 0%,transparent 65%);bottom:-32%;right:-25%;animation:drift-b 44s ease-in-out infinite alternate}.orb-c{background:radial-gradient(circle,var(--mood-c) 0%,transparent 70%);top:25%;left:30%;width:min(70vmax,900px);height:min(70vmax,900px);opacity:.55;animation:drift-c 52s ease-in-out infinite alternate}.vignette{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 45%,rgba(0,0,0,.55) 100%)}@keyframes drift-a{0%{transform:translateZ(0) scale(1)}to{transform:translate3d(12vw,8vh,0) scale(1.15)}}@keyframes drift-b{0%{transform:translateZ(0) scale(1.05)}to{transform:translate3d(-10vw,-6vh,0) scale(1.25)}}@keyframes drift-c{0%{transform:translateZ(0) scale(1);opacity:.45}to{transform:translate3d(8vw,-10vh,0) scale(1.3);opacity:.7}}@media(prefers-reduced-motion:reduce){.orb{animation:none}}.eno-header{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;padding-inline:clamp(.25rem,2vw,1.5rem)}.eno-mark{font-size:clamp(1.4rem,3.5vw,2rem);font-weight:300;letter-spacing:.5em;text-transform:uppercase;color:var(--ink);text-shadow:0 0 28px var(--mood-glow);margin-inline-start:.4rem}.mood-chip{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem .95rem;border-radius:999px;background:#ffffff0f;border:1px solid var(--line);color:var(--ink-soft);font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;transition:background .4s ease,color .4s ease,border-color .4s ease;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.mood-chip:hover,.mood-chip:focus-visible{background:#ffffff1a;color:var(--ink);border-color:var(--line-strong);outline:none}.mood-dot{width:.55rem;height:.55rem;border-radius:50%;background:var(--mood-glow);box-shadow:0 0 12px var(--mood-glow)}.grid{position:relative;z-index:1;display:flex;flex-direction:column;gap:clamp(.4rem,1vh,.75rem);width:100%;max-width:980px;margin-inline:auto;align-self:center;touch-action:none}.row{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:clamp(.4rem,1.2vw,.85rem)}.cell{position:relative;aspect-ratio:1 / 1;border-radius:clamp(8px,1.4vw,14px);background:#ffffff0a;border:1px solid var(--line);transition:background .3s ease,border-color .3s ease,transform .2s ease,box-shadow .4s ease;overflow:hidden;isolation:isolate}.cell:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at center,var(--mood-glow) 0%,transparent 70%);opacity:0;transition:opacity .5s ease}.cell[data-on="1"]{background:linear-gradient(160deg,color-mix(in srgb,var(--mood-glow) 35%,transparent),color-mix(in srgb,var(--mood-accent) 25%,transparent));border-color:color-mix(in srgb,var(--mood-glow) 50%,transparent);box-shadow:inset 0 0 18px color-mix(in srgb,var(--mood-glow) 35%,transparent),0 0 24px color-mix(in srgb,var(--mood-glow) 25%,transparent)}.cell[data-on="1"]:before{opacity:.55}.cell[data-active="1"]{border-color:color-mix(in srgb,var(--mood-glow) 70%,transparent)}.cell[data-active="1"][data-on="1"]{box-shadow:inset 0 0 28px color-mix(in srgb,var(--mood-glow) 70%,transparent),0 0 38px color-mix(in srgb,var(--mood-glow) 55%,transparent);transform:scale(1.04)}.cell[data-active="1"][data-on="0"]:before{opacity:.18}.cell-glow{position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(circle at 50% 110%,var(--mood-accent),transparent 60%);opacity:0;mix-blend-mode:screen;transition:opacity .4s ease}.cell[data-on="1"] .cell-glow{opacity:.5}.controls{position:relative;z-index:1;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(.75rem,2vw,1.5rem);padding:clamp(.75rem,1.5vh,1.25rem) clamp(.75rem,2vw,1.5rem);border-radius:24px;background:#0a0a1473;border:1px solid var(--line);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);max-width:980px;margin-inline:auto;width:100%}.play{width:clamp(56px,9vw,72px);height:clamp(56px,9vw,72px);border-radius:50%;background:radial-gradient(circle at 30% 30%,var(--mood-accent),var(--mood-glow) 70%);display:grid;place-items:center;box-shadow:0 0 30px color-mix(in srgb,var(--mood-glow) 50%,transparent),inset 0 0 12px #fff6;transition:transform .2s ease,box-shadow .4s ease;color:#1a0e0e}.play:hover,.play:focus-visible{outline:none;transform:scale(1.05);box-shadow:0 0 42px color-mix(in srgb,var(--mood-glow) 65%,transparent),inset 0 0 14px #ffffff8c}.play:active{transform:scale(.97)}.play-icon{font-size:clamp(1.1rem,2.2vw,1.4rem);font-weight:600;letter-spacing:.05em;padding-left:.1em}.play[aria-pressed=true] .play-icon{padding-left:0;letter-spacing:.1em;font-size:clamp(.95rem,1.9vw,1.2rem)}.sliders{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.75rem,2vw,1.5rem);min-width:0}.slider{display:flex;flex-direction:column;gap:.35rem;min-width:0}.slider-label{display:flex;justify-content:space-between;align-items:baseline;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}.slider-value{color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:.05em}input[type=range]{height:28px;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:999px;background:linear-gradient(90deg,color-mix(in srgb,var(--mood-glow) 80%,transparent),color-mix(in srgb,var(--mood-accent) 30%,transparent))}input[type=range]::-moz-range-track{height:4px;border-radius:999px;background:linear-gradient(90deg,color-mix(in srgb,var(--mood-glow) 80%,transparent),color-mix(in srgb,var(--mood-accent) 30%,transparent))}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:var(--ink);margin-top:-9px;box-shadow:0 0 16px color-mix(in srgb,var(--mood-glow) 60%,transparent);border:0}input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--ink);box-shadow:0 0 16px color-mix(in srgb,var(--mood-glow) 60%,transparent);border:0}.actions{display:flex;flex-direction:column;gap:.4rem}.action-btn{padding:.55rem .95rem;border-radius:999px;border:1px solid var(--line-strong);color:var(--ink);background:#ffffff0d;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;transition:background .3s ease,transform .15s ease,border-color .3s ease;white-space:nowrap}.action-btn:hover,.action-btn:focus-visible{background:#ffffff1f;border-color:color-mix(in srgb,var(--mood-glow) 60%,transparent);outline:none}.action-btn:active{transform:scale(.96)}.action-btn.ghost{background:transparent;color:var(--ink-soft);border-color:var(--line)}.action-btn.ghost:hover,.action-btn.ghost:focus-visible{color:var(--ink);border-color:var(--line-strong)}.hint{position:relative;z-index:1;text-align:center;color:var(--ink-faint);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase}@media(max-width:720px){.eno{gap:.6rem}.eno-header{padding-inline:.25rem}.eno-mark{letter-spacing:.4em}.row{grid-template-columns:repeat(8,minmax(0,1fr));gap:.35rem}.cell{border-radius:10px}.controls{grid-template-columns:auto 1fr;grid-template-areas:"play sliders" "actions actions";border-radius:20px;padding:.8rem}.play{grid-area:play}.sliders{grid-area:sliders;grid-template-columns:1fr;gap:.4rem}.actions{grid-area:actions;flex-direction:row;justify-content:center}.action-btn{flex:1;text-align:center;padding:.6rem .5rem}.hint{font-size:.66rem;letter-spacing:.14em}}
