:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--ink:#15130f;--muted:#6f675b;--paper:#f7f2e8;--linen:#fffaf0;--clay:#b95f3f;--leaf:#2e6b59;--sky:#527aa3;--gold:#c9942e;--line:#15130f29;--shadow:0 24px 70px #231c1138;font-family:Avenir Next,Gill Sans,Trebuchet MS,sans-serif}*{box-sizing:border-box}html,body,#root{min-height:100%}body{color:var(--ink);background:radial-gradient(circle at 12% 18%,#c9942e38,#0000 26rem),radial-gradient(circle at 88% 12%,#527aa333,#0000 22rem),linear-gradient(135deg,#efe3ca 0%,#f8f0dd 38%,#e1ebdf 100%);margin:0}button,input,textarea{font:inherit}.shell{place-items:center;min-height:100vh;padding:32px 18px;display:grid}.stage{grid-template-columns:.95fr 1.05fr;align-items:stretch;gap:22px;width:min(1040px,100%);display:grid}.mast{border:1px solid var(--line);min-height:560px;box-shadow:var(--shadow);background:linear-gradient(160deg,#fffaf0e0,#f7f2e8bd),repeating-linear-gradient(90deg,#15130f0a 0 1px,#0000 1px 15px);flex-direction:column;justify-content:space-between;padding:34px;display:flex;position:relative;overflow:hidden}.mast:after{content:"";background:linear-gradient(45deg,#0000 45%,#2e6b5929 46% 54%,#0000 55%),linear-gradient(-45deg,#0000 45%,#b95f3f24 46% 54%,#0000 55%);border:1px solid #2e6b5957;width:180px;height:180px;position:absolute;inset:auto 24px 24px auto;transform:rotate(12deg)}.mark{width:70px;height:70px;color:var(--linen);background:var(--ink);box-shadow:9px 9px 0 var(--gold);border-radius:50%;place-items:center;display:grid}.kicker{color:var(--clay);letter-spacing:.12em;text-transform:uppercase;margin:0 0 16px;font-size:.78rem;font-weight:800}h1{letter-spacing:0;max-width:7ch;margin:0;font-family:Georgia,Times New Roman,serif;font-size:clamp(4rem,9vw,7.4rem);line-height:.84}.panel,.output{border:1px solid var(--line);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:var(--shadow);background:#fffaf0d1}.panel{grid-template-columns:1fr 1fr;gap:18px;padding:24px;display:grid}.field{border:0;min-width:0;margin:0;padding:0}.wide{grid-column:1/-1}label,legend{color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin:0 0 9px;font-size:.78rem;font-weight:800;display:block}.secret-input{border:1px solid var(--line);background:var(--linen);align-items:center;gap:10px;height:50px;padding:0 14px;display:flex}.secret-input input{width:100%;color:var(--ink);background:0 0;border:0;outline:0}textarea{resize:vertical;border:1px solid var(--line);width:100%;min-height:86px;color:var(--ink);background:var(--linen);outline:0;padding:13px 14px;line-height:1.45}.segments{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;display:grid}.segments button,.launch{border:1px solid var(--line);cursor:pointer;min-height:44px;color:var(--ink);background:#fffaf0e0;transition:transform .16s,background .16s,color .16s,border-color .16s}.segments button:hover,.launch:hover:not(:disabled){transform:translateY(-1px)}.segments .active{color:var(--linen);background:var(--leaf);border-color:#15130f4d}.field:nth-of-type(3) .segments .active{background:var(--sky)}.field:nth-of-type(4) .segments .active{background:var(--clay)}.launch{min-height:56px;color:var(--linen);background:var(--ink);grid-column:1/-1;justify-content:center;align-items:center;gap:10px;font-weight:850;display:inline-flex}.launch:disabled{cursor:not-allowed;opacity:.54}.output{grid-column:2;align-self:end;padding:22px 24px}.status-row,.player{align-items:center;gap:12px;display:flex}.status-row{font-weight:850}.meter{background:#15130f1a;height:9px;margin:18px 0;overflow:hidden}.meter span{background:linear-gradient(90deg, var(--leaf), var(--gold), var(--clay));height:100%;transition:width .42s;display:block}.player{align-items:center}audio{width:100%;min-width:0}.error{color:#8d2f24;margin:12px 0 0;font-weight:700}.spin{animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (width<=820px){.stage{grid-template-columns:1fr}.mast{min-height:310px}h1{font-size:clamp(3.4rem,18vw,5.2rem)}.output{grid-column:1}}@media (width<=560px){.panel{grid-template-columns:1fr;padding:18px}.segments{grid-template-columns:repeat(3,minmax(0,1fr))}.field:nth-of-type(3) .segments,.field:nth-of-type(4) .segments{grid-template-columns:repeat(2,minmax(0,1fr))}}
