:root{color-scheme:light;--paper:#f0f0ee;--surface:#e7e7e4;--ink:#212321;--muted:#626660;--line:#d1d3cd;--accent:#373c35;--radius:16px;font-family:'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px}img{display:block;max-width:100%;height:auto}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:wait}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:6px}::selection{background:#d5dbd0;color:#202420}
/* Layers: masthead 10; chapters 11; skip link 12. */
.skip{position:fixed;top:-70px;left:20px;z-index:12;background:var(--paper);padding:14px}.skip:focus{top:12px}
.masthead{position:absolute;top:0;left:0;right:0;height:80px;padding:0 3.4vw;display:flex;justify-content:space-between;align-items:center;z-index:10}.brand{display:flex;gap:16px;align-items:center}.brand b{font-size:34px;letter-spacing:-.12em}.brand span{font-size:12px;font-weight:600;letter-spacing:.12em}.back{font-size:14px}
.chapters{position:fixed;top:50%;left:3.4vw;width:160px;transform:translateY(-50%);display:grid;gap:18px;z-index:11}.chapters a{display:flex;gap:18px;font-size:14px;color:#63695f;align-items:center;min-height:28px;white-space:nowrap}.chapters a span{font-size:11px;font-variant-numeric:tabular-nums}.chapters a[aria-current]{color:var(--ink);font-weight:700}.chapters a[aria-current] span{color:var(--accent)}.chapters a:hover{color:var(--ink)}
main{margin-left:clamp(210px,16.5vw,310px);margin-right:3.4vw}.chapter{position:relative;max-width:1480px;margin-inline:auto;min-height:100dvh;padding:82px 0 66px;display:flex;flex-direction:column;justify-content:center;scroll-margin-top:0}.chapter+.chapter{border-top:1px solid var(--line)}h1,h2,h3,h4,p{margin-top:0}h1,h2{letter-spacing:-.065em;line-height:1.16;word-break:keep-all;overflow-wrap:normal;text-wrap:balance}h2{font-size:clamp(36px,3.4vw,64px);margin-bottom:24px;font-weight:650}h3{font-size:20px;line-height:1.5;letter-spacing:-.03em;margin-bottom:10px}p{font-size:17px;line-height:1.85;color:var(--muted);text-wrap:pretty}.section-heading{max-width:860px;margin-bottom:46px}.section-heading p{max-width:710px;margin-bottom:0}.mobile-break{display:none}.primary-link{display:inline-flex;gap:20px;align-items:center;border-bottom:1px solid var(--ink);padding-bottom:12px;font-size:15px;font-weight:650;white-space:nowrap}.primary-link:hover{color:var(--muted)}
.cover{display:grid;grid-template-columns:1fr 1.15fr;gap:5%;align-items:center;padding-top:88px;border:0}.project-kind{font-size:14px;letter-spacing:.06em;margin-bottom:28px;color:var(--muted)}.cover h1{font-size:clamp(55px,5.25vw,97px);margin-bottom:28px;line-height:1.12;white-space:nowrap}.cover h1 span{font-size:.66em;letter-spacing:-.07em}.cover .lead{max-width:360px;font-size:18px;margin-bottom:36px}
/* Reference-led cover: six real screens; keep the existing light palette and typography.
   DESIGN_VARIANCE: 6; MOTION_INTENSITY: 3; VISUAL_DENSITY: 4. */
.cover{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:4%}
.cover-copy{position:relative;z-index:1;min-width:0}
.cover-gallery{position:relative;isolation:isolate;justify-self:end;width:min(100%,650px,calc((100dvh - 170px) * .72));min-width:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1vw,18px);padding:clamp(12px,1.4vw,24px)}
.cover-gallery::before,.cover-gallery::after{content:"";position:absolute;z-index:-1;pointer-events:none}
.cover-gallery::before{inset:6% -3% 1%;background:#e5e5ee;border-radius:52% 48% 44% 56% / 34% 42% 58% 66%}
.cover-gallery::after{width:80%;height:64%;right:-2%;bottom:-2%;background:#e2eae3;border-radius:60% 40% 35% 65% / 42% 55% 45% 58%}
.cover-device{min-width:0}
.cover-frame{--frame-radius:clamp(16px,1.4vw,24px);padding:4px;background:#f8f8f5;border:1px solid #fff;border-radius:var(--frame-radius);box-shadow:0 8px 20px #3035301c,0 2px 5px #30353014;transition:transform .35s cubic-bezier(.22,.61,.36,1)}
.cover-screen{--shot-width:1080;--status-height:90;--app-height:2310;position:relative;aspect-ratio:var(--shot-width)/var(--app-height);overflow:hidden;border-radius:calc(var(--frame-radius) - 5px);background:#080808}
.cover-screen>img{position:absolute;left:0;top:calc(-100% * var(--status-height) / var(--app-height));width:100%;height:auto;max-width:none;pointer-events:none;user-select:none}
.cover-device--write .cover-screen{--shot-width:291;--status-height:24;--app-height:623}
@media(hover:hover) and (pointer:fine){.cover-device:hover .cover-frame{transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.cover-device:hover .cover-frame{transform:none}}

/* Targeted taste redesign: variance 6, motion 3, density 4; preserve the light theme. */
.idea{--expression-image-height:clamp(240px,calc(100dvh - 356px),500px)}
.definition-heading{margin-bottom:34px}
.definition-heading h2{font-size:clamp(32px,3.05vw,52px);margin-bottom:16px}
.definition-heading>p{font-size:16px;line-height:1.85;max-width:1040px;margin:0}
.expression-flow{display:grid;grid-template-columns:minmax(0,.95fr) 22px minmax(0,1.03fr) 32px minmax(0,1.14fr);gap:clamp(14px,1.5vw,28px);align-items:center}
.expression-flow figure{margin:0;min-width:0}
.expression-flow figcaption,.expression-writing h3{font-size:14px;line-height:1.5;font-weight:600;letter-spacing:0;margin:0 0 16px;color:var(--muted)}
.expression-image{position:relative;aspect-ratio:3/4;width:100%;max-width:calc(var(--expression-image-height) * .75);border-radius:var(--radius);overflow:hidden}
.expression-photo .expression-image{max-width:calc(var(--expression-image-height) * .66)}
.expression-image>img{width:100%;height:100%;object-fit:contain}
.expression-writing{max-width:340px}
.expression-writing blockquote{margin:0}
.expression-writing blockquote p{font-size:17px;line-height:1.95;color:var(--muted);margin:0;text-wrap:pretty}
.expression-writing strong{font-weight:600;color:var(--ink)}
.expression-operator{font-size:28px;line-height:1;text-align:center;color:#72776e;user-select:none}
/* Display the exact supplied image area (66, 70, 948, 1264), without its black surround. */
.expression-crop>img{position:absolute;left:calc(-100% * 66 / 948);top:calc(-100% * 70 / 1264);width:calc(100% * 1080 / 948);height:calc(100% * 1390 / 1264);max-width:none;object-fit:fill}
dt{font-size:12px;color:var(--muted);margin-bottom:8px}dd{margin:0;font-size:14px;line-height:1.6}
.cards{display:grid;grid-template-columns:1fr 1.1fr;gap:11%;align-items:center}.card-copy{max-width:440px}.card-copy>p{max-width:400px}.card-stage{display:flex;align-items:center;justify-content:center;perspective:1500px;min-height:560px}.flip-card{width:min(100%,390px);aspect-ratio:2/3;border:0;padding:0;background:transparent;perspective:1500px;border-radius:var(--radius);position:relative;box-shadow:0 30px 55px #303a3022}.card-turn{display:block;width:100%;height:100%;transform-style:preserve-3d;position:relative}.card-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;border-radius:var(--radius);display:block}.card-face img{width:100%;height:100%;object-fit:contain}.card-face.reverse{transform:rotateY(180deg)}.card-controls{display:flex;align-items:center;gap:22px;margin-top:28px}.flip-control{background:var(--ink);color:#fff;border:0;border-radius:8px;padding:14px 20px;font-size:14px;white-space:nowrap;display:flex;gap:20px;align-items:center;min-height:48px}.flip-control:active{transform:scale(.98)}.face-state{font-size:13px;color:var(--muted)}.gesture-notes{margin-top:52px;max-width:350px}.gesture-notes h3{font-size:17px}.gesture-notes p{font-size:15px}
.memory-layout{display:grid;grid-template-columns:220px 1fr;gap:6%;align-items:center}.memory-tabs{align-self:center;display:flex;flex-direction:column;align-items:flex-start;gap:10px}.memory-tabs>button{border:0;padding:12px 0;background:none;color:var(--muted);font-size:18px;min-height:48px}.memory-tabs>button[aria-selected=true]{color:var(--ink);font-weight:650;box-shadow:inset 0 -2px var(--ink)}.memory-screens{display:grid;grid-template-columns:1fr 1fr 1fr;gap:28px;align-items:center;min-width:0}.scene-image{width:100%;max-height:570px;object-fit:contain;border-radius:var(--radius);opacity:.65;transform:scale(.92);transition:opacity .3s;box-shadow:0 20px 30px #313a3010}.scene-primary{opacity:1;transform:scale(1)}.scene-image:nth-child(2){margin-top:52px}.scene-image:nth-child(3){margin-top:-22px}



@media(min-width:1600px){.chapter{padding-top:100px;padding-bottom:80px}.section-heading{margin-bottom:54px}.memory-screens{gap:38px}.scene-image{max-height:650px}.card-stage{min-height:650px}.flip-card{width:430px}.idea-layout{gap:12%}.photo-contact{max-width:600px}}
@media(max-width:1200px){main{margin-left:195px;margin-right:30px}.chapters{left:30px;width:140px}.masthead{padding-inline:30px}.cover{gap:5%;grid-template-columns:1fr 1fr}.cover h1{font-size:58px}.cover h1 span{font-size:.63em}.cover .lead{font-size:16px}.section-heading{margin-bottom:32px}h2{font-size:39px}p{font-size:16px}.memory-layout{grid-template-columns:160px 1fr;gap:26px}.memory-screens{gap:14px}.memory-tabs>button{font-size:16px}.card-stage{min-height:490px}.cards{gap:7%}.flip-card{max-width:320px}.photo-contact{gap:14px}.principles article{margin-bottom:24px}}
@media(max-width:900px){.masthead{height:72px;padding:0 24px}.brand b{font-size:30px}.brand span{font-size:11px}.back{font-size:12px}.chapters{top:auto;bottom:12px;left:16px;right:16px;width:auto;transform:none;display:flex;gap:4px;padding:7px;background:#f0f0eef2;border:1px solid var(--line);border-radius:12px;overflow:auto;justify-content:center}.chapters a{gap:6px;min-height:40px;padding:0 10px;font-size:12px}.chapters a span{display:none}.chapters a[aria-current]{background:var(--ink);color:#fff;border-radius:8px}main{margin:0 24px}.chapter{padding:74px 0 90px}.cover{padding-top:88px}.cover h1{font-size:clamp(48px,7vw,70px)}.idea-layout{gap:6%}.project-facts{gap:15px}.card-stage{min-height:470px}.memory-layout{grid-template-columns:1fr;gap:28px}.memory-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:center;width:100%}.memory-tabs>button{text-align:center}.memory-screens{max-width:680px;margin-inline:auto}.scene-image{max-height:510px}}
@media(max-width:640px){main{margin-inline:22px}.masthead{padding-inline:22px}.brand span{display:none}.chapter{min-height:100dvh;padding:66px 0 90px}.cover{display:flex;align-items:stretch;gap:38px;padding-top:98px;justify-content:flex-start}.cover-copy{max-width:none}.project-kind{margin-bottom:18px;font-size:12px}.cover h1{font-size:55px;margin-bottom:22px}.cover h1 span{font-size:.64em}.cover .lead{max-width:295px;font-size:15px;margin-bottom:22px}.primary-link{font-size:13px;padding-bottom:9px}h2{font-size:36px;margin-bottom:20px;letter-spacing:-.055em}.section-heading{margin-bottom:28px}.section-heading p{font-size:15px;line-height:1.8}.mobile-break{display:block}.idea-layout{grid-template-columns:1fr;gap:30px}.photo-contact{gap:16px;max-width:380px;margin-inline:auto}.photo-contact img{max-height:195px;object-fit:contain}.photo-contact img:nth-child(3){margin-top:-4px}.principles{margin-top:8px}.principles article{margin-bottom:24px}.principles h3{font-size:19px}.principles p{font-size:15px}.project-facts{grid-template-columns:1fr;gap:18px;margin-top:30px;padding-top:24px}.project-facts>div{display:grid;grid-template-columns:90px 1fr;gap:15px}.project-facts dt{margin:0;line-height:1.9}.cards{display:flex;gap:30px}.card-copy{width:100%;max-width:none}.card-copy>p{font-size:15px}.gesture-notes{margin-top:28px;max-width:none}.card-controls{margin-top:22px;gap:18px}.flip-control{font-size:13px}.card-stage{width:100%;min-height:0;padding:16px 16px 0}.flip-card{width:270px;max-width:100%}.memory-tabs{gap:8px}.memory-tabs>button{font-size:14px;padding:12px 3px}.memory-screens{grid-template-columns:1fr;max-width:270px;gap:0}.scene-image{display:none;max-height:650px;margin:0!important;opacity:1;transform:none!important}.scene-primary{display:block}.chapters{left:10px;right:10px;bottom:9px;justify-content:flex-start}.chapters a{font-size:11px;padding:0 9px;flex-shrink:0}}
.photo-contact{max-width:min(440px,42dvh)}.scene-image{max-height:none;max-width:217px;justify-self:center;opacity:.84;transform:scale(.95)}.scene-primary{opacity:1;transform:scale(1)}
@media(min-width:1600px){.cover{padding-top:88px}.photo-contact{max-width:min(520px,48dvh)}.scene-image{max-height:none;max-width:248px}}
@media(max-width:900px){.scene-image{max-height:none;max-width:195px}}
@media(max-width:640px){h2{font-size:clamp(28px,8.8vw,36px)}.cover h1{font-size:clamp(48px,14vw,55px)}.photo-contact{max-width:380px}.scene-image{max-width:248px;opacity:1!important}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.scene-image{transform:none;opacity:1}}
@media(min-width:1600px){.idea{--expression-image-height:clamp(240px,calc(100dvh - 390px),560px)}}
@media(max-width:1200px){.expression-flow{gap:14px;grid-template-columns:minmax(0,.9fr) 18px minmax(0,1fr) 24px minmax(0,1.12fr)}.expression-writing blockquote p{font-size:16px;line-height:1.9}}
@media(max-width:767px){.definition-heading{margin-bottom:32px}.definition-heading h2{font-size:clamp(30px,5vw,36px)}.definition-heading>p{font-size:16px;line-height:1.8}.expression-flow{grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr);gap:22px 16px;max-width:620px;width:100%;margin-inline:auto}.expression-photo{grid-column:1;grid-row:1}.expression-plus{grid-column:2;grid-row:1}.expression-writing{grid-column:3;grid-row:1}.expression-photo .expression-image{max-width:none}.expression-writing blockquote p{font-size:16px;line-height:1.85}.expression-arrow{grid-column:1/-1;grid-row:2;transform:rotate(90deg);justify-self:center}.expression-result{grid-column:1/-1;grid-row:3;justify-self:center;width:min(100%,350px)}.expression-result .expression-image{max-width:none}}
@media(max-width:480px){.expression-flow{grid-template-columns:1fr;gap:24px}.expression-photo{grid-column:1;grid-row:1;justify-self:center;width:min(100%,280px)}.expression-plus{grid-column:1;grid-row:2}.expression-writing{grid-column:1;grid-row:3;max-width:none}.expression-writing blockquote p{font-size:17px;line-height:1.9}.expression-arrow{grid-column:1;grid-row:4}.expression-result{grid-column:1;grid-row:5;width:min(100%,340px)}}

/* Keep the captured app chrome stationary; crop only the system status bar. */
.cards .card-stage{min-height:0;padding:0;min-width:0}
.app-preview{--shot-width:1080;--shot-height:2400;--status-height:90;--app-height:2310;--card-x:130;--card-y:614;--card-width:820;--card-height:1230;position:relative;aspect-ratio:1080/2310;height:min(860px,calc(100dvh - 152px));max-width:100%;background:#080808;border-radius:24px;overflow:hidden;box-shadow:0 24px 56px #2123211c}
.app-interface{position:absolute;left:0;top:calc(-100% * var(--status-height) / var(--app-height));width:100%;height:auto;max-width:none;pointer-events:none;user-select:none}
.app-card-slot{position:absolute;left:calc(100% * var(--card-x) / var(--shot-width));top:calc(100% * (var(--card-y) - var(--status-height)) / var(--app-height));width:calc(100% * var(--card-width) / var(--shot-width));height:calc(100% * var(--card-height) / var(--app-height));background:#080808;border-radius:6.1% / 4.07%}
.cards .app-card-slot .flip-card{position:absolute;inset:0;width:100%;height:100%;max-width:none;aspect-ratio:2/3;border-radius:inherit;box-shadow:none;touch-action:manipulation}
.cards .app-card-slot .card-face{border-radius:6.1% / 4.07%}
.cards .app-card-slot .card-face img{position:absolute;left:calc(-100% * var(--card-x) / var(--card-width));top:calc(-100% * var(--card-y) / var(--card-height));width:calc(100% * var(--shot-width) / var(--card-width));height:calc(100% * var(--shot-height) / var(--card-height));max-width:none;object-fit:fill;pointer-events:none;user-select:none}
@media(min-width:1600px){.app-preview{height:min(900px,calc(100dvh - 180px))}}
@media(max-width:900px){.app-preview{height:min(760px,calc(100dvh - 164px))}}
@media(max-width:640px){.cards .card-stage{padding-top:4px}.app-preview{height:auto;width:min(100%,340px);border-radius:22px}}

/* Section 05: real app screens, with sharing given a little more room. */
.experience{--ux-height:clamp(340px,calc(100dvh - 405px),590px)}
.experience-heading{margin-bottom:32px}
.experience-heading h2{font-size:clamp(32px,3.05vw,52px);margin-bottom:16px}
.experience-heading>p{font-size:16px;line-height:1.85;margin:0;max-width:880px}
.ux-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.1fr) minmax(0,.95fr);gap:4.5%;align-items:start}
.ux-item{min-width:0}
.ux-copy{min-height:116px;max-width:350px;padding-bottom:22px}
.ux-copy h3{font-size:21px;line-height:1.4;font-weight:650;letter-spacing:-.025em;margin-bottom:10px}
.ux-copy p{font-size:15px;line-height:1.8;margin:0}
/* Crop only the Android system bar; retain each app header and bottom toolbar. */
.ux-screen{--shot-width:1080;--status-height:90;--app-height:2310;position:relative;aspect-ratio:var(--shot-width)/var(--app-height);width:min(100%,calc(var(--ux-height) * var(--shot-width) / var(--app-height)));overflow:hidden;background:#090909;border-radius:18px;box-shadow:0 16px 34px #21232114;transition:transform .35s cubic-bezier(.22,.61,.36,1)}
.ux-screen>img{position:absolute;left:0;top:calc(-100% * var(--status-height) / var(--app-height));width:100%;height:auto;max-width:none;pointer-events:none;user-select:none}
.ux-share .ux-screen{width:min(100%,calc(var(--ux-height) * 1.06 * var(--shot-width) / var(--app-height)))}
.ux-sync .ux-screen{--shot-width:842;--status-height:70;--app-height:1799}
@media(hover:hover) and (pointer:fine){.ux-item:hover .ux-screen{transform:translateY(-3px)}}
@media(min-width:1600px){.experience{--ux-height:clamp(360px,calc(100dvh - 440px),650px)}.ux-copy{min-height:122px}.ux-copy h3{font-size:23px}.ux-copy p{font-size:16px}}
@media(max-width:1200px){.ux-grid{gap:32px}.ux-copy h3{font-size:19px}.ux-copy{min-height:122px}}
@media(max-width:900px){.experience{--ux-height:clamp(330px,calc(100dvh - 425px),550px)}.ux-grid{gap:24px}.ux-copy h3{font-size:18px}.ux-copy{min-height:138px}.ux-copy p{font-size:14px}}
@media(max-width:767px){.experience-heading{margin-bottom:38px}.experience-heading h2{font-size:clamp(30px,5vw,38px)}.ux-grid{grid-template-columns:1fr;gap:42px;max-width:560px;width:100%;margin-inline:auto}.ux-item{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:24px;align-items:center}.ux-copy{min-height:0;max-width:none;padding:0}.ux-copy h3{font-size:21px;line-height:1.5}.ux-copy p{font-size:15px;line-height:1.85}.ux-screen,.ux-share .ux-screen{width:100%;max-width:300px;justify-self:end}}
@media(max-width:480px){.ux-item{grid-template-columns:1fr;gap:24px}.ux-copy h3{font-size:22px}.ux-copy p{font-size:16px}.ux-screen,.ux-share .ux-screen{width:min(100%,300px);justify-self:center}.ux-grid{gap:48px}}
@media(prefers-reduced-motion:reduce){.ux-item:hover .ux-screen{transform:none}}

/* Section 06 keeps three real-screen slots; the missing capture is clearly marked. */
.friends{--ux-height:clamp(340px,calc(100dvh - 405px),590px)}
.friends-heading{margin-bottom:32px}
.friends-heading h2{font-size:clamp(32px,3.05vw,52px);margin-bottom:16px}
.friends-heading>p{font-size:16px;line-height:1.85;max-width:880px;margin:0}
.friends-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4.5%;align-items:start}
.friend-step{min-width:0}
.friend-copy{min-height:116px;max-width:350px;padding-bottom:22px}
.friend-copy h3{font-size:21px;line-height:1.4;font-weight:650;letter-spacing:-.025em;margin-bottom:10px}
.friend-copy p{font-size:15px;line-height:1.8;margin:0}
.friend-placeholder{background:#e8e9e4;border:1px dashed #a4a99e;box-shadow:none}
.friend-placeholder-content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:18px;color:#777e70;text-align:center}
.friend-placeholder-content strong{font-size:17px;font-weight:500;color:var(--ink)}
.friend-placeholder-content span{font-size:13px;color:var(--muted)}
@media(hover:hover) and (pointer:fine){.friend-step:hover .ux-screen{transform:translateY(-3px)}}
@media(min-width:1600px){.friends{--ux-height:clamp(360px,calc(100dvh - 440px),650px)}.friend-copy{min-height:122px}.friend-copy h3{font-size:23px}.friend-copy p{font-size:16px}}
@media(max-width:1200px){.friends-grid{gap:32px}.friend-copy{min-height:122px}.friend-copy h3{font-size:19px}}
@media(max-width:900px){.friends{--ux-height:clamp(330px,calc(100dvh - 425px),550px)}.friends-grid{gap:24px}.friend-copy{min-height:138px}.friend-copy h3{font-size:18px}.friend-copy p{font-size:14px}}
@media(max-width:767px){.friends-heading{margin-bottom:38px}.friends-heading h2{font-size:clamp(30px,5vw,38px)}.friends-grid{grid-template-columns:1fr;gap:42px;max-width:560px;width:100%;margin-inline:auto}.friend-step{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:24px;align-items:center}.friend-copy{min-height:0;max-width:none;padding:0}.friend-copy h3{font-size:21px;line-height:1.5}.friend-copy p{font-size:15px;line-height:1.85}.friends .ux-screen{width:100%;max-width:300px;justify-self:end}}
@media(max-width:480px){.friend-step{grid-template-columns:1fr;gap:24px}.friend-copy h3{font-size:22px}.friend-copy p{font-size:16px}.friends .ux-screen{width:min(100%,300px);justify-self:center}.friends-grid{gap:48px}}
@media(prefers-reduced-motion:reduce){.friend-step:hover .ux-screen{transform:none}}

/* Prompt excerpts are the working content; the artwork retains its full image area. */
/* The cover keeps the six-screen matrix as the viewport narrows. */
@media(max-width:1200px){.cover{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:4%}.cover-gallery{padding:14px;gap:12px}.cover-frame{padding:3px}.cover-screen{border-radius:calc(var(--frame-radius) - 4px)}}
@media(max-width:767px){.cover{display:flex;align-items:stretch;gap:24px;padding-top:94px;justify-content:flex-start}.cover-copy{max-width:none}.cover-gallery{width:min(100%,430px);max-width:430px;align-self:center;justify-self:center;padding:14px;gap:12px}}
@media(max-width:480px){.cover-gallery{padding:12px;gap:10px}.cover-frame{padding:3px;--frame-radius:16px}.cover-screen{border-radius:12px}}

.ai{padding-top:72px;padding-bottom:64px}
.ai .prompt-heading{max-width:1080px;margin-bottom:34px}
.ai .prompt-heading h2{font-size:clamp(34px,3.2vw,56px);margin-bottom:20px}
.ai .prompt-heading p{font-size:16px;line-height:1.85;max-width:950px}
.prompt-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:7%;align-items:center}
.prompt-copy{min-width:0;max-width:720px}
.prompt-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;border-bottom:1px solid var(--line)}
.prompt-tabs button{min-height:48px;border:0;border-bottom:2px solid transparent;background:transparent;padding:12px 6px;color:var(--muted);font-size:15px;white-space:nowrap;transition:color .2s,border-color .2s}
.prompt-tabs button:hover{color:var(--ink)}
.prompt-tabs button[aria-selected=true]{color:var(--ink);border-bottom-color:var(--ink);font-weight:650}
.prompt-tabs button:active{transform:translateY(1px)}
.prompt-panels{display:grid;margin-top:26px}
.prompt-panel{grid-area:1/1;min-width:0;visibility:visible}
.prompt-panel[aria-hidden=true]{visibility:hidden;pointer-events:none}
.prompt-panel:focus-visible{outline:2px solid var(--accent);outline-offset:8px}
.prompt-panel h3{font-size:clamp(28px,2.65vw,42px);line-height:1.3;font-weight:600;letter-spacing:-.045em;margin:0 0 20px;word-break:keep-all;text-wrap:balance}
.prompt-panel blockquote{margin:0}
.prompt-panel blockquote p{font-size:17px;line-height:1.9;margin:0;color:var(--muted);max-width:650px}
.prompt-panel strong{font-weight:600;color:var(--ink)}
.prompt-layout .prompt-art{width:100%;max-width:min(360px,calc((100dvh - 310px) * .75));justify-self:end;border-radius:var(--radius)}
@media(min-width:1600px){.prompt-layout .prompt-art{max-width:min(410px,calc((100dvh - 360px) * .75))}}
@media(max-width:1200px){.prompt-layout{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:38px}.prompt-tabs{gap:4px}.prompt-tabs button{font-size:14px}.prompt-panel h3{font-size:32px}.prompt-panel blockquote p{font-size:16px;line-height:1.85}}
@media(max-width:900px){.ai{padding-top:74px;padding-bottom:90px}}
@media(max-width:767px){.ai .prompt-heading h2{font-size:clamp(30px,5vw,38px)}.prompt-layout{grid-template-columns:1fr;gap:34px}.prompt-copy{max-width:none}.prompt-panel h3{font-size:32px}.prompt-panel blockquote p{font-size:17px;line-height:1.9}.prompt-layout .prompt-art{max-width:340px;justify-self:center}.prompt-tabs{gap:4px}.prompt-tabs button{padding-inline:2px}}