@import "../paper.css";
@font-face{font-family:Hanken;src:url('/fonts/hanken-grotesk-latin-wght-normal.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
:root{color-scheme:light;--signature-yellow:#f4c542;--ink:#202526;--action:#202526;--action-hover:#373d3e;--muted:#52616b;--paper:#f7f9fa;--teal:#005b60;--line:#d9e0e4;--dark:#101719;--dark-muted:#b6c7cb;--device-width:330px;--stage-height:100svh}
*{box-sizing:border-box}html{scroll-behavior:smooth;scrollbar-color:#8a9c9e var(--paper)}body{margin:0;background:var(--paper);color:var(--ink);font-family:Hanken,system-ui,sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}::selection{background:#b5dedb;color:#102f31}a{color:inherit;text-underline-offset:5px}a:focus-visible{outline:3px solid #147d70;outline-offset:6px;border-radius:4px}img{display:block;max-width:100%;height:auto}figure,p,h1,h2,h3{margin:0}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}h1,h2{font-weight:560;letter-spacing:-.035em;line-height:1.04;text-wrap:balance}h1{font-size:clamp(48px,6vw,88px)}h2{font-size:clamp(36px,4.5vw,64px)}h1 span,h2 span{color:var(--muted)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.skip-link{position:fixed;left:16px;top:16px;padding:12px 24px;z-index:20;background:white;transform:translateY(-200%)}.skip-link:focus{transform:none}.site-header{max-width:1280px;margin:auto;padding:24px 40px;display:flex;align-items:center;justify-content:space-between}.wordmark{font-size:25px;font-weight:750;letter-spacing:-.04em;text-decoration:none;white-space:nowrap}.wordmark span{color:var(--teal)}nav{display:flex;gap:32px}nav a{font-size:14px;text-decoration:none;padding:12px 0}nav a:hover{text-decoration:underline}.button{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:52px;padding:12px 24px;border-radius:28px;background:var(--action);color:white;font-size:17px;font-weight:600;text-decoration:none;transition:background .2s,transform .2s}.button:hover{background:var(--action-hover);transform:translateY(-2px)}.button:active{transform:translateY(0)}.cta-note{display:block;font-size:13px;color:var(--muted);margin-top:12px}.hero{max-width:1280px;margin:auto;padding:64px 40px 32px;display:grid;grid-template-columns:1fr 1fr;column-gap:32px;align-items:center}.hero-copy>p{font-size:20px;line-height:1.5;margin:24px 0 32px;max-width:39ch;color:var(--muted)}.hero-art{position:relative;height:560px;margin:0 24px}.hero-art img{width:100%;border-radius:12px}.hero-art figure{position:absolute;box-shadow:0 20px 60px #13252a18;background:white;padding:8px 8px 0;border-radius:16px}.hero-art figcaption{font-size:13px;padding:12px 0;text-align:center;color:var(--muted)}.hero-portrait{width:72%;right:0;top:0;transform:rotate(5deg);z-index:1}.hero-original{width:47%;left:0;bottom:40px;transform:rotate(-7deg);z-index:2}.scroll-invitation{grid-column:1/-1;margin:40px auto 0;display:flex;align-items:center;gap:12px;font-size:14px;color:var(--muted);text-decoration:none;min-height:48px}.scroll-invitation svg{width:18px}.scroll-invitation:hover{color:var(--teal)}
/* The unenhanced document remains a readable four-part story. */
.story{background:var(--dark);color:#f3f7f8;position:relative;scroll-margin-top:0}.story-stage{display:none}.static-story{max-width:1100px;margin:auto;padding:64px 40px;display:grid;grid-template-columns:1fr 1fr;gap:64px}.static-story article h2{font-size:32px}.static-story article p{margin:24px 0;color:var(--dark-muted);max-width:45ch}.static-story img{width:100%;max-width:320px;max-height:400px;object-fit:cover;border-radius:12px}.story-enabled .story{height:calc(var(--stage-height) + 380svh)}.story-enabled .story-stage{display:grid;height:var(--stage-height);position:sticky;top:0;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;max-width:1280px;padding:48px 64px 80px;margin:auto;overflow:hidden}.story-enabled .static-story{display:none}.story-copy{position:relative;height:240px;align-self:center}.scene-copy{position:absolute;inset:0;opacity:0;transform:translateY(24px)}.scene-copy.is-current{opacity:1;transform:none}.scene-copy h2{font-size:clamp(40px,4.8vw,64px);line-height:1.1}.scene-copy h2 span{color:var(--dark-muted)}.scene-copy p{font-size:18px;line-height:1.55;color:var(--dark-muted);margin-top:24px}.scene-copy strong{font-weight:500;color:#f3f7f8}.device-wrap{display:flex;justify-content:center;align-items:flex-start;align-self:center;position:relative}.phone{width:var(--device-width);height:676px;flex-shrink:0;padding:7px;border-radius:49px;background:#818c90;box-shadow:0 24px 70px #0008,inset 0 0 0 2px #b7bfc2,inset 0 0 0 5px #3d4548;position:relative}.phone::before,.phone::after{content:'';position:absolute;background:#6a7579;width:3px;border-radius:2px;left:-2px;top:132px;height:43px}.phone::after{top:192px;height:60px}.phone-screen{height:100%;background:#fff;color:#1b2226;border-radius:42px;overflow:hidden;position:relative;font-family:Hanken,system-ui,sans-serif;font-size:14px;line-height:1.4}.phone-status{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;font-size:12px;font-weight:650;position:relative;z-index:4;background:#fff}.phone-status>svg{width:42px;height:16px;stroke-width:1.6}.island{position:absolute;left:50%;top:11px;transform:translateX(-50%);background:#090b0b;width:90px;height:25px;border-radius:18px}.chat-header{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid #e8ecee;font-weight:650;font-size:16px}.chat-header>span{display:flex;gap:4px;align-items:center}.chat-header span svg{width:16px;height:16px}.chat-header>svg{width:19px;height:19px}.chat-content{position:absolute;top:108px;bottom:76px;left:16px;right:16px;overflow:hidden}.phone-scene{position:absolute;inset:0;opacity:0;transform:translateY(28px)}.phone-scene.is-current{opacity:1;transform:none}.phone h3{font-size:20px;letter-spacing:-.025em;line-height:1.25;font-weight:650;margin:12px 0 8px}.screen-note{font-size:12px;color:#58656c;margin:8px 0;line-height:1.5}.user-message{width:fit-content;max-width:92%;margin:4px 0 24px auto;padding:10px 14px;background:#eff2f3;border-radius:18px 18px 4px 18px;font-size:13px}.plugin-name{display:flex;align-items:center;gap:8px;font-weight:650;font-size:13px;margin:12px 0}.plugin-dot{background:#e1eeeb;color:#22554d;width:24px;height:24px;display:inline-grid;place-items:center;border-radius:8px;font-size:12px;font-weight:700}.style-gallery{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}.style-tile img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:10px}.style-tile strong{display:block;font-size:14px;margin:8px 0}.mock-link{display:flex;align-items:center;justify-content:space-between;font-size:10px;font-weight:600;border-top:1px solid #e0e7e8;padding:8px 0;color:#005b60}.mock-link svg{width:12px;height:12px}.gallery-view,.detail-view{position:absolute;inset:0}.detail-view{opacity:0;transform:translateY(30px);background:#fff}.style-example{height:230px;width:100%;object-fit:contain;border-radius:12px}.example-label{font-size:11px;color:#58656c;margin:8px 0 12px;text-align:center}.mock-button{display:block;padding:12px 8px;background:var(--action);color:white;border-radius:12px;text-align:center;font-size:13px;font-weight:600}.centered{text-align:center}.assistant-text{font-size:14px;line-height:1.5;margin:8px 0}.upload-message{display:flex;justify-content:flex-end;margin:20px 0}.upload-message img{width:175px;height:210px;object-fit:cover;border-radius:16px}.mock-message-button{display:flex;align-items:center;justify-content:space-between;width:fit-content;gap:12px;border:1px solid #b3bfc4;border-radius:22px;padding:10px 14px;margin-top:12px;font-size:13px}.mock-message-button svg{width:16px;height:16px}.create-sent{margin-bottom:20px}.result-image{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:12px}.result-tools{display:flex;gap:20px;color:#626e74;padding:16px 4px}.result-tools svg{width:17px;height:17px}.chat-composer{position:absolute;bottom:28px;left:12px;right:12px;display:flex;align-items:center;gap:10px;background:#f3f5f6;padding:12px 10px;border-radius:24px;color:#657279;font-size:13px}.chat-composer>span{flex:1}.chat-composer svg{width:19px;height:19px}.home-indicator{position:absolute;width:110px;height:4px;background:#151b1d;border-radius:4px;bottom:9px;left:50%;transform:translateX(-50%);z-index:7}.mini-frame{width:154px;padding:7px;background:#171a1b;margin:16px auto 20px;box-shadow:0 8px 20px #17222222}.mini-frame img{border:8px solid #fff}.print-chat-view h3{font-size:19px}.print-chat-view .mock-button{margin-top:16px}.order-view{position:absolute;inset:48px 0 0;background:#f7f9fa;opacity:0;transform:translateY(40px);z-index:5}.browser-bar{background:#e7edef;display:flex;align-items:center;justify-content:center;gap:6px;height:40px;font-size:12px;color:#42545c}.browser-bar svg{width:12px;height:12px}.order-content{padding:16px}.order-brand{font-size:15px;font-weight:700;letter-spacing:-.03em;margin-bottom:16px}.order-content h3{text-align:center;margin:8px 0;font-size:23px}.order-frame{background:#151a1c;padding:6px;width:142px;margin:16px auto}.order-frame img{border:7px solid white}.order-label{font-size:13px;font-weight:650;margin:16px 0 8px}.mock-sizes{display:flex;gap:8px}.mock-sizes span{border:1px solid #c4d0d4;border-radius:8px;padding:10px;flex:1;text-align:center;font-size:13px}.mock-sizes .selected{border-color:var(--teal);background:#e3efee;color:#004e53}.order-content .mock-button{margin-top:16px}.story-footer{position:absolute;bottom:24px;left:64px;right:64px;display:flex;align-items:center;gap:24px}.story-progress{display:flex;gap:24px;color:#91a6ad;font-size:13px}.story-progress span{position:relative;padding:12px 0}.story-progress span::after{content:'';position:absolute;height:2px;bottom:0;left:0;right:0;background:currentColor;opacity:.3}.story-progress .is-current{color:#d7f4ef}.story-progress .is-current::after{opacity:1}.demo-label{font-size:11px;color:#91a6ad;margin-left:auto}.skip-story{font-size:12px;display:flex;align-items:center;gap:8px;color:#b6c7cb;min-height:44px;text-decoration:none}.skip-story:hover{text-decoration:underline}.skip-story svg{width:14px;height:14px}.story a:focus-visible{outline-color:#b5e7df}
.print-finish{padding-top:96px;background:#fff;text-align:center}.print-copy{padding:0 24px 48px;max-width:1000px;margin:auto}.print-copy p,.closing p{font-size:20px;color:var(--muted);margin:24px auto 0;max-width:56ch}.print-photo{max-width:1280px;margin:0 auto}.print-photo>img{width:100%;max-height:800px;object-fit:cover}.print-photo figcaption{font-size:12px;color:var(--muted);padding:16px 24px}.closing{padding:80px 24px 96px}.closing h2{font-size:clamp(40px,5vw,64px)}.closing .button{margin-top:32px}.site-footer{padding:32px 40px;max-width:1280px;margin:auto;display:flex;align-items:center;gap:32px;color:var(--muted)}.site-footer .wordmark{color:var(--ink)}.site-footer p{font-size:14px}.site-footer>span{margin-left:auto;font-size:11px}
@media(min-width:761px) and (max-height:780px){.story-enabled .story-stage{padding-top:24px;padding-bottom:64px}.device-wrap{align-self:start}.phone{height:650px;--device-width:316px}}
@media(max-width:1000px) and (min-width:761px){.hero{padding-top:40px}.hero-art{height:460px;margin:0}.hero-original{bottom:32px}.hero h1{font-size:60px}.story-enabled .story-stage{padding-left:40px;padding-right:40px}.story-copy h2{font-size:42px}.story-footer{left:40px;right:40px}.demo-label{display:none}}
@media(max-width:760px){:root{--device-width:min(322px,calc(100vw - 48px))}.site-header{padding:16px 24px}.wordmark{font-size:23px}nav{gap:20px}nav a{font-size:12px}nav a:last-child{display:none}.hero{display:flex;flex-direction:column;padding:40px 24px 24px;text-align:center;gap:0}.hero h1{font-size:clamp(44px,11.5vw,64px)}.hero-copy>p{font-size:17px;margin:24px auto;max-width:34ch}.hero-copy .button{min-height:50px}.cta-note{font-size:12px;max-width:29ch;margin:12px auto 0}.hero-art{width:min(100%,420px);height:440px;margin:40px 0 0}.hero-portrait{width:72%;right:4%;top:0}.hero-original{width:44%;left:2%;bottom:32px}.hero-art figcaption{font-size:11px;padding:8px 0}.hero-art figure{padding:6px 6px 0;border-radius:12px}.hero-art img{border-radius:8px}.scroll-invitation{margin:8px auto 0;font-size:13px}.story-enabled .story{height:calc(var(--stage-height) + 340svh)}.story-enabled .story-stage{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:0;max-width:none}.story-copy{width:100%;height:148px;flex-shrink:0;align-self:auto;text-align:center;margin-top:28px;z-index:8}.scene-copy{padding:0 24px}.scene-copy h2{font-size:32px;line-height:1.08}.scene-copy p{font-size:14px;margin-top:16px;line-height:1.5}.device-wrap{align-self:auto;flex-shrink:0;margin-top:12px}.phone{height:654px;border-radius:47px;padding:7px}.phone-screen{border-radius:40px}.story-footer{left:0;right:0;bottom:0;min-height:68px;background:var(--dark);padding:8px 16px;gap:8px;justify-content:space-between;z-index:10;box-shadow:0 -12px 24px #10171944;flex-wrap:wrap}.story-progress{gap:16px;font-size:11px}.story-progress span{padding:8px 0}.demo-label{display:none}.skip-story{font-size:10px;gap:4px;min-height:40px}.skip-story svg{width:12px}.phone .style-example{height:206px}.style-gallery{gap:8px}.phone .style-tile img{aspect-ratio:3/4}.chat-content{bottom:76px}.static-story{display:block;padding:48px 24px}.static-story article+article{margin-top:64px}.static-story article h2{font-size:32px}.static-story img{width:100%;max-height:400px;object-fit:contain;margin:auto}.print-finish{padding-top:64px}.print-copy{padding:0 24px 32px}.print-copy h2{font-size:36px}.print-copy p,.closing p{font-size:17px;margin-top:24px}.print-copy p br{display:none}.print-photo>img{aspect-ratio:1/1;object-fit:cover;object-position:62% center}.print-photo figcaption{font-size:11px}.closing{padding:56px 24px 64px}.closing h2{font-size:38px}.site-footer{padding:24px;flex-wrap:wrap;gap:12px 24px;justify-content:space-between}.site-footer p{font-size:12px}.site-footer>span{width:100%;margin-left:0;font-size:10px}.site-footer .wordmark{font-size:22px}}
@media(max-width:360px){.hero-art{height:370px}.hero-original{bottom:24px}.hero h1{font-size:42px}.hero-copy>p{font-size:16px}.story-progress{gap:12px;font-size:10px}.skip-story{font-size:9px}.story-copy{height:122px}.scene-copy h2{font-size:27px}.screen-note{font-size:11px}.mock-link{font-size:9px}.phone-status{padding:0 20px}.island{width:78px}}
/* Keep the demo labeled and its content readable when only part of the hardware fits. */
@media(max-width:760px){.story-footer{min-height:48px;flex-wrap:nowrap;padding:0 20px;box-shadow:none}.story-progress{display:none}.demo-label{display:block;margin:0;font-size:11px}.skip-story{font-size:12px;min-height:48px;gap:8px}.skip-long{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.story-enabled .story{height:auto}.story-enabled .story-stage{display:none}.story-enabled .static-story{display:grid}.button:hover{transform:none}@media(max-width:760px){.story-enabled .static-story{display:block}}}

/* Official mark identifies the CTA destination, separate from ImagiTails branding. */
.button .chatgpt-mark{width:24px;height:24px;flex:none;object-fit:contain}.site-footer{flex-wrap:wrap}.brand-attribution{flex-basis:100%;font-size:11px;line-height:1.5;text-align:left}

/* PF-55: clearer host/widget separation and readable conversation. */
.button{gap:6px}.button .chatgpt-mark{width:36px;height:36px;margin-left:-4px}
.phone-status{padding:0 20px}.phone-status>.status-icons{width:64px;height:18px;flex:none}.island{width:78px}
.chat-header{border-bottom:0}.chat-header>span{gap:6px}.chat-content{left:12px;right:12px}
.user-message{font-size:16px;line-height:1.45;padding:12px 16px;margin-bottom:16px;background:#f1f1f1;max-width:95%}
.plugin-panel{border:1px solid #dce2e5;border-radius:16px;padding:12px;background:#fff;overflow:hidden}.plugin-panel .plugin-name{margin:0 0 12px}.widget-menu{margin-left:auto;font-size:20px}.plugin-panel h3{font-size:18px;margin-top:8px}.gallery-view .screen-note{margin-bottom:12px}
.gallery-window{overflow:hidden;margin-right:-12px}.style-gallery{display:flex;gap:12px;width:max-content;margin:0;will-change:transform}.style-tile{width:142px;flex:none}.style-tile img{height:174px;aspect-ratio:auto;object-fit:cover}.style-tile strong{font-size:14px}.mock-link{font-size:11px}
.detail-view.plugin-panel{bottom:auto}.detail-view .style-example{height:190px}.print-widget .mini-frame{margin-top:4px}.print-widget h3{margin-top:8px}
.chat-composer{border:1px solid #e6e8e9;background:#fafafa;border-radius:26px;min-height:50px}.result-tools{gap:24px}

.widget-menu{width:20px;height:20px;flex:none}.gallery-window{margin-left:-2px;padding-left:2px}.detail-view .plugin-name{display:flex!important}


/* Preserve the silhouette; fit complete hardware or deliberately crop its lower shell. */
@media(max-width:760px){
  .story-enabled .story-stage{padding:16px 0 0;gap:12px}
  .story-copy{height:116px;margin:0}
  .scene-copy h2{font-size:28px;line-height:1.08}
  .scene-copy p{font-size:14px;line-height:1.45;margin-top:12px}
  .device-wrap{margin:0;min-height:0;flex:1;width:100%;padding:0 24px;overflow:hidden;container-type:size}
  .phone{width:322px;height:auto;aspect-ratio:330/676;max-height:none;transform:scale(var(--phone-scale,1));transform-origin:top center;--phone-view-height:606px}
  .story-footer{position:relative;flex:none;width:100%;min-height:44px;padding:0 20px}
  .skip-story{min-height:44px}
  .phone-status{height:38px;padding:0 18px}
  .phone-status>.status-icons{width:60px}
  .island{top:8px;width:70px;height:22px}
  .chat-header{height:40px}
  .chat-content{top:88px;bottom:auto;height:448px}
  .chat-composer{top:542px;bottom:auto;min-height:42px;padding:8px 10px;font-size:13px;gap:8px}
  .chat-composer svg{width:18px;height:18px}
  .user-message{font-size:15px;padding:10px 12px;margin:0 0 12px auto}
  .gallery-view .plugin-panel{padding:12px}
  .gallery-view .plugin-panel h3,.gallery-view .plugin-panel>.screen-note{display:none}
  .gallery-view .plugin-name{margin-bottom:10px}
  .style-tile{width:142px}
  .style-tile img{height:148px;max-height:none}
  .style-tile strong{margin:6px 0}
  .detail-view.plugin-panel{padding:12px}
  .detail-view .plugin-name{margin-bottom:8px}
  .detail-view h3{margin:6px 0}
  .detail-view>.screen-note{display:none}
  .phone .style-example{height:130px}
  .detail-view .example-label{margin:6px 0 8px}

  .upload-message{margin:12px 0}
  .upload-message img{width:112px;height:140px}
  .assistant-text{font-size:14px}
  .result-reveal{height:calc(100% - 58px);display:flex;flex-direction:column;align-items:flex-start}
  .result-image{height:calc(100% - 34px);width:auto;max-width:100%;aspect-ratio:960/1199;object-fit:contain;background:none}
  .result-tools{padding:10px 2px;gap:20px}

  .print-widget .mini-frame{width:94px;margin:0 auto 8px}
  .print-widget h3{font-size:17px;margin:6px 0}
  .print-widget>.screen-note{display:none}
  .print-widget .mock-button{margin-top:12px}
  .order-view{top:38px}
  .browser-bar{height:32px}
  .order-content{padding:12px 16px}
  .order-brand,.order-content>.screen-note.centered{display:none}
  .order-content h3{font-size:21px;margin:4px 0 12px}
  .order-frame{width:110px;margin:12px auto}
  .order-label{margin:12px 0 8px}
  .order-content .mock-button{margin-top:12px}
}
@media(max-width:760px) and (min-height:800px){
  .story-copy{height:132px}.scene-copy h2{font-size:32px}
  .phone .style-example{height:180px}
  .style-tile img{height:174px}
  .upload-message img{width:144px;height:180px}
  .print-widget .mini-frame{width:130px}
  .order-frame{width:142px}
}
/* Captions stay full size while the entire phone illustration scales together. */
@media(max-width:760px) and (max-height:699px){
  .story-copy{height:100px}
  .scene-copy h2{font-size:24px}
  .scene-copy p{margin-top:8px;font-size:13px}
}

/* Illustrative app opening; scrolling, never a timer, reveals the gallery. */
.app-opening{position:absolute;inset:48px 0 0;z-index:6;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 24px 80px;gap:8px}
.opening-mark{width:112px;height:112px;filter:invert(1)}
.opening-identity{display:flex;flex-direction:column;align-items:center;gap:8px}
.opening-identity>span{font-size:24px;font-weight:650;letter-spacing:-.03em}
.app-opening.is-active .opening-mark{animation:opening-pulse 1.6s ease-in-out 3}
@keyframes opening-pulse{0%,100%{opacity:1}50%{opacity:.45}}
@media(max-width:760px){.app-opening{inset:38px 0 0;height:auto;padding-bottom:48px}}
@media(prefers-reduced-motion:reduce){.app-opening.is-active .opening-mark{animation:none}}

/* Keep generated artwork on the assistant side of the conversation. */
.assistant-identity{display:flex;align-items:center;gap:6px;margin:0 0 10px;font-size:13px;font-weight:650}
.assistant-identity img{width:28px;height:28px;filter:invert(1);margin-left:-4px}
.result-image{width:78%;height:auto;max-height:310px;object-fit:contain;object-position:left top}
/* Distinct ImagiTails website, inside an illustrative browser sheet. */
.order-view{background:#f8f6f7}
.browser-bar{height:44px;padding:0 12px;justify-content:space-between;background:#e2dfd8;color:#303938;border-bottom:1px solid #d1cec7;gap:10px}
.browser-done{font-weight:650;font-size:12px}
.browser-address{display:flex;align-items:center;gap:5px;font-size:11px}
.browser-bar>svg{width:18px;height:18px}
.order-brand{display:block;font-size:16px;text-align:left;margin:0 0 14px}
.order-content .mock-sizes span{background:#faf8f4}
.order-content .mock-sizes .selected{background:#dce8e3}
@media(max-width:760px){
  .result-reveal{height:calc(100% - 96px)}
  .result-image{width:78%;height:auto;max-width:78%;max-height:310px;flex:none}
  .browser-bar{height:40px}
  .order-brand{display:block;font-size:14px;margin:0 0 8px}
  .order-content h3{font-size:20px;margin:4px 0 8px}
  .order-frame{width:100px;margin:8px auto}
}
@media(max-width:760px) and (min-height:640px) and (max-height:699px){
  .order-brand{margin-bottom:4px}
  .order-frame{width:70px;margin:6px auto}
  .order-label{margin:8px 0 6px}
  .order-content .mock-button{margin-top:8px}
}

/* A working, searchable catalog within the marketing page. */
.style-library{background:var(--paper);text-align:left;margin-top:32px;scroll-margin-top:24px}
.library-inner{max-width:1280px;margin:auto;padding:80px 40px}
.library-heading h2{font-size:clamp(36px,4.5vw,56px)}
.library-heading p{font-size:18px;line-height:1.5;color:var(--muted);margin-top:20px}
.library-controls{display:flex;gap:24px;margin:36px 0 20px}
.library-controls label{font-size:14px;font-weight:600;display:flex;flex-direction:column;gap:8px}
.library-search{flex:1}.library-category{width:300px}
.library-controls input,.library-controls select{font:400 16px/1.5 Hanken,system-ui,sans-serif;color:var(--ink);background:#fff;border:1px solid #bdc8cd;border-radius:12px;padding:14px 16px;min-height:52px;width:100%}
.library-controls input::placeholder{color:#5e6a70}
.library-status{font-size:14px;color:var(--muted);margin:0 0 24px;min-height:21px}
.library-grid{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:36px 24px;padding:0;margin:0}
.library-card{appearance:none;display:block;width:100%;padding:0;border:0;background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.library-card img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:12px;background:#e6ebed}
.library-card-name{display:block;font-size:18px;font-weight:600;line-height:1.3;margin-top:14px}
.library-card-action{display:block;font-size:14px;color:var(--muted);text-decoration:underline;text-underline-offset:4px;margin-top:8px}
.library-card:hover .library-card-action{color:var(--ink)}
.library-actions{display:flex;justify-content:center;gap:20px;margin-top:36px;flex-wrap:wrap}
.style-library button:not(.library-card){font:600 15px/1.5 Hanken,system-ui,sans-serif;cursor:pointer;color:var(--ink);min-height:48px;padding:12px 24px;border:1px solid #bdc8cd;border-radius:24px;background:transparent}
.style-library button:hover:not(.library-card){background:#e6ebed}
.style-library :is(button,input,select):focus-visible{outline:3px solid #147d70;outline-offset:5px}
.style-library [hidden]{display:none!important}
.library-detail{scroll-margin-top:24px}
.library-back{display:inline-flex;align-items:center;gap:8px;margin-bottom:32px}
.library-detail-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.library-detail-image{width:100%;max-width:440px;aspect-ratio:3/4;object-fit:contain;border-radius:12px;justify-self:center}
.library-detail-copy h2{font-size:clamp(32px,4vw,52px)}
.library-description{font-size:19px;line-height:1.5;color:var(--muted);margin-top:24px}
.library-handoff{font-size:15px;color:var(--muted);margin:28px 0 20px;max-width:40ch}
.style-library button.library-copy{display:block;background:transparent;border-radius:0;border:0;padding:12px 0;margin-top:8px;text-decoration:underline;text-underline-offset:4px}
.library-copy-status{min-height:24px;font-size:14px;color:var(--muted)}
@media(max-width:760px){
  .library-inner{padding:56px 24px}
  .library-heading p{font-size:16px;margin-top:16px}
  .library-heading p br{display:none}
  .library-controls{flex-direction:column;gap:16px;margin-top:28px}
  .library-category{width:100%}
  .library-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}
  .library-card-name{font-size:16px;margin-top:12px}
  .library-card-action{font-size:13px}
  .library-detail-layout{grid-template-columns:1fr;gap:28px}
  .library-detail-image{max-width:300px}
  .library-detail-copy h2{font-size:36px}
  .library-description{font-size:17px;margin-top:16px}
}

.style-library:not(.library-enabled) :is(.library-controls,.library-status,.library-actions){display:none}

/* Landing discovery rail; the full searchable catalog has its own route. */
.library-heading h1{font-size:clamp(36px,4.5vw,56px)}
.catalog-page .style-library{margin-top:0;min-height:75vh}
.library-card{text-decoration:none}
.library-carousel .library-grid{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:none;scroll-behavior:auto;padding:8px 8px 20px;scrollbar-color:transparent transparent;scrollbar-width:thin}
.library-carousel .library-grid>li{flex:0 0 180px;scroll-snap-align:none}
.library-carousel .library-heading{margin-bottom:28px}
.library-carousel .library-status:empty{display:none}
.library-carousel .library-actions{justify-content:flex-start;margin-top:28px}
.library-carousel .library-grid:focus-visible{outline:3px solid #147d70;outline-offset:4px}
.library-carousel:not(.library-enabled) .library-actions{display:flex}
.library-image{display:block;position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:12px;background:#e6ebed}
.library-image>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.library-image[data-state="loading"]>img,.library-image[data-state="error"]>img{opacity:0}
.library-image[data-state="loaded"][data-reveal="soft"]>img{animation:library-reveal .5s cubic-bezier(.16,1,.3,1) both}
.library-wait{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;opacity:0;animation:library-wait-in .25s ease-out .35s forwards}
.library-spinner{position:relative;display:block;width:28px;height:28px;color:var(--action);animation:library-spin .9s steps(10) infinite}
.library-spinner i{position:absolute;inset:0;transform:rotate(calc(var(--i) * -36deg))}
.library-spinner i::before{content:"";position:absolute;left:50%;top:3%;width:max(9%,1.5px);height:calc(27% - var(--i) * 1.3%);transform:translateX(-50%);border-radius:999px;background:currentColor;opacity:calc(1 - var(--i) * .092)}
.library-image-error{position:absolute;inset:0;display:grid;place-items:center;padding:16px;color:var(--muted);font-size:14px;text-align:center}
.library-detail-image>img{object-fit:contain}
@keyframes library-spin{to{transform:rotate(360deg)}}
@keyframes library-wait-in{to{opacity:1}}
@keyframes library-reveal{from{opacity:0;filter:blur(12px)}}
@media(max-width:760px){
 .library-carousel .library-grid{gap:16px;margin-right:-24px;padding-right:24px}
 .library-carousel .library-grid>li{flex-basis:148px}
}
@media(prefers-reduced-motion:reduce){.library-wait{opacity:1}.library-image[data-state="loaded"]>img{opacity:1;filter:none}}

/* Matched before/after pairs change together, without moving either frame. */
.hero-picture-stack{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:12px}
:is(.hero-art,.library-pair) .hero-picture-stack img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:none}
:is(.hero-art,.library-pair) .hero-picture-stack img.is-current{opacity:1}
.hero-art{margin-bottom:56px}
.hero-style-controls{position:absolute;bottom:-48px;left:0;right:0;display:flex;justify-content:center;align-items:center;gap:4px}
.hero-style-controls[hidden],.hero-style-controls [hidden]{display:none}
.hero-style-controls button{font:500 13px/1.4 Hanken,system-ui,sans-serif;color:var(--muted);border:0;background:transparent;padding:10px 12px;min-height:44px;border-radius:24px;cursor:pointer}
.hero-style-controls button[aria-pressed="true"]{color:white;background:var(--action)}
.hero-style-controls button:hover:not([aria-pressed="true"]){background:#e6ebed;color:var(--ink)}
.hero-style-controls button:focus-visible{outline:3px solid #147d70;outline-offset:3px}
.hero-style-controls button:disabled{opacity:.5;cursor:default}
@media(max-width:760px){.hero-art{margin-bottom:56px}.hero-style-controls{bottom:-44px}.hero-style-controls button{padding:10px}}
@media(prefers-reduced-motion:reduce){.hero-art .hero-picture-stack img{transition:none}}
.hero-picture-stack img[hidden]{display:none}

/* Quiet pair navigation: labels stay on their own exposed card edges. */
.hero-art .hero-original figcaption{text-align:left;padding-left:8px}
.hero-art .hero-portrait figcaption{text-align:right;padding-right:8px;visibility:visible}
.hero-art .hero-picture-stack{touch-action:pan-y pinch-zoom;transform:translateX(var(--hero-drag,0px));transition:transform .18s ease-out}
.hero-art.is-dragging .hero-picture-stack{transition:none}
.hero-art .hero-picture-stack img{user-select:none;-webkit-user-drag:none}
.hero-style-controls{gap:0}
.hero-style-controls button{display:grid;place-items:center;width:24px;padding:0;background:transparent}
.hero-style-controls button[aria-pressed="true"]{background:transparent;color:var(--ink)}
.hero-style-controls button[data-example] span{width:4px;height:4px;border-radius:50%;background:#a0abad;transition:background .2s ease-out}
.hero-style-controls button[data-example][aria-pressed="true"] span{width:4px;background:#596970}
.hero-style-controls button svg{width:18px;height:18px}
@media(max-width:760px){.hero-art figcaption{font-size:12px}.hero-art .hero-original figcaption{padding-left:4px}.hero-art .hero-portrait figcaption{padding-right:6px}}
@media(prefers-reduced-motion:reduce){.hero-art .hero-picture-stack{transform:none;transition:none}.hero-style-controls button[data-example] span{transition:none}}

.hero-art{touch-action:pan-y pinch-zoom;user-select:none}
/* Keep wheel targeting on the stationary art surface, outside animated masks. */
.hero-art>figure{pointer-events:none}

/* Small visible marks retain generous, separate touch targets. */
.hero-style-controls button:hover:not([aria-pressed="true"]){background:transparent}

.library-carousel .library-grid{touch-action:pan-x pan-y pinch-zoom;-webkit-overflow-scrolling:touch}
.library-carousel .library-grid.is-scrolling{scrollbar-color:#8b999d transparent}
.library-carousel .library-grid::-webkit-scrollbar{height:5px}
.library-carousel .library-grid::-webkit-scrollbar-thumb{background:transparent;border-radius:5px}
.library-carousel .library-grid.is-scrolling::-webkit-scrollbar-thumb{background:#8b999d}

@media (hover:hover) and (pointer:fine){
 .library-carousel .library-grid,.library-carousel .library-card{cursor:grab}
 .library-carousel .library-grid{user-select:none}
 .library-carousel .library-grid.is-dragging,.library-carousel .is-dragging .library-card{cursor:grabbing}
 .library-carousel .library-image img{-webkit-user-drag:none}
}

/* Quiet scene count: opening followed by the four story chapters. */
.scene-dots{position:absolute;left:20px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:12px;z-index:9;pointer-events:none}
.scene-dots span{width:4px;height:4px;border-radius:50%;background:#526064;transition:background .2s ease-out,box-shadow .2s ease-out}
.scene-dots span.is-complete{background:#8b999d}
.scene-dots span.is-current{background:#f2f5f5;box-shadow:0 0 0 2px #f2f5f51a}
@media(max-width:760px){.scene-dots{left:10px;top:55%;gap:11px}}

@media(min-width:761px) and (max-width:1000px){.style-library:not(.library-carousel) .library-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Memory-like dissolve: gentle depth, soft patches, source leading by 140ms. */
.hero-picture-stack img.is-leaving{animation:pair-leave 1.2s ease-out both}
.hero-picture-stack img.is-developing,.hero-picture-stack img.is-fading{animation:pair-arrive 1.2s cubic-bezier(.16,1,.3,1) both}
@keyframes pair-leave{0%{opacity:1;transform:scale(1);filter:blur(0)}30%,100%{opacity:0;transform:scale(.985);filter:blur(3px)}}
@keyframes pair-arrive{0%,45%{opacity:0;transform:scale(.985);filter:blur(3px)}100%{opacity:1;transform:scale(1);filter:blur(0)}}
.portrait-dot-reveal{position:absolute;inset:0;width:100%;height:100%;z-index:0;background:#fafbfc;opacity:0;pointer-events:none}
.portrait-dot-reveal.is-revealing{animation:dot-veil 1.2s linear both}
@keyframes dot-veil{0%{opacity:0}30%,45%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.hero-picture-stack img.is-developing,.hero-picture-stack img.is-fading,.hero-picture-stack img.is-leaving{animation:none}.portrait-dot-reveal{display:none}}

/* Exposed only between source photos, beneath the opaque images. */
.source-photo-placeholder{position:absolute;inset:0;display:grid;place-items:center;background:#edf1f2;color:#89979c}
.source-photo-placeholder svg{width:52px;height:52px}
/* Keep source and result above the dot surface: masks reveal the surface beneath,
   rather than an opaque veil hiding the result image’s gradual in/out patches. */
:is(.hero-original,.hero-portrait) .hero-picture-stack img{z-index:1}

/* Soft overlapping reveal islands, expanding through the incoming photographs. */
@property --photo-patch{syntax:'<percentage>';inherits:false;initial-value:0%}
.hero-picture-stack img.is-developing,.hero-picture-stack img.is-fading,.hero-picture-stack img.is-leaving{
 animation-name:pair-arrive,photo-patches;
 animation-timing-function:cubic-bezier(.25,.1,.25,1),cubic-bezier(.22,.65,.3,1);
 mask-image:radial-gradient(ellipse at 32% 30%,#000 max(0%,calc(var(--photo-patch) - 14%)),transparent var(--photo-patch)),radial-gradient(ellipse at 73% 64%,#000 max(0%,calc(var(--photo-patch) - 28%)),transparent max(0%,calc(var(--photo-patch) - 12%))),radial-gradient(ellipse at 20% 82%,#000 max(0%,calc(var(--photo-patch) - 40%)),transparent max(0%,calc(var(--photo-patch) - 22%)));
 mask-repeat:no-repeat;
 mask-composite:add;
}
@keyframes photo-patches{0%,45%{--photo-patch:0%}100%{--photo-patch:150%}}
.hero-picture-stack img.is-leaving{animation-name:pair-leave,photo-patches-leave;animation-timing-function:ease-in-out,ease-in-out}
@keyframes photo-patches-leave{0%{--photo-patch:150%}30%,100%{--photo-patch:0%}}
.hero-portrait img.is-developing,.hero-portrait img.is-leaving,.portrait-dot-reveal.is-revealing{animation-delay:140ms}
@media(prefers-reduced-motion:reduce){.hero-picture-stack img.is-developing,.hero-picture-stack img.is-fading,.hero-picture-stack img.is-leaving{animation:none;mask-image:none}}
/* Gift collection in the illustrative website handoff. */
.order-content .gift-lineup{width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;border-radius:12px;margin:12px 0}
.gift-formats{display:grid;grid-template-columns:1fr 1fr;gap:16px 12px;text-align:left;margin:12px 0 16px}
.gift-formats strong{display:block;font-size:13px;font-weight:650;line-height:1.35}
.gift-formats span{display:block;font-size:11px;line-height:1.4;color:#58656c;margin-top:4px}
.print-photo.gift-interior{max-width:1080px;padding:0 24px}
.print-photo.gift-interior>img{display:block;width:100%;height:auto;max-height:none;object-fit:contain;background:#fff}
@media(max-width:760px){.order-content .gift-lineup{max-height:calc(var(--phone-view-height,600px) * .3);margin:8px 0}.gift-formats{gap:12px;margin:8px 0}.order-content .gift-formats+.screen-note{margin:8px 0}}

/* Style detail shares the quiet, portrait-led marketing treatment. */
.detail-view.plugin-panel{padding:16px;border-color:#e2e5e6}
.detail-view .plugin-name{margin-bottom:16px}
.plugin-panel .plugin-dot{background:var(--signature-yellow);color:var(--ink)}
.detail-view h3{font-size:22px;line-height:1.15;letter-spacing:-.025em;margin:0 0 6px}
.detail-view>.screen-note{margin:0 0 16px;line-height:1.5}

.detail-view .example-label{margin:12px 0;font-size:11px}
.detail-view .mock-button{padding:14px 12px}
.detail-view>.screen-note:last-child{margin:12px 0 0;font-size:11px}
@media(max-width:760px){
  .detail-view.plugin-panel{padding:12px}
  .detail-view .plugin-name{margin-bottom:12px}
  .detail-view h3{font-size:20px;margin:0 0 8px}
  .detail-view .example-label{margin:10px 0}
  .detail-view>.screen-note:last-child{display:block;margin-top:10px}
}

/* Mirror the widget's labeled source/result pair; the source models a useful upload. */
.demo-portrait-pair{display:grid;grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr);gap:6px;align-items:start;margin:16px 0 12px}
.demo-portrait-pair figure{margin:0;min-width:0}
.demo-portrait-pair img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:contain;border-radius:10px;background:#f6f7f7}
.demo-portrait-pair figcaption{font-size:11px;line-height:1.4;margin-top:8px;text-align:center;color:#58656c}
.demo-portrait-pair figure:last-child figcaption{font-weight:600;color:var(--ink)}
.demo-portrait-pair>svg{width:18px;height:18px;margin-top:58px;fill:none;stroke:currentColor;stroke-width:1.6}
.detail-view .demo-photo-tip{font-size:12px;line-height:1.5;color:#58656c;margin:12px 0;text-align:left}
@media(max-width:760px){.demo-portrait-pair{margin-top:12px;gap:4px}}

/* Transparent product photography carries its own frame and natural shadow. */
.print-widget .print-product-preview{filter:drop-shadow(3px 7px 6px rgb(21 27 29 / .12));display:block;width:220px;max-width:100%;height:210px;object-fit:contain;margin:0 auto 12px}
@media(max-width:760px){.print-widget .print-product-preview{width:190px;height:180px;margin-bottom:8px}}

/* Keep the host identity close to its name in the opening caption. */
.opening-title-brand{display:inline;white-space:nowrap}
.opening-title-brand .opening-wordmark{display:inline-flex;align-items:center;gap:.075em;vertical-align:baseline}
.opening-wordmark-icon{display:block;width:.76em;height:.76em;flex:none;background:currentColor;mask:url("/landing/openai-blossom-tight.svg") center/contain no-repeat}
/* Distinguish the branded website from the surrounding ChatGPT conversation. */
.order-view .browser-bar{background:#ececec;border-bottom-color:#d8d8d8}
.order-view .browser-address{justify-content:center;flex:1;min-height:28px;padding:4px 8px;background:#fff;border:1px solid #dedede;border-radius:8px}
.order-view .order-brand{display:flex;align-items:center;justify-content:space-between;background:#253c36;color:#fff;margin:-16px -16px 18px;padding:14px 16px;font-size:20px;letter-spacing:-.035em}
.order-brand>svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5}
@media(max-width:760px){.order-view .order-brand{font-size:18px;padding:12px 16px;margin-bottom:14px}}
@media(max-width:760px) and (max-height:699px){.order-view .order-brand{padding-block:8px;margin-bottom:8px}}

/* Quiet product icons and consistent inset/row rhythm in the website demo. */
.order-content .gift-formats{gap:20px 16px;margin:18px 0;padding:0 2px}
.gift-formats>div{display:grid;grid-template-columns:18px minmax(0,1fr);column-gap:8px;align-content:start}
.gift-formats svg{grid-column:1;grid-row:1;width:18px;height:18px;fill:none;stroke:#253c36;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.gift-formats strong{grid-column:2;grid-row:1;font-size:12px;line-height:18px}
.gift-formats span{grid-column:2;margin-top:5px;line-height:1.5}
.order-content .gift-formats+.screen-note{margin:18px 0 16px}
@media(max-width:760px) and (max-height:799px){.order-content .gift-formats{gap:14px 12px;margin:12px 0}.order-content .gift-formats+.screen-note{margin:12px 0}}

/* Reserve the browser sheet's bottom safe area; artwork yields before the action. */
.order-view{display:flex;flex-direction:column;padding-bottom:28px}
.order-view .browser-bar{flex:none}
.order-view .order-content{flex:1;min-height:0;display:flex;flex-direction:column;padding:16px;overflow:auto}
.order-view .order-content>*{flex-shrink:0}
.order-view .order-brand{margin-bottom:12px}
.order-view .order-content .gift-lineup{flex-shrink:1;min-height:80px;max-height:160px;object-fit:contain;margin:8px 0}
.order-view .gift-formats{gap:14px 12px;margin:12px 0}
.order-view .gift-formats+.screen-note{margin:8px 0}
.order-view .order-content>.mock-button{margin-top:12px;margin-bottom:0}

/* Paint the website through the safe area; reserve the cropped content budget. */
@media(max-width:760px){
  .phone .order-view{bottom:0;padding-bottom:70px}
  .device-wrap[data-phone-fit="complete"] .chat-composer{top:auto;bottom:28px}
  .device-wrap[data-phone-fit="complete"] .order-view{padding-bottom:28px}
}

/* White watercolor paper in the opening and closing; clean white product/library sections. */
:root { --paper: #fff; }
body, .closing { background-color: #fff; background-image: var(--pf-paper-background); background-size: 512px 512px; }
@media (forced-colors: active) { body, .closing { background-image: none; } }

/* Distinguish the footer from the white paper above, with aligned full-width color. */
.site-footer { max-width: none; background-color: #fff; background-image: linear-gradient(#a5b1b833, #a5b1b833), var(--pf-paper-image); background-size: 512px 512px; padding-inline: max(40px, calc((100% - 1200px) / 2)); }
@media (max-width: 760px) { .site-footer { padding-inline: 24px; } }
/* The header's compact navigation rule must not hide legal links in the footer. */
.site-footer nav a:last-child { display: inline; }

@media (forced-colors: active) { .site-footer { background-image: none; } }

/* Detail pairs overlap like the hero, with an inward turn instead of a tilt. */
.library-pair{position:relative;display:block;width:100%;max-width:560px;aspect-ratio:1/1.08;perspective:1000px;background:transparent;overflow:visible}
.library-pair figure{position:absolute;min-width:0;background:white;padding:6px;border-radius:12px;box-shadow:0 24px 32px -12px #16232938,0 8px 16px -8px #16232924}
.library-pair .pair-original{width:45%;left:2%;bottom:4%;transform:rotateY(9deg);z-index:2}
.library-pair .hero-portrait{width:72%;right:2%;top:2%;transform:rotateY(-9deg);z-index:1}
.library-pair .hero-picture-stack{display:block;aspect-ratio:3/4;border-radius:8px}
.library-pair .hero-picture-stack img{width:100%;height:100%;object-fit:cover}
/* Same white surface, icon and animation rules as the homepage stacks. */
.library-pair .hero-picture-stack[data-state="loaded"]>img{opacity:1}
/* Hold both decoded pictures until the entrance classes are installed together. */
.library-pair[data-reveal-pending] .hero-picture-stack>img{visibility:hidden}
.library-pair .pair-original img{z-index:1}
.library-pair figure{transition:transform .35s ease,opacity .35s ease,filter .35s ease;transform-origin:center}
.library-pair figure:focus-visible{outline:3px solid #147d70;outline-offset:5px}
 .library-pair figure{cursor:pointer}
.library-pair[data-selected="hero-portrait"] .hero-portrait{transform:rotateY(0);z-index:3}
.library-pair[data-selected="hero-portrait"] .pair-original{opacity:.55;filter:blur(1.5px);transform:rotateY(9deg) scale(.96);z-index:1}
.library-pair[data-selected="pair-original"] .pair-original{transform:rotateY(0) scale(1.12);z-index:3}
.library-pair[data-selected="pair-original"] .hero-portrait{opacity:.55;filter:blur(1.5px)}
@media(max-width:760px){.library-pair{max-width:480px}}
@media(prefers-reduced-motion:reduce){.library-pair figure{transition:none}}
/* A quiet route to the full style library, below the matched hero pair. */
.hero-explore{position:absolute;top:calc(100% + 48px);left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;min-height:44px;white-space:nowrap;font-size:13px;color:var(--muted);text-decoration:underline;text-underline-offset:4px}
.hero-explore:hover{color:var(--ink)}
.hero-art{margin-bottom:100px}
@media(max-width:760px){.hero-explore{top:calc(100% + 44px)}.hero-art{margin-bottom:100px}}

/* Brush lettering is reserved for the two words that connect pet to art. */
@font-face{font-family:Yellowtail;src:url('/fonts/yellowtail-regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
.hero-copy{min-width:0}
.hero h1{font-size:clamp(3rem,5.6vw,5.25rem)}
.hero h1 .hero-brush{display:inline-block;font-family:Yellowtail,Hanken,sans-serif;font-weight:400;font-style:normal;font-size:1.3em;line-height:1;letter-spacing:0;padding-inline:.04em;margin-inline:-.02em;color:var(--ink);position:relative;isolation:isolate}
.hero h1 .hero-brush-art{color:var(--ink)}
.hero-brush::before{content:"";position:absolute;z-index:-1;inset:46% -.06em 8% -.04em;background:var(--signature-yellow);transform:rotate(-3deg);border-radius:45% 12% 35% 18% / 14% 24% 16% 22%}
.hero-brush-art::before{transform:rotate(-5deg)}
.hero h1 .hero-word{white-space:nowrap;color:inherit}
@media(prefers-reduced-motion:no-preference){
  .hero-brush{animation:hero-brush-reveal 750ms cubic-bezier(.16,1,.3,1) 100ms backwards}
  .hero-brush-art{animation-delay:350ms}
}
/* Clear the clip after the entrance so enlarged glyphs never remain masked. */
@keyframes hero-brush-reveal{from{clip-path:inset(-50% 105% -50% -25%)}to{clip-path:inset(-50% -25% -50% -25%)}}
@media(max-width:760px){.hero h1{font-size:clamp(2.75rem,11.5vw,4rem)}}
@media(max-width:360px){.hero h1{font-size:2.625rem}}
@media(forced-colors:active){.hero h1 .hero-brush{color:CanvasText}.hero-brush::before{display:none}}
html:not(.story-enabled) .hero-brush{animation:none}

/* Long, translucent wisps let the reference palette escape the picture edges. */
html:has(.library-detail:not([hidden])),body:has(.library-detail:not([hidden])){overflow-x:clip}
.style-library:has(.library-detail:not([hidden])){position:relative;overflow:visible}
.library-detail-image{position:relative;isolation:isolate}
.portrait-cloud{position:absolute;inset:0 -24% 3% -28%;z-index:-1;pointer-events:none;opacity:0;--cloud-edge-x:linear-gradient(90deg,#000 82%,transparent);--cloud-edge-y:linear-gradient(180deg,transparent,#000 16%,#000 80%,transparent);mask-image:url('/landing/watercolor-front.png'),var(--cloud-edge-x),var(--cloud-edge-y);mask-size:300% 100%,100% 100%,100% 100%;mask-position:100% 0,0 0,0 0;mask-composite:intersect;mask-repeat:no-repeat}
.portrait-cloud.cloud-ready{opacity:1;animation:cloud-arrive 3000ms cubic-bezier(.16,1,.3,1) both;animation-play-state:paused}
.portrait-cloud i{position:absolute;display:block;transform:translate(-50%,-50%) rotate(var(--cloud-turn));animation:cloud-drift var(--cloud-duration) ease-in-out var(--cloud-delay) infinite alternate;animation-play-state:paused}
.atmosphere-running .portrait-cloud.cloud-ready,.atmosphere-running .portrait-cloud i{animation-play-state:running}
@keyframes cloud-arrive{from{mask-position:100% 0,0 0,0 0}to{mask-position:0% 0,0 0,0 0}}
@keyframes cloud-drift{from{transform:translate(-52%,-52%) rotate(var(--cloud-turn)) scale(.98,1.02)}to{transform:translate(-48%,-49%) rotate(calc(var(--cloud-turn) + 2deg)) scale(1.04,.98)}}
.library-detail-copy{position:relative;z-index:1;min-width:0;overflow-wrap:break-word}
@media(max-width:760px){
 .portrait-cloud{inset:4% -30% 5% -32%}
 .library-detail-copy h2{font-size:clamp(2rem,7vw,2.25rem)}
}
.portrait-cloud.cloud-static.cloud-ready{animation:none;opacity:1;mask-image:linear-gradient(#000,#000),var(--cloud-edge-x),var(--cloud-edge-y)}
.portrait-cloud.cloud-static i{animation:none}
@media(prefers-reduced-motion:reduce){.portrait-cloud.cloud-ready{animation:none;opacity:1;mask-image:linear-gradient(#000,#000),var(--cloud-edge-x),var(--cloud-edge-y)}.portrait-cloud i{animation:none}}
@media(forced-colors:active){.portrait-cloud{display:none}}

/* Crossfade prepainted colors, rather than rotating hues outside the portrait palette. */
.portrait-cloud i::before,.portrait-cloud i::after{content:"";position:absolute;inset:0;border-radius:0;background:linear-gradient(rgb(var(--cloud-color)),rgb(var(--cloud-color))),var(--pf-paper-background);background-blend-mode:multiply,normal,normal;background-size:512px 512px;mask-image:var(--pigment-mask);mask-size:100% 100%;mask-repeat:no-repeat;animation:cloud-color 32s ease-in-out var(--cloud-delay) infinite alternate-reverse;animation-play-state:paused}
.portrait-cloud i::after{background-image:linear-gradient(rgb(var(--cloud-next-color)),rgb(var(--cloud-next-color))),var(--pf-paper-background);animation-direction:alternate}
.atmosphere-running .portrait-cloud i::before,.atmosphere-running .portrait-cloud i::after{animation-play-state:running}
@keyframes cloud-color{from{opacity:0}to{opacity:1}}
.portrait-cloud.cloud-static i::before{animation:none;opacity:1}
.portrait-cloud.cloud-static i::after{animation:none;opacity:0}
@media(prefers-reduced-motion:reduce){.portrait-cloud i::before{animation:none;opacity:1}.portrait-cloud i::after{animation:none;opacity:0}}

/* Give the smaller source photo a broader, fuller field of color. */
.portrait-cloud i.cloud-left{--cloud-core:1;--cloud-mid:.72}

/* Pigment pools into irregular wet edges; the shared paper supplies all fine grain. */
.portrait-cloud i{--pigment-mask:url('/landing/watercolor-mask-1.png?v=shared-paper');opacity:.30}
.portrait-cloud i:nth-child(3n + 2){--pigment-mask:url('/landing/watercolor-mask-2.png?v=shared-paper')}
.portrait-cloud i:nth-child(3n){--pigment-mask:url('/landing/watercolor-mask-3.png?v=shared-paper')}
.portrait-cloud i.cloud-left{opacity:.92}

/* Restore paper relief after translucent pigment compositing, using the same grain. */
.portrait-cloud::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:var(--pf-paper-image);background-size:512px 512px;mix-blend-mode:multiply;filter:brightness(.56) contrast(11);opacity:.65;mask-image:radial-gradient(ellipse 48% 42% at 46% 52%,#000 35%,transparent 100%)}

/* One continuous sheet beneath header, portraits and detail copy. */
.style-library:has(.library-detail:not([hidden])){background:transparent}

/* Feed pigment in from beyond the left edge instead of fading its origin. */
.portrait-cloud i.cloud-left{opacity:.44;mask-image:none}
.portrait-cloud i.cloud-left::before,.portrait-cloud i.cloud-left::after{mask-size:160% 100%;mask-position:right center}

/* On wide canvases the pigment origin is visible: finish it organically.
   Narrow layouts retain the fuller spill running off the viewport edge. */
@media(min-width:1280px){
 .portrait-cloud{--cloud-edge-x:linear-gradient(90deg,transparent,#000 14%,#000 82%,transparent)}
 .portrait-cloud i.cloud-left::before,.portrait-cloud i.cloud-left::after{mask-size:100% 100%;mask-position:center}
}