/* GreekVoice — Aegean Light edition: Greek island white, blue, and understated meander motifs. */
:root {
  color-scheme: light;
  --ink: #123b67;
  --sky: #f5fbff;
  --cobalt: #1476b9;
  --cobalt-deep: #0b568f;
  --light-blue: #82cbe8;
  --burgundy: #a9153e;
  --muted: #64819a;
}
* {box-sizing:border-box}
html,body {min-height:100%; margin:0}
body {background:#e7f5fe; color:var(--ink); font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; -webkit-font-smoothing:antialiased}
.stage {position:relative;display:grid;place-items:center;isolation:isolate;min-height:100vh;min-height:100svh;overflow:hidden;
  background:
   radial-gradient(circle at 48% 36%,#fff 0%,#fff 28%,rgba(255,255,255,.68) 52%,transparent 78%),
   linear-gradient(145deg,#e9f7fe 0%,#ffffff 41%,#f6fcff 65%,#e8f6fe 100%)}
.stage::before {content:"";position:absolute;z-index:-1;inset:0;opacity:.13;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.58' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E")}
.island-glow {position:absolute;inset:auto;left:50%;top:44%;translate:-50% -50%;width:min(88vw,950px);height:min(84vw,740px);z-index:-2;background:radial-gradient(ellipse,rgba(255,255,255,1) 0 32%,rgba(255,255,255,.74) 63%,transparent 74%);pointer-events:none}
.arch {position:absolute;pointer-events:none;width:clamp(220px,27vw,510px);height:clamp(290px,54vh,690px);border:16px solid rgba(100,174,219,.07);border-bottom:0;border-radius:230px 230px 0 0;z-index:-1;}
.arch--left {left:-14%;bottom:-25%;transform:rotate(-16deg)}
.arch--right{right:-15%;top:-29%;transform:rotate(20deg);border-width:12px}
.greek-key{position:absolute;z-index:1;left:50%;translate:-50% 0;width:min(340px,60vw);height:20px;opacity:.26;pointer-events:none;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='20' viewBox='0 0 64 20'%3E%3Cpath d='M0 3 H15 V17 H3 V9 H9 V11 H7 M15 3 H32 V17 H21 V8 H26 V12 M32 3 H47 V17 H35 V9 H41 V11 H39 M47 3 H64 V17 H53 V8 H58 V12' fill='none' stroke='%230d78b6' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:repeat-x;background-size:64px 20px;}
.greek-key--top{top:clamp(22px,5vh,52px)}
.greek-key--bottom{bottom:clamp(18px,4vh,40px)}
.sea-horizon {position:absolute;z-index:-1;left:0;right:0;bottom:-1px;height:clamp(130px,27vh,290px);pointer-events:none;opacity:.74}
.sea-horizon svg{height:100%;width:100%;display:block}
.sea-horizon__back{fill:#d8f1ff}
.sea-horizon__front{fill:#c3e7f9;opacity:.78}
.main-content {position:relative;z-index:3;display:flex;align-items:center;justify-content:center;flex-direction:column;width:100%;min-width:0;padding:clamp(70px,12vh,125px) 24px clamp(75px,13vh,145px)}
.eyebrow {display:flex;align-items:center;justify-content:center;gap:12px;margin:0 0 28px;color:#317cae;font-weight:700;font-size:clamp(10px,1vw,12px);letter-spacing:.18em;text-align:center;}
.mini-dot {width:5px;height:5px;border-radius:50%;background:#b71e44;flex:none}
.logo-frame{position:relative;isolation:isolate;width:min(76vw,660px);padding:0;line-height:0;}
.logo{width:100%;height:auto;display:block;object-fit:contain;user-select:none;-webkit-user-drag:none;}
.tagline{margin:12px 0 0;color:#254e77;font-size:clamp(14px,1.58vw,19px);font-weight:500;letter-spacing:.012em;text-align:center;line-height:1.5}
.player{margin-top:34px;display:flex;align-items:center;flex-direction:column;gap:14px}
.play-button {font:700 12px/1 Inter,"Segoe UI",Arial,sans-serif;letter-spacing:.12em;color:#fff;background:linear-gradient(125deg,#0f85c4,#125fa3);border:1px solid #1580bb;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;justify-content:flex-start;gap:17px;min-width:228px;padding:6px 24px 6px 7px;box-shadow:0 10px 28px rgba(12,109,170,.20),inset 0 1px 0 rgba(255,255,255,.20);transition:background .3s,transform .2s,box-shadow .3s}
.play-button:hover {background:linear-gradient(125deg,#0b75bc,#0b508b);box-shadow:0 12px 28px rgba(12,95,158,.26);transform:translateY(-2px)}
.play-button:active {transform:scale(.985)}
.play-button:focus-visible{outline:3px solid #4ab1e2;outline-offset:4px}
.play-button:disabled{opacity:.64;cursor:wait}
.play-button__icon{display:grid;place-items:center;width:45px;height:45px;min-width:45px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,45,91,.12)}
.symbol{width:24px;height:24px;fill:#1670b1}
.symbol--play{margin-left:2px}
.symbol--pause{display:none}
.is-playing .symbol--play{display:none}
.is-playing .symbol--pause{display:block}
.is-playing .play-button{border-color:#147eb8;background:linear-gradient(125deg,#075587,#0b4482)}
.play-button__text{white-space:nowrap}
.soundline{height:25px;display:flex;align-items:center;gap:4px;justify-content:center;opacity:.55;transition:opacity .25s}
.soundline i{display:block;width:3px;height:3px;background:linear-gradient(180deg,#099bd4,#125390);border-radius:6px;transform-origin:center;animation:equalize 940ms ease-in-out infinite alternate;animation-play-state:paused}
.soundline i:nth-child(5n+2){animation-duration:720ms;animation-delay:-210ms}
.soundline i:nth-child(4n+1){animation-duration:1100ms;animation-delay:-470ms}
.soundline i:nth-child(3n+1){animation-duration:830ms;animation-delay:-390ms}
.soundline i:nth-child(2n+1){animation-direction:alternate-reverse}
.is-playing .soundline{opacity:1}
.is-playing .soundline i{animation-play-state:running}
.status{font-size:10px;line-height:1.35;letter-spacing:.17em;color:#597f9d;text-align:center;min-height:16px;max-width:calc(100vw - 48px)}
.status--error{color:#a12344;letter-spacing:.01em;font-size:11px;text-transform:none}
.waves{position:absolute;z-index:1;top:50%;left:50%;translate:-50% -50%;width:min(100%,1450px);height:min(48vw,485px);pointer-events:none;opacity:.22;overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent 0%,black 12%,black 24%,transparent 34%,transparent 66%,black 76%,black 88%,transparent 100%);mask-image:linear-gradient(to right,transparent 0%,black 12%,black 24%,transparent 34%,transparent 66%,black 76%,black 88%,transparent 100%)}
.wave{position:absolute;width:100%;height:100%;inset:0;fill:none;stroke-width:2;filter:blur(.3px);animation:waveDance 6.5s ease-in-out infinite alternate;animation-play-state:paused}
.wave path{fill:none;stroke:#1d9bd2;opacity:.45}
.wave--two{animation-duration:5.7s;animation-direction:alternate-reverse}
.wave--two path{stroke:#2065a8;opacity:.39}
.wave--three{animation-duration:7.2s;animation-delay:-2s}
.wave--three path{stroke:#98d4ea;opacity:.4}
.is-playing .waves{opacity:.7}
.is-playing .wave{animation-play-state:running}
.is-playing .wave path{opacity:.85}
.is-playing .wave--three path{opacity:.55}
@keyframes waveDance{from{transform:translateX(-3%) scaleX(1.03) scaleY(.83)}to{transform:translateX(3%) scaleX(.98) scaleY(1.17)}}
@keyframes equalize{0%{height:3px}25%{height:13px}50%{height:6px}100%{height:22px}}
@media(min-width:1600px){.logo-frame{width:740px}}
@media(max-width:600px){.main-content{padding:100px 18px 100px}.eyebrow{font-size:9px;line-height:1.8;letter-spacing:.11em;margin-bottom:22px;gap:8px}.logo-frame{width:min(96vw,460px)}.tagline{font-size:13px;margin-top:12px}.player{margin-top:28px;gap:12px}.play-button{min-width:217px;padding-right:20px;font-size:11px}.waves{width:145%;height:82vw;top:47%}.sea-horizon{height:220px;opacity:.66}.greek-key{width:min(280px,70vw)}.greek-key--top{top:28px}.greek-key--bottom{bottom:22px}.arch{border-width:12px}}
@media(max-height:520px) and (orientation:landscape){.main-content{padding:35px 12px}.eyebrow{margin-bottom:7px;font-size:9px}.logo-frame{width:min(46vw,390px)}.tagline{margin-top:2px;font-size:12px}.player{margin-top:12px;gap:5px}.play-button__icon{height:36px;width:36px;min-width:36px}.greek-key--top{top:10px}.greek-key--bottom{bottom:5px}.waves{height:70vh}}
@media(prefers-reduced-motion:reduce){.wave,.soundline i{animation:none!important}.play-button{transition:none}}