:root {
 --paper:#f7f3e9; --paper-deep:#eae5d8; --milk:#fcfaf4; --ink:#283a3b; --muted:#78817c;
 --rule:rgba(52,72,69,.22); --teal:#4e7877; --ochre:#ac745c; --serif:'Fraunces',Georgia,serif;
 --sans:'DM Sans',Arial,sans-serif; --mono:'DM Mono',monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
button,textarea{font:inherit}button{cursor:pointer}a{color:inherit}button:focus-visible,textarea:focus-visible,a:focus-visible,input:focus-visible+span{outline:2px solid var(--ochre);outline-offset:4px}
.paper-grain{background:url('/assets/paper-grain.webp') repeat;opacity:.22;position:fixed;inset:0;z-index:12;pointer-events:none;mix-blend-mode:multiply}
.frame{width:min(1640px,100% - 92px);margin:0 auto}
.masthead{height:100px;border-bottom:1px solid var(--rule);display:flex;justify-content:space-between;align-items:center;gap:24px}
.brand{text-decoration:none;display:flex;align-items:center;font:600 31px/.9 var(--serif);letter-spacing:-1.9px}
.brand-glyph{font:48px/.6 Georgia,serif;color:var(--ochre);padding-right:10px;position:relative;top:-3px}
.brand-dot{color:var(--ochre)}
.mast-center{font:10px var(--mono);letter-spacing:.12em;color:#79867e;white-space:nowrap}
.mast-center span{margin:0 15px;color:#a1aba4}
.archive-toggle{background:transparent;border:0;color:var(--ink);font:10px var(--mono);letter-spacing:.085em;padding:13px 0;display:flex;align-items:center;gap:9px;transition:color .2s}
.archive-toggle:hover{color:var(--ochre)}.archive-symbol{font-size:23px;line-height:.8}.count{background:#e0e6de;border-radius:60px;padding:5px 7px;letter-spacing:0}
.main-grid{display:grid;grid-template-columns:minmax(345px,.82fr) minmax(0,1.48fr);min-height:min(792px,calc(100svh - 130px));border-bottom:1px solid var(--rule)}
.composer{position:relative;padding:51px 64px 35px 0;display:flex;flex-direction:column;border-right:1px solid var(--rule)}
.edition-mark,.section-index{font:10px var(--mono);color:#7f8c85;letter-spacing:.08em;text-transform:uppercase}
.edition-mark{display:flex;align-items:center;gap:10px;white-space:nowrap}
.nimbus{font:22px Georgia,serif;color:var(--ochre);margin-right:5px}.edition-number{margin-left:auto;color:#9aa29a}
h1{font:400 clamp(72px,7.2vw,138px)/.87 var(--serif);letter-spacing:-.074em;margin:27px 0 23px}
h1 em{color:var(--ochre);font-weight:400;padding-right:.1em;letter-spacing:-.084em}
.introduction{font-size:15px;max-width:320px;line-height:1.83;margin:0 0 32px;color:#5f6b68}
#poem-form{margin-top:auto}
.field-title{display:flex;gap:14px;align-items:center;font:10px var(--mono);letter-spacing:.07em;color:var(--ochre);margin-bottom:12px}
.field-title span{color:#56635e}
.prompt-wrap{position:relative}
#prompt{display:block;width:100%;min-height:105px;resize:vertical;border:1px solid #b8c0b8;background:rgba(255,255,255,.37);padding:15px 32px 12px 15px;color:var(--ink);font:18px/1.47 var(--serif);letter-spacing:-.025em;transition:border-color .2s,background .2s}
#prompt:focus{border-color:var(--teal);background:#fffdf9;outline:none}
#prompt::placeholder{color:#9ba5a0;font-style:italic}
.corner-ornament{position:absolute;right:12px;top:9px;color:#9ba6a1;font:15px var(--serif);pointer-events:none}
.mini-hint{font:10px/1.6 var(--sans);color:#929a93;margin:7px 0 22px}
.tone-field{margin:0 0 24px;padding:0;border:0;min-width:0}.tone-field legend{padding:0}
.tone-options{display:flex;flex-wrap:wrap;gap:6px}
.tone-choice{position:relative}.tone-choice input{opacity:0;position:absolute;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.tone-choice span{display:inline-block;min-width:61px;text-align:center;padding:10px 12px;border:1px solid #bec4bc;border-radius:50px;font:11px var(--sans);transition:background .2s,color .2s,border-color .2s,transform .2s}
.tone-choice:hover span{border-color:var(--teal)}.tone-choice input:checked+span{background:var(--ink);color:#fefcf5;border-color:var(--ink)}
.compose-button{border:1px solid var(--ink);background:var(--ink);color:#fffdf5;width:100%;padding:18px 19px;display:flex;align-items:center;justify-content:space-between;text-align:left;font:500 13px var(--sans);transition:transform .25s,background .25s}
.compose-button:hover:not(:disabled){background:var(--teal);transform:translateY(-2px)}.compose-button:disabled{opacity:.6;cursor:progress}.compose-button .arrow{font:23px/.8 var(--serif)}
.surprise{border:0;background:none;padding:13px 3px;color:#8e7a6f;font:11px var(--sans);transition:color .2s}.surprise:hover{color:#663d30}
.composer-bottom{margin-top:37px;display:flex;align-items:center;justify-content:space-between;gap:7px}.stamp-serial{font:9px var(--mono);color:#97a09a;letter-spacing:.03em}.stamp-serial span{padding:0 5px}.hand-signature{font:italic 17px var(--serif);color:#ad8270;white-space:nowrap}
.poem-world{min-width:0;padding:26px 0 34px 27px;display:flex;flex-direction:column}
.stage{position:relative;isolation:isolate;flex:1;min-height:595px;overflow:hidden;border:1px solid #d3d8d1;background:radial-gradient(ellipse at 58% 47%,rgba(246,248,239,.56) 0%,rgba(237,243,237,.6) 43%,rgba(226,233,227,.7) 89%),url('/assets/paper-grain.webp');background-size:cover,430px;box-shadow:0 14px 50px rgba(42,67,61,.07);color:#314e50}
#currents{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;filter:saturate(.85)}
.stage-wash{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 23% 70%,rgba(142,182,179,.14),transparent 52%),radial-gradient(ellipse at 74% 28%,rgba(190,169,149,.17),transparent 47%),linear-gradient(180deg,rgba(255,253,244,.34),transparent 34%,rgba(243,244,239,.21) 75%)}
.stage::after{content:'';position:absolute;z-index:1;inset:13px;pointer-events:none;border:1px solid rgba(79,107,101,.13)}
.stage-head,.stage-bottom{position:absolute;z-index:5;left:38px;right:38px;display:flex;align-items:center;justify-content:space-between;gap:9px;letter-spacing:.06em;color:#7c938c;font:9px var(--mono)}
.stage-head{top:37px}.stage-bottom{bottom:29px}.tiny-diamond{padding:0 7px;color:var(--ochre)}.sun-mark{font:25px Georgia,serif;color:var(--ochre);opacity:.7}
.stage-theme{min-width:100px;text-align:right}.stage-coordinates{opacity:.7}
.horizon-stamp{position:absolute;left:33px;bottom:50%;z-index:3;writing-mode:vertical-rl;transform:rotate(180deg);font:8px var(--mono);letter-spacing:.19em;color:rgba(95,126,119,.43)}.horizon-stamp span{color:var(--ochre)}
.verse-stream{position:absolute;z-index:1;inset:0;overflow:hidden;pointer-events:none}
.verse-stream span{position:absolute;left:0;top:calc(27% + var(--i)*21%);color:rgba(57,111,109,.13);white-space:nowrap;font:italic clamp(29px,3vw,49px)/1.1 var(--serif);letter-spacing:-.035em;animation:verse-current calc(43s + var(--i)*10s) linear infinite;animation-delay:calc(var(--i)*-16s);will-change:transform}
.stage[data-current="wind"] .verse-stream span{color:rgba(143,104,89,.17);animation-name:verse-wind;animation-duration:calc(28s + var(--i)*7s)}
@keyframes verse-current{from{transform:translate3d(1100px,10px,0)}50%{transform:translate3d(180px,-13px,0)}to{transform:translate3d(-1100px,15px,0)}}
@keyframes verse-wind{from{transform:translate3d(1130px,100px,0) rotate(-6deg)}to{transform:translate3d(-1100px,-120px,0) rotate(4deg)}}
.poem-live{position:absolute;z-index:4;left:8%;right:7%;top:50%;transform:translateY(-53%);min-height:244px;display:flex;flex-direction:column;justify-content:center;gap:28px;padding:14px 6px}
.poem-line{font:400 clamp(23px,2.65vw,53px)/1.27 var(--serif);letter-spacing:-.035em;color:#2e4c4f;position:relative;min-width:0;opacity:1;transform:translate3d(0,0,0)}
.poem-line:nth-child(1){margin-left:1.5%}.poem-line:nth-child(2){margin-left:12%;}.poem-line:nth-child(3){margin-left:5%}
.poem-line span{display:inline-block;text-shadow:1px 1px 0 rgba(255,255,255,.18)}
.poem-line.arrive{animation:poem-arrive 2.2s cubic-bezier(.17,.65,.24,1) backwards;animation-delay:calc(var(--i)*.25s)}
.poem-line.arrive span{animation:tidal 8s ease-in-out infinite alternate;animation-delay:calc(var(--i)*.53s)}
.stage[data-current="wind"] .poem-line.arrive{animation-name:poem-arrive-wind}.stage[data-current="wind"] .poem-line.arrive span{animation:breathing-wind 6.4s ease-in-out infinite alternate;animation-delay:calc(var(--i)*-.7s)}
.poem-line.depart{animation:poem-depart 1.03s ease-in forwards!important;animation-delay:calc(var(--i)*.075s)}.poem-line.depart span{animation:none}
.stage[data-current="wind"] .poem-line.depart{animation-name:poem-depart-wind}
@keyframes poem-arrive{from{opacity:0;transform:translate3d(115%,18px,0) rotate(2deg);filter:blur(8px)}50%{opacity:.72}to{opacity:1;transform:translate3d(0,0,0);filter:blur(0)}}
@keyframes poem-arrive-wind{from{opacity:0;transform:translate3d(130%,-56px,0) rotate(-4deg);filter:blur(8px)}60%{opacity:1}to{opacity:1;transform:translate3d(0,0,0);filter:blur(0)}}
@keyframes poem-depart{to{opacity:0;transform:translate3d(-125%,14px,0) rotate(-1deg);filter:blur(10px)}}
@keyframes poem-depart-wind{to{opacity:0;transform:translate3d(-125%,-75px,0) rotate(-7deg);filter:blur(9px)}}
@keyframes tidal{0%{transform:translate3d(0,0,0)}50%{transform:translate3d(18px,5px,0)}100%{transform:translate3d(34px,-7px,0)}}
@keyframes breathing-wind{0%{transform:translate3d(-11px,7px,0)}50%{transform:translate3d(18px,-8px,0)}100%{transform:translate3d(39px,-13px,0)}}
.floating-caption{position:absolute;bottom:97px;left:11%;z-index:5;opacity:.74;font:italic 18px var(--serif);color:#a4776c;letter-spacing:-.005em}
.wake{position:absolute;z-index:0;font:10px var(--mono);letter-spacing:.25em;color:rgba(56,106,108,.16);pointer-events:none;white-space:nowrap;will-change:transform}.wake-one{top:28%;left:0;animation:wake-east 51s linear infinite}.wake-two{top:79%;right:0;animation:wake-west 57s linear infinite}
@keyframes wake-east{from{transform:translateX(115%)}to{transform:translateX(-145%)}}@keyframes wake-west{from{transform:translateX(-115%)}to{transform:translateX(145%)}}
.stage-controls{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:20px 4px 0;min-height:70px}
.flow-pick{display:flex;align-items:center;gap:14px;font:9px var(--mono);letter-spacing:.03em;color:#89978e;white-space:nowrap}.switch{border:1px solid #cbd0c7;padding:3px;display:flex;gap:2px}.switch button{border:0;background:none;color:#77867e;padding:9px 12px;font:11px var(--sans);white-space:nowrap}.switch button.active{background:#dce6dc;color:#3d625f}
.stage-actions{display:flex;align-items:center;gap:3px}.stage-actions button{border:0;background:none;color:#576c67;padding:10px 11px;font:12px var(--sans);white-space:nowrap}.stage-actions button:hover{color:var(--ochre)}.stage-actions button span{margin-left:4px}
.bottom-section{padding:64px 0 78px}.suggestion-heading{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:28px}.suggestion-heading h2,.archive-top h2{font:400 clamp(38px,4.8vw,69px)/.99 var(--serif);letter-spacing:-.05em;margin:12px 0 0}.suggestion-heading h2 em,.archive-top h2 em{font-weight:400;color:var(--ochre)}.suggestion-heading p{max-width:300px;font:13px/1.7 var(--sans);color:#7b857e;margin:0}
.prompt-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}
.prompt-gallery button{position:relative;text-align:left;min-height:171px;padding:17px 19px 21px;background:#f0ede3;border:1px solid #d7d9cd;color:var(--ink);display:flex;flex-direction:column;align-items:start;justify-content:space-between;transition:transform .23s,background .23s,border-color .23s}.prompt-gallery button:hover{transform:translateY(-4px);border-color:#9aaca4;background:#edf1e9}.prompt-gallery button>span:first-child{font:9px var(--mono);color:#89968d;letter-spacing:.06em}.prompt-gallery strong{font:400 24px/1.16 var(--serif);letter-spacing:-.025em}.prompt-arrow{position:absolute;right:18px;top:15px;color:#af8170;font:18px var(--serif)}
.footer{border-top:1px solid var(--rule);padding:22px 0 43px;display:flex;align-items:center;justify-content:space-between;gap:10px;color:#8b9890;font:9px/1.5 var(--mono);letter-spacing:.035em}.footer span span{padding:0 4px;color:var(--ochre)}
.archive-backdrop{position:fixed;inset:0;z-index:20;background:rgba(30,48,46,.4);backdrop-filter:blur(5px)}.archive-backdrop[hidden]{display:none}
.archive-panel{position:fixed;z-index:21;right:0;top:0;height:100dvh;width:min(520px,100%);background:#f7f3e9;border-left:1px solid #bdc7ba;box-shadow:-25px 0 80px rgba(25,41,37,.14);padding:38px;overflow-y:auto;transform:translateX(101%);transition:transform .45s cubic-bezier(.2,.8,.1,1)}.archive-panel.visible{transform:translateX(0)}
.archive-top{display:flex;align-items:start;justify-content:space-between;gap:20px}.archive-top h2{font-size:57px}.archive-top button{background:none;border:1px solid var(--rule);border-radius:50%;font:25px var(--sans);width:38px;height:38px;color:var(--ink)}
.archive-intro{font:13px/1.65 var(--sans);color:#7f8982;padding:10px 0 26px;border-bottom:1px solid var(--rule)}
.archive-items{display:grid;gap:13px;margin:21px 0 30px}.archive-card{border:1px solid #c9d0c6;padding:19px 20px;background:#fdfbf5}.archive-card-head{display:flex;justify-content:space-between;gap:14px;color:#a28371;font:9px var(--mono);margin-bottom:16px;letter-spacing:.06em}.archive-card p{font:400 23px/1.4 var(--serif);margin:0 0 18px;white-space:pre-line}.archive-card-actions{display:flex;justify-content:space-between;border-top:1px solid var(--rule);padding-top:12px}.archive-card-actions button{border:0;background:transparent;color:var(--teal);font:11px var(--sans);padding:4px 0}.archive-card-actions button:last-child{color:#a17e72}.archive-empty{font:italic 27px/1.3 var(--serif);color:#8c9e94;margin:60px 0}.archive-foot{font:italic 18px var(--serif);color:#a37d6e}
.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);background:#263f3d;color:#fffdf4;padding:12px 21px;z-index:30;font:12px var(--sans);box-shadow:0 10px 40px rgba(28,45,42,.2)}.toast[hidden]{display:none}
@media(max-width:1300px){.frame{width:min(100% - 56px,1640px)}.composer{padding-right:38px}.main-grid{grid-template-columns:minmax(310px,.85fr) minmax(0,1.45fr)}.stage-actions button{padding:8px 5px}.stage{min-height:555px}.stage-controls{align-items:flex-start;flex-wrap:wrap}.poem-live{left:9%;right:5%}}
@media(max-width:1030px){.main-grid{grid-template-columns:1fr;min-height:0}.composer{padding:44px 0 27px;max-width:none;border-right:0;border-bottom:1px solid var(--rule);display:block}.composer h1{font-size:clamp(82px,12vw,125px)}.introduction{max-width:600px;margin-bottom:24px}.composer #poem-form{display:grid;grid-template-columns:1fr 1fr;column-gap:28px}.composer #poem-form>.field-title,.prompt-wrap,.mini-hint{grid-column:1}.tone-field{grid-column:2;grid-row:1/span 3;align-self:end}.compose-button{grid-column:1/span 2}.surprise{grid-column:1/span 2}.composer-bottom{margin-top:16px}.poem-world{padding:24px 0 35px}.stage{min-height:610px}.poem-line{font-size:clamp(35px,5vw,63px)}}
@media(max-width:700px){.frame{width:calc(100% - 30px)}.masthead{height:70px}.brand{font-size:25px}.brand-glyph{font-size:36px}.mast-center{display:none}.archive-toggle{font-size:9px}.archive-symbol{font-size:18px}.composer{padding:29px 0 25px}.edition-number{display:none}.edition-mark{font-size:8px;gap:5px}.composer h1{font-size:clamp(70px,16vw,109px);margin:21px 0 19px}.introduction{font-size:13px;margin-bottom:25px}.composer #poem-form{display:block}.prompt-wrap textarea{min-height:89px}.tone-field{margin-top:12px}.tone-options{gap:6px}.tone-choice span{min-width:auto;padding:9px 12px}.composer-bottom{display:none}.stage{min-height:520px}.poem-world{padding:20px 0 26px}.stage-head,.stage-bottom{left:24px;right:24px}.stage-head{top:25px}.stage-bottom{bottom:23px}.stage-coordinates{display:none}.horizon-stamp{left:15px}.poem-live{left:10%;right:3%;min-height:240px;gap:26px;transform:translateY(-47%)}.poem-line{font-size:clamp(25px,6.4vw,43px);line-height:1.35}.poem-line:nth-child(2){margin-left:4%}.floating-caption{left:9%;bottom:81px;font-size:15px}.stage-controls{padding:16px 0 0;gap:12px}.flow-pick{width:100%;justify-content:space-between}.stage-actions{width:100%;justify-content:space-between}.stage-actions button{padding:9px 8px}.stage-actions button span{font-size:10px}.suggestion-heading{align-items:start;display:block}.suggestion-heading p{margin-top:16px}.bottom-section{padding:35px 0 49px}.prompt-gallery{grid-template-columns:1fr 1fr;gap:9px}.prompt-gallery button{min-height:151px;padding:13px}.prompt-gallery strong{font-size:20px}.footer{display:grid;grid-template-columns:1fr 1fr;gap:10px}.footer>span:last-child{display:none}.archive-panel{padding:27px 22px}.archive-top h2{font-size:47px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.poem-line,.poem-line span,.wake,.verse-stream span{animation:none!important}.prompt-gallery button,.compose-button{transition:none!important}.archive-panel{transition:none!important}}
@media print{body{background:#fff}.masthead,.composer,.stage-controls,.bottom-section,.footer{display:none}.main-grid{display:block}.poem-world{padding:0}.stage{border:0;box-shadow:none;width:100%;height:90vh}.stage::after,.wake,.verse-stream,.horizon-stamp{display:none}.poem-line,.poem-line span{animation:none!important}.paper-grain{opacity:.12}}
