/* Chromatic psychedelic theme — CSS only, no figurative imagery. */
:root {
  color-scheme: dark;
  --ink: #fff6fd;
  --muted: #e1d3ed;
  --faint: #c5b3d9;
  --line: rgba(236, 166, 255, .28);
  --lime: #d0ff45;
  --pink: #ff79db;
  --cyan: #52ffe0;
  --orange: #ffab53;
  --violet: #a37dff;
  --bg: #180a35;
  font-family: 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  font-synthesis: none;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; position: relative; isolation: isolate; background: var(--bg); color: var(--ink); line-height: 1.55; overflow-x: hidden; }
.ambient { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  background: radial-gradient(ellipse at 100% 12%, #f019a9a0 0%, transparent 34%),
    radial-gradient(ellipse at 0% 43%, #6300e9a0 0%, transparent 35%),
    radial-gradient(ellipse at 100% 87%, #00bfa69c 0%, transparent 33%),
    radial-gradient(ellipse at 0% 100%, #f45f24a0 0%, transparent 29%),
    linear-gradient(135deg,#270b57 0%, #17092e 42%, #25114f 75%, #0d283e 100%);
}
/* Thick, colored contour bands, purely geometric. */
.ambient::before, .ambient::after { content: ''; position: absolute; border-radius: 44%; }
.ambient::before {
  width: clamp(740px, 84vw, 1450px); height: clamp(540px, 64vw, 1020px);
  right: -41%; top: -250px; transform: rotate(-31deg);
  background: repeating-radial-gradient(ellipse at 56% 45%,
    #ff4db7 0 9px, #ff7b39 10px 18px, #ffd84f 19px 24px,
    #340c73 25px 34px, #a571ff 35px 44px, #4212a0 45px 56px,
    #16e6c5 57px 64px, #210b55 65px 78px);
  mask-image: radial-gradient(ellipse at 60% 45%, #000 16%, #000c 43%, transparent 72%);
  opacity: .83;
}
.ambient::after {
  width: clamp(770px, 84vw, 1500px); height: clamp(900px, 98vw, 1570px);
  left: -47%; bottom: -340px; transform: rotate(29deg);
  background: repeating-radial-gradient(ellipse at 45% 49%,
    #d1ff4b 0 8px, #0cdecb 9px 17px, #2150e8 18px 29px,
    #3c117d 30px 40px, #d123ee 41px 52px, #ff4b8c 53px 60px,
    #ff983a 61px 70px, #33116c 71px 86px);
  mask-image: radial-gradient(ellipse at 43% 50%, #000 15%, #000c 40%, transparent 72%);
  opacity: .77;
}
.shell { max-width: 1000px; margin: auto; padding: 30px 42px 24px; min-height: 100vh; display: flex; flex-direction: column; }
.masthead { display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); padding-bottom: 21px; }
.wordmark { color: var(--ink); font-weight: 700; text-decoration: none; font-size: 1.22rem; letter-spacing: -.065em; }
.wordmark span { color: var(--pink); font-weight: 400; padding: 0 .08em; }
.wordmark .wordmark-dot { color: var(--lime); padding: 0; }
.mast-right { display: flex; align-items: center; gap: 17px; }
.connection { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .75rem; }
.live-dot, .mini-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); flex-shrink: 0; }
.connection[data-state="live"] .live-dot { background: var(--lime); box-shadow: 0 0 12px #c4f48b84; }
.connection[data-state="warning"] .live-dot { background: #f4c18b; }
.text-button { color: var(--muted); border: 1px solid var(--line); background: transparent; border-radius: 100px; padding: 5px 13px; font: inherit; font-size: .8rem; cursor: pointer; }
.text-button:hover { color: var(--ink); border-color: var(--pink); }
main { flex: 1; }
.entry-layout { display: grid; grid-template-columns: 1.25fr 1fr; gap: 42px; align-items: center; padding: clamp(74px, 12vw, 145px) 0; }
.eyebrow, .kicker, .small-label, footer { font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size: .72rem; font-weight: 500; letter-spacing: .085em; text-transform: uppercase; }
.eyebrow { color: var(--pink); display: flex; align-items: center; gap: 9px; }
.eyebrow-line { width: 22px; height: 1px; background: var(--pink); flex: 0 0 auto; }
h1,h2,p { margin: 0; }
h1 { font-size: clamp(3rem, 6vw, 5.2rem); line-height: .99; font-weight: 560; letter-spacing: -.07em; margin: 17px 0 22px; }
.gradient-text { color: var(--pink); background: linear-gradient(100deg, #ff78d5 0%, #ffb746 26%, #eaff70 50%, #57ffdb 75%, #a9a0ff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.lede { color: var(--muted); font-size: 1.02rem; max-width: 52ch; }
.panel { position: relative; border: 1px solid transparent; border-radius: 22px; background: linear-gradient(145deg, #30134f, #1c113a 65%, #211044) padding-box, linear-gradient(135deg,#f86ddb99,#9161ff90 45%,#49ffe080) border-box; box-shadow: 0 20px 70px #0b041d80, inset 0 1px 0 #ffffff0e; padding: 28px; }
/* Optional landing picture: preserve the whole image, including on phones. */
.landing-picture { margin: 25px 0 0; }
.landing-picture img { display: block; width: 100%; height: auto; max-height: 330px; object-fit: contain; border-radius: 18px; border: 1px solid var(--line); background: #200b42; box-shadow: 0 16px 45px #08061370; }
.entry-panel { padding: 32px; box-shadow: 0 20px 70px #0b041d80, 0 0 45px #ff44bb24; }
.kicker { color: var(--pink); }
.entry-panel h2 { font-size: 1.7rem; letter-spacing: -.04em; margin: 15px 0 4px; font-weight: 600; }
.muted { color: var(--muted); font-size: .94rem; }
form { margin-top: 23px; display: flex; flex-direction: column; gap: 12px; }
label { display: block; font-size: .9rem; font-weight: 600; margin-bottom: 7px; }
.entry-panel label { margin: 0 0 -5px; }
input, textarea { width: 100%; border: 1px solid #ac83e85e; border-radius: 11px; padding: 13px 15px; background: #160d2e; font: inherit; font-size: 1rem; color: var(--ink); transition: border-color .2s, box-shadow .2s; }
textarea { resize: vertical; min-height: 116px; max-height: 50vh; line-height: 1.6; }
input::placeholder, textarea::placeholder { color: #bda8d7; opacity: 1; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; }
input:focus, textarea:focus { border-color: var(--pink); outline: none; box-shadow: 0 0 0 3px #ff79db32; }
.primary-button { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 0; border-radius: 11px; background: linear-gradient(105deg,#ff70ca 0%,#ffab53 31%,#edff59 66%,#42f6d5 100%); color: #210b37; font: inherit; font-size: .95rem; font-weight: 750; padding: 13px 17px; min-height: 49px; cursor: pointer; transition: box-shadow .2s, transform .2s; }
.primary-button span { font-size: 1.2rem; line-height: 1; }
.primary-button:enabled:hover { transform: translateY(-1px); box-shadow: 0 6px 25px #ff70ca55; }
.primary-button:enabled:active { transform: translateY(1px); }
.primary-button:disabled { opacity: .55; cursor: wait; }
.message { font-size: .82rem; color: var(--lime); min-height: 0; }
.message:empty { display: none; }
.message[data-error="true"] { color: #ffb9bc; }
.writing-layout { padding: 44px 0 38px; max-width: 740px; margin: 0 auto; display: grid; gap: 20px; }
.instructions {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}
.instructions h1 { font-size: clamp(2.9rem, 6vw, 4.65rem); margin: 12px 0 15px; }
.instructions .lede {
    max-width: none;
}

.panel-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.section-number { color: var(--lime); }
.small-label { color: var(--faint); font-size: .65rem; text-align: right; }
.latest-panel { background: radial-gradient(ellipse at 100% 0%, #cf21ca40, transparent 75%) padding-box, linear-gradient(125deg,#3b155d,#201344 72%) padding-box, linear-gradient(115deg,#ff71d1,#ad70ff 60%,#5bffe0) border-box; overflow: hidden; }
.latest-panel::before { position: absolute; content: ''; top: 0; left: 8%; right: 8%; height: 3px; background: linear-gradient(90deg,transparent,#ff77dc,#ffb344,#d1ff45,#52ffe0,transparent); }
#latest-phrase {
    font-size: 1.4rem;
    line-height: 1.5;
}
.phrase-area { display: flex; align-items: center; min-height: 100px; padding: 20px 0; overflow-wrap: anywhere; }
blockquote { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(1.5rem, 3.8vw, 2.2rem); line-height: 1.37; font-weight: 400; white-space: pre-wrap; color: #fff0f6; }
.phrase-arrived { animation: reveal .6s ease-out; }
@keyframes reveal { from { opacity: .25; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.empty-state { font-size: .97rem; color: var(--muted); }
.panel-note { border-top: 1px solid var(--line); padding-top: 13px; color: var(--muted); font-size: .78rem; display: flex; align-items: center; gap: 8px; }
.mini-dot { background: var(--pink); width: 5px; height: 5px; }
.write-panel form { gap: 17px; margin-top: 20px; }
.field-note { color: var(--muted); font-size: .75rem; margin-top: 5px; }
.counter-row { display: flex; justify-content: space-between; gap: 14px; }
#character-count, #card-count { white-space: nowrap; font-variant-numeric: tabular-nums; }
footer { border-top: 1px solid var(--line); color: var(--faint); display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 19px; font-size: .62rem; }
.footer-lines { flex: 1; height: 6px; max-width: 100px; background: repeating-linear-gradient(90deg,transparent 0 4px,#ad79ffb3 5px 6px,transparent 7px 9px); mask-image: linear-gradient(90deg,transparent,#000,transparent); }
@media (max-width: 700px) { .shell { padding: 20px 22px; } .entry-layout { grid-template-columns: 1fr; gap: 30px; padding: 58px 0; } .entry-panel,.panel { padding: 22px; border-radius: 17px; } .writing-layout { padding-top: 32px; } .mast-right { gap: 10px; } .masthead { padding-bottom: 17px; } }
@media (max-width: 365px) { .shell { padding: 17px 14px; } .small-label { display: none; } .panel { padding: 19px; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation: none !important; transition: none !important; } }

.confirm-dialog { width: min(460px, calc(100% - 32px)); color: var(--ink); margin: auto; max-height: calc(100% - 32px); overflow: auto; }
.confirm-dialog::backdrop { background: #130926c9; backdrop-filter: blur(6px); }
.confirm-dialog h2 { font-size: 1.65rem; line-height: 1.2; letter-spacing: -.04em; margin: 12px 0; }
.confirm-actions { flex-direction: row; flex-wrap: wrap; gap: 10px; }
.confirm-actions button { flex: 1 1 150px; }
.secondary-button { border: 1px solid var(--line); border-radius: 11px; color: var(--ink); background: #160d2e; font: inherit; font-size: .9rem; font-weight: 600; padding: 12px 14px; cursor: pointer; }
.secondary-button:hover { border-color: var(--pink); }

/* A distinct, private space for the PhD card. */
.card-message-panel { min-width: 0; margin: 8px 0 2px; padding: 20px; border: 1px solid #ffac668c; border-radius: 16px; background: radial-gradient(ellipse at 100% 0%, #ba235a4d, transparent 78%), linear-gradient(135deg,#3c153f,#27143e 78%); }
.card-message-panel legend { padding: 0 8px; color: #ffbb78; font: 500 .72rem ui-monospace, Consolas, monospace; letter-spacing: .085em; text-transform: uppercase; }
.card-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 10px; }
.card-heading h2 { font-size: 1.35rem; font-weight: 600; letter-spacing: -.035em; }
.card-heading .small-label { color: var(--lime); }
.card-message-panel .field { margin-top: 17px; }
.card-message-panel .counter-row { align-items: flex-start; }
@media (max-width: 700px) { .card-message-panel { padding: 15px; } }
@media (max-width: 365px) { .card-heading .small-label { display: inline; } }

/* A multicolor rule anchors the otherwise open typography. */
.masthead { border-bottom: 2px solid transparent; border-image: linear-gradient(90deg,#ff71d1,#ffaf50,#d0ff45,#52ffe0,#a37dff) 1; }
.wordmark span { color: var(--cyan); }
.entry-intro .eyebrow, .instructions .eyebrow { color: #ff9fe4; }
.entry-intro h1, .instructions h1 { text-shadow: 0 8px 45px #a12eff30; }
.card-heading h2 { color: #ffd2a7; }
.card-message-panel .section-number { color: var(--orange); }
.card-message-panel textarea:focus { border-color: var(--orange); box-shadow: 0 0 0 3px #ffab5330; }
@media (max-width: 700px) {
  .ambient::before { right: -470px; top: -250px; opacity: .56; }
  .ambient::after { left: -540px; bottom: -300px; opacity: .5; }
}
/* Keep small text and live controls readable over the high-energy background. */
.entry-intro .lede, .instructions .lede, .eyebrow { text-shadow: 0 1px 4px #10051d, 0 0 12px #10051d; }
.entry-intro { position: relative; isolation: isolate; }
.entry-intro::before { content: ''; position: absolute; z-index: -1; inset: -32px -22px; background: radial-gradient(ellipse at 25% 55%, #16092b99, transparent 74%); pointer-events: none; }
.connection { background: #190c33e8; border: 1px solid var(--line); border-radius: 100px; padding: 5px 10px; }
.text-button { background: #190c33e8; }

/* Mobile-first finishing pass: safe areas, accessible touch targets, and
   modest, static decorative layers rather than costly animated effects. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body, .shell { min-height: 100svh; }
.shell { padding-left: max(42px, env(safe-area-inset-left)); padding-right: max(42px, env(safe-area-inset-right)); padding-top: max(30px, env(safe-area-inset-top)); padding-bottom: max(24px, env(safe-area-inset-bottom)); }
main, .entry-intro, .entry-panel, .writing-layout, .writing-layout > *, .field, .counter-row > *, .mast-right { min-width: 0; }
input, textarea { font-size: max(16px, 1rem); scroll-margin-block: 16px; }
button, .wordmark { touch-action: manipulation; }
.text-button, .secondary-button { min-height: 44px; }
.wordmark { min-height: 44px; display: inline-flex; align-items: center; flex-shrink: 0; }
.confirm-dialog { max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overscroll-behavior: contain; }
.instructions { overflow-wrap: anywhere; }
.instructions img { max-width: 100%; height: auto; }
@media (max-width: 700px), (max-width: 1000px) and (max-height: 500px) {
  .shell { padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  .masthead { gap: 8px; padding-bottom: 10px; flex-wrap: wrap; }
  .mast-right { gap: 7px; margin-left: auto; }
  .connection { font-size: .72rem; padding: 5px 8px; }
  #connection-text { overflow-wrap: anywhere; }
  .text-button { min-width: 44px; padding: 8px 12px; }
  .entry-layout { gap: 22px; padding: 28px 0 34px; }
  .entry-intro h1 { font-size: clamp(2.45rem, 10.4vw, 4rem); margin: 12px 0 15px; line-height: 1.04; }
  .eyebrow { font-size: .68rem; }
  .lede { font-size: 1rem; }
  .landing-picture { margin-top: 16px; }
  .landing-picture img { max-height: 180px; }
  .writing-layout { padding: 25px 0 28px; gap: 15px; }
  .instructions h1 { font-size: clamp(2.4rem, 9.5vw, 3.5rem); line-height: 1.06; }
  .entry-panel, .panel { padding: 17px; border-radius: 17px; box-shadow: 0 7px 22px #0b041d66; }
  .phrase-area { min-height: 80px; padding: 16px 0; }
  blockquote { font-size: clamp(1.35rem, 5.5vw, 1.75rem); }
  .write-panel form { gap: 19px; }
  .field-note, .panel-note { font-size: .82rem; }
  input, textarea { min-height: 48px; padding: 12px; }
  textarea { max-height: none; min-height: 125px; }
  .card-message-panel { padding: 13px; }
  .card-heading .small-label { display: inline; text-align: left; }
  .counter-row { flex-wrap: wrap; gap: 2px 12px; }
  .counter-row > :last-child { margin-left: auto; }
  .primary-button, .secondary-button { min-height: 50px; font-size: 1rem; }
  .confirm-dialog { width: min(420px, calc(100% - 32px - env(safe-area-inset-left) - env(safe-area-inset-right))); padding: 20px; }
  .confirm-actions { flex-direction: column; }
  .confirm-actions button { flex: 0 0 auto; width: 100%; }
  .confirm-dialog::backdrop { backdrop-filter: none; background: #130926e8; }
  .ambient::before { width: 480px; height: 480px; right: -265px; top: -155px; }
  .ambient::after { width: 520px; height: 580px; left: -300px; bottom: -170px; }
  footer { gap: 7px; font-size: .6rem; }
}
@media (max-width: 360px) {
  .shell { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  .entry-panel, .panel { padding: 14px; }
  .card-message-panel { padding: 11px; }
  .wordmark { font-size: 1.1rem; }
}
@media (hover: none), (pointer: coarse) {
  .primary-button:enabled:hover { transform: none; box-shadow: none; }
  .primary-button:enabled:active { transform: none; opacity: .88; }
}