/* Shared stationery system across workspace, editor, and supporting screens. */
:root{--at-ink:#f8e9ed;--at-muted:#c4a4b4;--at-accent:#e5adc4;--at-surface:#301e29;--at-surface2:#37232f;--at-line:#70506455;--at-accent-text:#472236;--at-glass:#291923ed}
.at-page{position:absolute;inset:0;z-index:5;overflow:auto;color:var(--at-ink);font-family:'Jost',sans-serif;scroll-behavior:smooth}
.at-header{display:flex;justify-content:space-between;align-items:center;gap:24px;max-width:1320px;margin:auto;padding:28px 42px;border-bottom:1px solid var(--at-line)}
.at-brand{display:flex;align-items:center;gap:10px;color:var(--at-ink);text-decoration:none;font:500 29px 'Cormorant Garamond',serif;white-space:nowrap}.at-brand>span{color:var(--at-accent);font-size:25px}.at-brand small{font:9px 'Jost',sans-serif;letter-spacing:.2em;color:var(--at-muted);border-left:1px solid var(--at-line);padding-left:20px;margin-left:12px}
.at-header-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}.at-button{font:400 12px 'Jost',sans-serif;display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1px solid var(--at-line);border-radius:999px;background:transparent;color:var(--at-ink);padding:12px 20px;cursor:pointer;text-decoration:none;min-height:42px;transition:background .2s,transform .2s}.at-button:hover{background:var(--at-surface2);transform:translateY(-1px)}.at-primary{background:var(--at-accent);color:var(--at-accent-text);border-color:transparent}.at-primary:hover{background:var(--at-accent);filter:brightness(1.05)}
.at-page h1,.at-dialog h2{font:400 clamp(40px,4.6vw,67px)/1.08 'Cormorant Garamond',serif;letter-spacing:-.035em;margin:18px 0}.at-page h1 em{color:var(--at-accent);font-weight:400}.at-page h2{font-family:'Cormorant Garamond',serif;font-weight:400}.at-eyebrow{font:500 9px 'Jost',sans-serif;color:var(--at-accent);letter-spacing:.19em;text-transform:uppercase;margin:0 0 16px}.at-lead{color:var(--at-muted);font:14px/1.9 'Jost',sans-serif;max-width:470px}.at-workspace-inner{max-width:1160px;margin:auto;padding:36px 40px 80px}.at-workspace-intro{display:grid;grid-template-columns:1.7fr 1fr;align-items:center;gap:50px;margin-bottom:30px}.at-workspace-intro h1{max-width:650px}.at-intro-bloom{width:100%;max-height:280px;animation:at-sway 9s ease-in-out infinite}
.at-current{display:flex;align-items:center;gap:35px;background:var(--at-surface);border:1px solid var(--at-line);border-radius:22px;padding:18px 36px 22px 12px;margin-bottom:66px}.at-current>img{width:34%;max-width:290px}.at-current h2{font-size:34px;margin:8px 0 12px}.at-current p:not(.at-eyebrow){font-size:13px;color:var(--at-muted);line-height:1.7;margin-bottom:23px}.at-section-title{display:flex;align-items:flex-end;justify-content:space-between;gap:25px;margin-bottom:25px}.at-section-title h2{font-size:37px;margin:0}.at-section-title>p{font-size:12px;color:var(--at-muted);max-width:220px;line-height:1.7}
.at-template-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.at-template{border:1px solid var(--at-line);border-radius:17px;background:var(--at-surface);padding:15px 20px 22px;text-align:left;color:var(--at-ink);display:flex;flex-direction:column;cursor:pointer;transition:transform .35s,border-color .35s}.at-template:hover{transform:translateY(-6px);border-color:var(--at-accent)}.at-template img{width:100%;height:155px;object-fit:contain;transition:transform .5s}.at-template:hover img{transform:rotate(-5deg)}.at-template-name{font:500 25px/1.1 'Cormorant Garamond',serif;margin:8px 0 13px}.at-template-copy{font:11px/1.8 'Jost',sans-serif;color:var(--at-muted);flex:1}.at-template-action{font:11px 'Jost',sans-serif;color:var(--at-accent);margin-top:22px}.at-workspace-bottom{display:flex;justify-content:space-between;gap:35px;margin-top:65px;padding-top:35px;border-top:1px solid var(--at-line)}.at-workspace-bottom h2{font-size:31px;margin:10px 0}.at-workspace-bottom p:not(.at-eyebrow){font-size:12px;color:var(--at-muted);max-width:450px;line-height:1.8}.at-bottom-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;max-width:370px}
.at-editor-layout{max-width:1320px;margin:auto;display:grid;grid-template-columns:224px minmax(0,1fr);gap:44px;padding:35px 42px 135px;align-items:start}.at-sidebar{position:sticky;top:25px}.at-sidebar>.at-eyebrow{margin-bottom:26px}.at-steps{display:flex;flex-direction:column;gap:5px}.at-step{display:flex;align-items:center;width:100%;border:0;background:transparent;color:var(--at-muted);padding:13px 12px;text-align:left;border-radius:10px;font:13px 'Jost',sans-serif;cursor:pointer;gap:15px}.at-step-number{font:italic 18px 'Cormorant Garamond',serif;opacity:.65;width:20px}.at-step-dot{margin-left:auto}.at-step.is-active{background:var(--at-surface2);color:var(--at-accent)}.at-step:hover{background:var(--at-surface)}.at-sidebar-note{margin:30px 12px 0;border-top:1px solid var(--at-line);padding-top:12px;display:flex;align-items:center}.at-sidebar-note img{width:80px;opacity:.75}.at-sidebar-note p{font:italic 17px/1.4 'Cormorant Garamond',serif;color:var(--at-muted);white-space:pre-line}
.at-editor-section{min-width:0}.at-editor-top{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--at-line);padding:0 0 15px;margin-bottom:30px;gap:20px}.at-editor-top .at-eyebrow{margin:0}.at-step-heading{text-align:left!important;margin-bottom:32px!important}.at-step-heading h2{font-size:clamp(30px,3.5vw,44px)!important;margin:12px 0!important}.at-step-heading>p{margin-left:0!important;max-width:590px!important;line-height:1.8!important;font-size:14px!important}.at-step-body{animation:at-arrive .45s ease both}.at-step-tip{margin-top:30px;padding:17px 20px;background:var(--at-surface);border:1px solid var(--at-line);border-radius:12px;color:var(--at-muted);font:12px/1.8 'Jost',sans-serif}.at-step-tip summary{cursor:pointer;color:var(--at-accent)}.at-step-tip p{margin-bottom:0}
.at-editor-footer{position:fixed;z-index:20;bottom:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:16px max(28px,calc((100vw - 1236px)/2));background:var(--at-glass);backdrop-filter:blur(20px);border-top:1px solid var(--at-line)}.at-editor-footer>p{font:italic 19px 'Cormorant Garamond',serif;color:var(--at-muted);margin:0}
.at-finish{text-align:center;max-width:650px;margin:auto}.at-finish-art{width:220px;height:155px;object-fit:contain}.at-finish h1{font-size:52px}.at-finish .at-lead{margin:0 auto 28px}.at-review{border:1px solid var(--at-line);border-radius:15px;padding:5px 22px;text-align:left;margin-bottom:25px;background:var(--at-surface)}.at-review>div{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 0;border-bottom:1px solid var(--at-line)}.at-review>div:last-child{border:0}.at-review strong{font:500 21px 'Cormorant Garamond',serif}.at-review p{font:12px/1.6 'Jost',sans-serif;color:var(--at-muted);margin:5px 0}.at-finish-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}.at-finish-note{color:var(--at-muted);font:11px/1.8 'Jost',sans-serif;max-width:370px;margin:15px auto}
.at-dialog{background:var(--at-surface);color:var(--at-ink);border:1px solid var(--at-line);border-radius:22px;width:min(580px,calc(100% - 32px));max-height:85svh;padding:30px}.at-dialog::backdrop{background:#130b12aa;backdrop-filter:blur(5px)}.at-dialog-head{display:flex;justify-content:space-between;align-items:center;gap:20px}.at-dialog-head .at-eyebrow{margin:0}.at-dialog h2{font-size:40px}.at-dialog h3{font:500 23px 'Cormorant Garamond',serif;margin:23px 0 7px}.at-dialog p{font:13px/1.8 'Jost',sans-serif;color:var(--at-muted)}
.at-support-screen input,.at-studio input,.at-studio textarea{accent-color:var(--at-accent)}.at-support-screen button,.at-studio button{touch-action:manipulation}.at-studio input:not([type=range]):not([type=color]),.at-studio textarea{line-height:1.6}.at-support-screen{scrollbar-width:thin}.at-page button:focus-visible,.at-page a:focus-visible,.at-dialog button:focus-visible{outline:2px solid var(--at-accent);outline-offset:4px}.at-page button:disabled{cursor:not-allowed;opacity:.5}
@keyframes at-arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes at-sway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@media(max-width:1100px){.at-brand small{display:none}.at-editor-layout{grid-template-columns:178px minmax(0,1fr);gap:26px;padding:28px 25px 120px}.at-template-grid{grid-template-columns:repeat(2,1fr)}.at-template img{height:175px}.at-sidebar-note{display:none}}
@media(max-width:760px){.at-header{padding:19px 20px;gap:12px}.at-header .at-brand{font-size:25px}.at-header-actions{gap:5px}.at-header-actions .at-button{font-size:10px;padding:9px 12px;min-height:36px}.at-header-actions>.at-button:first-child{display:none}.at-workspace-inner{padding:32px 20px 60px}.at-workspace-intro{grid-template-columns:1fr;gap:0}.at-intro-bloom{display:none}.at-page h1{font-size:43px}.at-current{padding:20px;gap:10px;margin-bottom:42px}.at-current>img{width:30%;min-width:85px}.at-current h2{font-size:28px}.at-current .at-eyebrow{font-size:8px}.at-current p:not(.at-eyebrow){font-size:12px}.at-section-title{display:block}.at-template-grid{gap:12px}.at-template{padding:10px 14px 19px}.at-template img{height:125px}.at-template-name{font-size:24px}.at-workspace-bottom{display:block}.at-bottom-actions{max-width:none;margin-top:20px}.at-editor-layout{display:block;padding:0 18px 115px}.at-sidebar{position:static;margin:0 -18px 26px;padding:14px 18px 0;border-bottom:1px solid var(--at-line)}.at-sidebar>.at-eyebrow{display:none}.at-steps{flex-direction:row;overflow-x:auto;gap:5px;padding-bottom:14px;scrollbar-width:thin}.at-step{width:auto;white-space:nowrap;padding:10px 12px;gap:8px;font-size:12px}.at-step-number{width:auto;font-size:15px}.at-step-dot{display:none}.at-editor-top{margin-bottom:24px}.at-editor-footer{padding:13px 18px;gap:12px}.at-editor-footer>p{display:none}.at-step-heading h2{font-size:32px!important}.at-step-heading>p{font-size:13px!important}.at-finish h1{font-size:43px}.at-review{padding:2px 16px}.at-review>div{gap:10px}.at-review .at-button{padding:9px 14px}.at-dialog{padding:23px}.at-dialog h2{font-size:35px}}
@media(prefers-reduced-motion:reduce){.at-page{scroll-behavior:auto}.at-step-body,.at-intro-bloom{animation:none}.at-template,.at-template img,.at-button{transition:none}}
/* The painted meadow has its own soft halo; no extra outline or moving layer. */
.at-workspace-intro:has(.at-meadow-sprig)::before{content:none}
.at-intro-bloom.at-meadow-sprig{height:310px;max-height:310px;object-fit:contain;animation:none}
.at-layout-preview{border:1px solid var(--at-line);border-radius:17px;background:var(--at-surface);padding:18px;overflow:hidden}.at-preview-stage{height:270px;position:relative}.at-sample-note{position:absolute;left:5%;top:32px;width:66%;padding:22px 19px;border-radius:7px;background:#f5e7d7;color:#785964;box-shadow:0 12px 25px #0002;transform:rotate(-7deg);font:italic 20px 'Cormorant Garamond',serif}.at-sample-note p{font-size:17px;line-height:1.7}.at-sample-note em{font-size:15px;color:#a16c7d}.at-preview-stage>img{position:absolute;right:-12%;bottom:-8px;width:78%;transform:rotate(8deg)}.at-preview-caption{font:11px/1.7 'Jost',sans-serif;color:var(--at-muted);text-align:center;margin:10px 0}.at-film .at-sample-note{left:10%;width:80%;transform:none;transition:opacity .3s,transform .3s}.at-film .at-preview-stage>img{width:100%;height:100%;right:0;bottom:0;opacity:0;transform:translateX(30px);transition:opacity .3s,transform .3s}.at-film [data-slide='1']>.at-sample-note{opacity:0;transform:translateX(-30px)}.at-film [data-slide='1']>img{opacity:1;transform:none}.at-preview-controls{display:flex;align-items:center;justify-content:center;gap:20px;font:11px 'Jost',sans-serif;color:var(--at-muted)}
@media(max-width:1100px){.at-step-body[data-step='4']>div:nth-child(2),.at-step-body[data-step='5']>div:nth-child(2),.at-step-body[data-step='6']>div:nth-child(2){grid-template-columns:1fr!important}.at-layout-preview{max-width:450px;margin:auto}}
@media(prefers-reduced-motion:reduce){.at-film .at-sample-note,.at-film .at-preview-stage>img{transition:none}}
/* The .at-rose-* and .at-silk-* rules that used to sit here were removed with the copy's own intro and opening (see atelier.js): this project keeps its own. That deleted ~25 class rules, 8 @keyframes and 3 media queries, none of them referenced by any JS. */
.at-ending{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 24px;overflow:auto}.at-ending>img{width:min(65vw,340px);height:min(38svh,280px);object-fit:contain;animation:at-arrive 1s ease both}.at-ending h1{font:italic 400 clamp(44px,6vw,70px) 'Cormorant Garamond',serif;margin:10px 0}.at-ending-signature{font:italic 26px 'Cormorant Garamond',serif;opacity:.7;margin:6px 0 30px}.at-ending-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.at-ending>.at-eyebrow{color:inherit;opacity:.6}
@media(prefers-reduced-motion:reduce){.at-ending>img{animation:none}}
.at-auth-art{text-align:center;max-width:360px;padding:30px 25px;color:var(--at-ink)}.at-auth-art img{width:100%;max-height:300px}.at-auth-art h2{font:italic 400 43px/1.1 'Cormorant Garamond',serif;white-space:pre-line;margin:15px 0}.at-auth-art>p:last-child{font:13px/1.9 'Jost',sans-serif;color:var(--at-muted);white-space:pre-line}@media(max-width:899px){.at-auth-art{padding:55px 15px 10px}.at-auth-art img,.at-auth-art>p:last-child{display:none}.at-auth-art h2{font-size:29px;white-space:normal;margin:10px 0}.at-auth-art .at-eyebrow{font-size:8px}}
.at-steps::-webkit-scrollbar{height:3px}.at-steps::-webkit-scrollbar-thumb{background:var(--at-line)}.at-steps::-webkit-scrollbar-track{background:transparent}
.at-premium .at-header{width:100%;padding:8px 0 22px;margin-bottom:30px}.at-premium .at-header .at-brand{font-size:25px}.at-premium .at-brand small{display:none}.at-premium .at-header-actions>.at-button:first-child{display:none}.at-premium-art{height:150px;width:210px;object-fit:contain;margin:0 auto 16px}.at-premium h1{font-weight:400!important}.at-premium .at-header-actions{gap:5px}.at-premium .at-header .at-button{font-size:11px;padding:10px 14px}
/* Rose Bloom: a compact layered flower that opens toward the reader. */


/* ── Dark-mode glow ──────────────────────────────────────────────────────────────
   Dark only, deliberately: the same halos over the light palette read as grey smudge
   rather than light. Everything here is static - no animation, no keyframes - so there
   is nothing for prefers-reduced-motion to turn off.

   Alpha comes from --at-accent-rgb, set next to --at-accent by the renderScene wrapper
   in atelier.js, because --at-accent is an opaque hex. If that property is ever missing
   these rules simply do not apply, which degrades to the pre-glow appearance. */

/* Primary action: a soft pool of accent light under the button, plus a faint rim. */
html[data-mode="dark"] .at-primary{
  box-shadow:0 10px 28px -14px rgba(var(--at-accent-rgb),.85),
             0 0 0 1px rgba(var(--at-accent-rgb),.22);
}
html[data-mode="dark"] .at-primary:hover{
  box-shadow:0 12px 34px -12px rgba(var(--at-accent-rgb),.95),
             0 0 0 1px rgba(var(--at-accent-rgb),.36);
}

/* Keyboard focus should be unmistakable, and glow suits it better than a hard outline.
   The inner ring in --at-surface keeps it legible against the button's own fill. */
html[data-mode="dark"] .at-button:focus-visible,
html[data-mode="dark"] .at-template:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px var(--at-surface),
             0 0 0 4px rgba(var(--at-accent-rgb),.55),
             0 0 18px -2px rgba(var(--at-accent-rgb),.45);
}

/* Cards lift toward the light on hover rather than just changing colour. */
html[data-mode="dark"] .at-template:hover{
  border-color:rgba(var(--at-accent-rgb),.38);
  box-shadow:0 14px 38px -22px rgba(var(--at-accent-rgb),.75);
}

/* One ambient bloom for the whole surface, from above, as if the page were lit - rather
   than a glow per element, which is what makes this kind of thing look cheap. Painted as
   a background layer on .at-page (which had none) to avoid introducing a pseudo-element
   into its z-index:5 stacking context. */
html[data-mode="dark"] .at-page{
  background-image:radial-gradient(62% 44% at 50% -4%,
                   rgba(var(--at-accent-rgb),.11) 0%, transparent 70%);
  background-repeat:no-repeat;
  background-attachment:fixed;
}