/* Sage Atelier — editorial imagery, tactile surfaces, restrained motion. */
.hero{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center;text-align:left;padding:38px 0 40px;isolation:isolate;overflow:visible;min-height:380px}
.hero-copy{position:relative;z-index:1;animation:copy-arrive .9s cubic-bezier(.2,.7,.2,1) both}
.hero .hero-kicker{justify-content:flex-start;font-size:12px;letter-spacing:2.2px;gap:10px}
.hero .hero-kicker>span{width:21px}
.hero h1{font-size:42px;line-height:1.6;letter-spacing:-2px;margin:20px 0 13px}
.hero .mobile-break{display:block}
.hero .hero-copy>p{font-size:16px;line-height:2;color:#7b8970;margin:0}
.hero .hero-note{font-size:13px;letter-spacing:.7px;margin-top:22px;color:#8a997e;display:flex;align-items:center;gap:8px}
.hero .hero-note:before{content:'';display:block;width:5px;height:5px;background:#9eae8c;border-radius:50%}
.hero-visual{position:relative;margin:0;height:330px;min-width:0;border-radius:18px 72px 18px 18px;overflow:hidden;background:#e8e8d9;box-shadow:0 20px 45px -24px #394a303d;animation:visual-arrive 1.2s cubic-bezier(.2,.7,.2,1) both}
.hero-visual:after{content:'';position:absolute;inset:0;border:1px solid #ffffff50;border-radius:inherit;pointer-events:none}
.hero-visual img{display:block;width:100%;height:100%;object-fit:cover;object-position:65% center;transition:transform 1.2s cubic-bezier(.2,.7,.2,1);animation:photo-settle 1.8s ease-out both}
.hero-visual figcaption{position:absolute;left:20px;bottom:18px;background:#fafbf4d9;backdrop-filter:blur(9px);border:1px solid #fff9;border-radius:6px;padding:10px 13px;color:#5d7150;display:flex;align-items:center;gap:9px;font:12px/1.5 Arial,sans-serif;letter-spacing:1.5px}
.hero-visual figcaption span{font:italic 18px Georgia;letter-spacing:0;color:#9aa98b}
.mode-cards{position:relative;z-index:1;gap:15px}
.mode-card{transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s,border-color .28s,background .28s}
.mode-card:hover:not(:disabled){transform:translateY(-4px);box-shadow:0 11px 25px #36562c10;border-color:#bbcba9}
.mode-card .mode-art{transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s}
.mode-card:hover:not(:disabled) .mode-art{transform:rotate(0deg) translateY(-3px);box-shadow:3px 7px 0 #b7c8ac30,0 10px 18px #48633a10}
.mode-card>b{transition:transform .3s}.mode-card:hover>b{transform:translate(2px,-2px)}
.button{transition:transform .22s,background .22s,box-shadow .22s,border-color .22s}
.button:hover:not(:disabled){transform:translateY(-2px)}
.button:active:not(:disabled){transform:translateY(0) scale(.98)}
.button svg{transition:transform .25s}.button:hover:not(:disabled)>svg:last-child{transform:translateX(2px)}
.brand img{transition:transform .4s}.brand:hover img{transform:rotate(-5deg)}
.drop{transition:background .25s,border-color .25s,box-shadow .25s}
.drop:hover{border-color:#a9bc99;box-shadow:inset 0 0 40px #e4eddb26}
.paper-stack .paper{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.drop:hover .paper.back{transform:rotate(-28deg) translate(-18px,-4px)}
.drop:hover .paper.middle{transform:rotate(24deg) translate(18px,-7px)}
.drop:hover .paper.front{transform:rotate(-1deg) translateY(-5px)}
.paper-plus{transition:transform .4s}.drop:hover .paper-plus{transform:translateY(-3px) rotate(90deg)}
.workspace{transition:box-shadow .3s,outline-color .3s}.workspace.over{box-shadow:0 0 0 5px #9dbb8028,0 18px 45px #3e622b18}
.page-card .thumb{transition:transform .25s,border-color .25s,box-shadow .25s}
.page-card:hover .thumb{box-shadow:0 8px 18px #36562c0d;border-color:#b8c9a9;transform:translateY(-2px)}
.page-card.selected .thumb{box-shadow:0 0 0 1px #6a8b58,0 6px 18px #36562c10}
.page-card.dragging .thumb{transform:rotate(2deg) scale(.98)}
.preview-button{transition:background .2s,transform .2s}.preview-button:hover{transform:scale(1.1);background:#eef5e6}
.guide-card,.benefits article,.journal-heading,.home-faq,.journal-update{transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1),box-shadow .25s;transition-delay:var(--reveal-delay,0ms),var(--reveal-delay,0ms),0ms}
.reveal-pending{opacity:0;transform:translateY(18px)}
.guide-card:hover{transition-delay:0ms;box-shadow:0 13px 28px #37562a10;transform:translateY(-4px)}
#result:not([hidden]){animation:result-arrive .45s cubic-bezier(.2,.7,.2,1) both}
body.loading #run>svg:last-child{display:none}body.loading #run:after{content:'';width:13px;height:13px;flex-shrink:0;border:1.5px solid #ffffff50;border-top-color:#fff;border-radius:50%;animation:working-spin .8s linear infinite}
dialog[open]{animation:result-arrive .25s ease-out}
@keyframes copy-arrive{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
@keyframes visual-arrive{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes photo-settle{from{transform:scale(1.05)}to{transform:scale(1)}}
@keyframes result-arrive{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@keyframes working-spin{to{transform:rotate(360deg)}}
@media(min-width:1400px){.hero{gap:50px;padding:45px 0}.hero h1{font-size:46px}.hero-visual{height:355px}}
@media(max-width:1000px){.hero{gap:23px;min-height:330px;padding:30px 0}.hero h1{font-size:34px}.hero-visual{height:290px;border-top-right-radius:58px}.hero .hero-kicker{font-size:11px;letter-spacing:1.4px}.hero .hero-copy>p{font-size:15px}.hero-visual figcaption{left:13px;bottom:13px;font-size:10px;padding:8px;letter-spacing:1px}}
@media(max-width:650px){.hero{grid-template-columns:1fr;gap:23px;text-align:center;padding:30px 0 24px}.hero .hero-kicker{justify-content:center;font-size:11px;letter-spacing:1.7px}.hero h1{font-size:31px;line-height:1.6;margin:15px 0 12px}.hero .hero-copy>p{font-size:15px}.hero .hero-note{justify-content:center;font-size:12px;margin-top:16px}.hero-visual{height:185px;border-radius:13px 48px 13px 13px;box-shadow:0 12px 30px -20px #394a3045}.hero-visual img{object-position:65% 55%}.hero-visual figcaption{left:13px;bottom:13px;font-size:10px;padding:7px 10px;letter-spacing:1px}.hero-visual figcaption span{font-size:17px}.mode-cards{gap:7px}.mode-card:hover:not(:disabled){transform:translateY(-2px)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal-pending{opacity:1;transform:none}.hero-visual img,.mode-card:hover,.page-card:hover .thumb,.button:hover{transform:none!important}}

.brand em{font-family:"Malgun Gothic",Arial,sans-serif;font-style:normal;font-weight:600;font-size:.84em;letter-spacing:-1px}


/* Living stationery: a quiet motion graphic over the editorial still life. */
.hero-visual{transform:translateZ(0)}.hero-visual img{animation:atelier-breathe 18s ease-in-out infinite alternate;transform-origin:75% 55%}
.hero-visual:before{content:'';position:absolute;inset:-40%;z-index:2;pointer-events:none;background:linear-gradient(110deg,transparent 30%,#fff8dc00 40%,#fff9db55 49%,#fff8dc00 58%,transparent 70%);mix-blend-mode:screen;animation:atelier-light 16s ease-in-out infinite}
.atelier-motion{position:absolute;inset:0;pointer-events:none;z-index:1}
.motion-paper{position:absolute;display:block;width:50px;height:67px;background:linear-gradient(135deg,#ffffffeb,#f1f3e9d9);border:1px solid #ffffffbd;border-radius:5px 15px 5px 5px;box-shadow:0 12px 20px #3b53391c;backdrop-filter:blur(5px);padding:22px 10px 8px;transform-origin:center}
.motion-paper:before{content:'';position:absolute;top:8px;left:10px;width:8px;height:8px;border:1px solid #a3b594;border-radius:2px}
.motion-paper i{display:block;height:2px;margin:5px 0;background:#9aaf8b66;border-radius:3px}.motion-paper i:last-child{width:65%}
.motion-paper-one{left:12%;top:16%;animation:atelier-paper-one 7s ease-in-out infinite}
.motion-paper-two{left:25%;top:32%;width:41px;height:55px;padding:17px 8px 6px;background:linear-gradient(140deg,#faf6edeb,#f1e0cbbd);animation:atelier-paper-two 8s ease-in-out infinite}
.motion-dot{position:absolute;width:5px;height:5px;border-radius:50%;background:#f6e8ce;box-shadow:0 0 12px 4px #f9edda77}
.dot-one{left:38%;top:18%;animation:atelier-spark 9s ease-in-out infinite}.dot-two{left:18%;top:60%;animation:atelier-spark 11s ease-in-out -3s infinite}
.motion-orbit{position:absolute;left:8%;top:11%;width:150px;height:150px;border:1px solid #ffffff40;border-right-color:transparent;border-bottom-color:transparent;border-radius:50%;animation:atelier-orbit 28s linear infinite}
.hero-motion-toggle{position:absolute;z-index:3;right:14px;bottom:16px;border:1px solid #ffffff90;border-radius:6px;background:#f9fbf1cc;backdrop-filter:blur(8px);color:#55704b;font-size:13px;padding:8px 10px;letter-spacing:.2px}
.hero-motion-toggle:hover{background:#fff}.hero-motion-toggle:disabled{opacity:.65}
.hero-visual.motion-paused img,.hero-visual.motion-paused:before,.hero-visual.motion-paused .atelier-motion *{animation-play-state:paused!important}
@keyframes atelier-breathe{from{transform:scale(1.015) translate(0,0)}to{transform:scale(1.065) translate(-.5%,.5%)}}
@keyframes atelier-paper-one{0%,100%{transform:translateY(0) rotate(-9deg)}50%{transform:translateY(-12px) rotate(-3deg)}}
@keyframes atelier-paper-two{0%,100%{transform:translateY(-4px) rotate(10deg)}50%{transform:translateY(9px) rotate(16deg)}}
@keyframes atelier-light{0%,100%{opacity:.15;transform:translateX(-14%) rotate(-7deg)}50%{opacity:.8;transform:translateX(18%) rotate(-7deg)}}
@keyframes atelier-spark{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:.9;transform:translateY(-15px)}}
@keyframes atelier-orbit{to{transform:rotate(360deg)}}
@media(max-width:650px){.motion-paper-one{width:34px;height:45px;padding:15px 7px 5px;top:12%}.motion-paper-two{width:29px;height:38px;padding:13px 6px 4px;left:24%;top:27%}.motion-paper:before{width:5px;height:5px;top:6px;left:7px}.motion-paper i{margin:4px 0;height:1px}.motion-orbit{width:100px;height:100px}.hero-motion-toggle{font-size:12px;bottom:13px;right:12px;padding:6px 8px}}
@media(prefers-reduced-motion:reduce){.hero-visual img,.hero-visual:before,.atelier-motion *{animation:none!important}.atelier-motion{display:none}.hero-visual:before{display:none}}


/* Readability refresh applied */

/* A wider workspace portrait and comfortable reading at every breakpoint. */
.hero{grid-template-columns:minmax(0,.85fr) minmax(0,1.35fr);gap:32px;padding:36px 0 40px}
.hero-visual{height:auto;aspect-ratio:1.8;min-height:340px;border-top-right-radius:58px}
.hero-visual img{object-position:58% center;transform-origin:62% 48%}
.hero .hero-copy>p{font-size:17px;line-height:1.95;color:#5e7056}
.hero .hero-note{font-size:14px;color:#657b58;letter-spacing:0}
.hero .hero-kicker{font-size:11px;letter-spacing:1.4px}
.motion-paper,.motion-orbit{display:none}
.hero-visual:before{opacity:.2;mix-blend-mode:soft-light}
.mode-card{min-height:132px;padding:22px 17px;gap:12px}
.mode-card strong{font-size:19px;line-height:1.5}
.mode-card>span>span{display:block;font-size:14px;line-height:1.7;color:#5f7454;white-space:normal}
.mode-card small{font-size:11px;letter-spacing:1px}
.mode-card>em{font-size:10px}
.benefits p,.under-work p{font-size:15px;color:#637757;line-height:1.85}
.benefits h3{font-size:18px}
.source-item{padding:12px 9px}.source-item strong{font-size:14px}
.tools{gap:2px;flex-wrap:wrap}.tools button{padding:8px 7px;font-size:13px}
.field input,.field select{height:46px;font-size:16px}.filename-input input{height:44px}
.button{min-height:42px}.editor-layout{grid-template-columns:215px minmax(0,1fr)}
@media(max-width:1000px){.hero{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:24px}.hero-visual{min-height:310px;aspect-ratio:1.6}.hero h1{font-size:33px}.hero .hero-copy>p{font-size:16px}.mode-card strong{font-size:18px}.editor-layout{grid-template-columns:185px minmax(0,1fr)}}
@media(max-width:750px){.hero{grid-template-columns:1fr;text-align:left;gap:25px}.hero .hero-kicker,.hero .hero-note{justify-content:flex-start}.hero h1{font-size:36px;line-height:1.5}.hero-visual{min-height:0;aspect-ratio:1.75}.hero .hero-copy>p{font-size:16px}.hero .hero-note{font-size:13px;margin-top:16px}.hero .hero-kicker{font-size:10px}.hero-visual figcaption{font-size:10px;letter-spacing:.6px}.hero-motion-toggle{font-size:12px}.editor-layout{grid-template-columns:minmax(0,1fr)}.source-panel{border-right:0}.mode-card{min-height:134px;align-items:center;padding:20px 13px;gap:10px}.mode-card strong{font-size:17px}.mode-card>span>span{display:block;font-size:13px;line-height:1.6}.mode-card .mode-art{flex-shrink:0;width:28px}.mode-card small{display:none}.benefits p{font-size:15px}.hero-visual figcaption{left:12px;bottom:12px;padding:8px}.hero-motion-toggle{right:12px;bottom:12px}}
@media(max-width:400px){.mode-card .mode-art{display:none}.mode-card strong{white-space:normal;font-size:17px}.hero h1{font-size:32px}.hero-visual{aspect-ratio:1.55}.hero-visual figcaption{font-size:8px}.hero-motion-toggle{font-size:11px}}

/* Champagne starlight: slow ribbons, drifting bokeh and soft four-point stars. */
.drop h3{font-family:inherit;font-weight:600;letter-spacing:-.3px;color:#3d593d}
.atelier-motion{z-index:2;overflow:hidden;mix-blend-mode:screen}
.hero-visual:before{display:none}
.hero-visual figcaption{z-index:3}
.shimmer-star{position:absolute;left:var(--x);top:var(--y);width:var(--size,18px);height:var(--size,18px);opacity:0;filter:drop-shadow(0 0 6px #fff2c6);animation:starlight-bloom var(--duration,7s) ease-in-out var(--delay,0s) infinite;will-change:transform,opacity}
.shimmer-star:before,.shimmer-star:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent,#fffbed 48%,#fffbed 52%,transparent);clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%)}
.shimmer-star:after{transform:rotate(45deg) scale(.48);opacity:.65}
.star-0{--x:9%;--y:20%;--size:22px;--delay:-2s}.star-1{--x:28%;--y:12%;--size:14px;--delay:-5s;--duration:9s}.star-2{--x:85%;--y:17%;--size:23px;--delay:-4s;--duration:8s}.star-3{--x:93%;--y:47%;--size:17px;--delay:-1s}.star-4{--x:79%;--y:76%;--size:26px;--delay:-6s;--duration:10s}.star-5{--x:41%;--y:82%;--size:15px;--delay:-3s;--duration:8s}.star-6{--x:16%;--y:64%;--size:19px;--delay:-7s;--duration:11s}.star-7{--x:50%;--y:9%;--size:12px;--delay:-4s;--duration:12s}.star-8{--x:7%;--y:88%;--size:12px;--delay:-1s;--duration:9s}
.shimmer-bokeh{position:absolute;left:var(--x);top:var(--y);width:var(--size,35px);height:var(--size,35px);border-radius:50%;background:radial-gradient(circle,#fff7d8a0 0,#ffe5c342 35%,#fff0dc00 70%);opacity:0;animation:bokeh-rise var(--duration,13s) ease-in-out var(--delay,0s) infinite;will-change:transform,opacity}
.bokeh-0{--x:5%;--y:62%;--size:40px;--delay:-4s}.bokeh-1{--x:24%;--y:83%;--size:22px;--delay:-9s;--duration:16s}.bokeh-2{--x:88%;--y:70%;--size:45px;--delay:-7s;--duration:14s}.bokeh-3{--x:76%;--y:30%;--size:28px;--delay:-2s;--duration:17s}.bokeh-4{--x:40%;--y:27%;--size:20px;--delay:-11s;--duration:18s}.bokeh-5{--x:95%;--y:91%;--size:32px;--delay:-6s;--duration:15s}
.shimmer-ribbon{position:absolute;inset:-40%;background:linear-gradient(115deg,transparent 40%,#ffe9cd10 47%,#fff8e638 50%,#ffe9cd0d 53%,transparent 60%);filter:blur(8px);animation:silk-light 18s ease-in-out infinite;opacity:.3}
@keyframes starlight-bloom{0%,100%{opacity:0;transform:translateY(9px) rotate(-12deg) scale(.3)}35%{opacity:.22}50%{opacity:.85;transform:translateY(0) rotate(0) scale(1)}65%{opacity:.25}85%{opacity:0;transform:translateY(-9px) rotate(12deg) scale(.4)}}
@keyframes bokeh-rise{0%,100%{opacity:0;transform:translate(0,18px) scale(.65)}35%{opacity:.5}65%{opacity:.3}85%{opacity:0;transform:translate(14px,-48px) scale(1.15)}}
@keyframes silk-light{0%,100%{opacity:.1;transform:translateX(-18%)}50%{opacity:.65;transform:translateX(18%)}}
@media(max-width:650px){.shimmer-star{width:calc(var(--size,18px)*.8);height:calc(var(--size,18px)*.8)}}
@media(prefers-reduced-motion:reduce){.atelier-motion{display:none}}