@font-face{font-family:Instrument;src:url("/assets/website/type/instrument-serif.woff2") format("woff2");font-weight:400;font-display:swap} @font-face{font-family:Instrument;src:url("/assets/website/type/instrument-serif-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap} @font-face{font-family:PaiaSerif;src:url("/assets/website/type/atelier-serif-sc.woff2") format("woff2");font-weight:400;font-display:swap} :root{--ink:#272823;--muted:#72736e;--blue:#6284cd;--blue-dark:#4d6fb6;--cream:#f3eedf;--paper:#faf9f5;--serif:Instrument,PaiaSerif,"Songti SC","Noto Serif CJK SC",serif;--sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft Yahei",sans-serif;--line:rgba(40,40,35,.12)} *{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:110px} body{margin:0;color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;background:white;-webkit-font-smoothing:antialiased} a{color:inherit;text-decoration:none} button,input,textarea{font:inherit} button,a,input,textarea{-webkit-tap-highlight-color:transparent} button{color:inherit;cursor:pointer} button{border:0;background:none} button:disabled{cursor:default;opacity:.35} button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid #6284cd;outline-offset:6px} img{max-width:100%;display:block} h1,h2,h3,p{margin:0} h1,h2,h3{font-weight:400} svg{display:block} ::selection{background:#dbe4f6;color:#263655} [hidden]{display:none!important} .serif{font-family:var(--serif)} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap} .skip-link{position:fixed;top:10px;left:20px;padding:10px 20px;background:white;z-index:100;transform:translateY(-150%)} .skip-link:focus{transform:none} .mobile-break{display:none} .eyebrow{font-size:12px;letter-spacing:.19em;font-weight:500;line-height:1.6} .small-caps,.mini-label{font-size:11px;letter-spacing:.13em;font-weight:500} .text-arrow{display:inline-flex;align-items:center;gap:24px;font-size:14px;border-bottom:1px solid currentColor;padding:7px 0} .text-arrow span{transition:transform .2s} .text-arrow:hover span{transform:translate(3px,-3px)} .site-header{position:absolute;z-index:30;left:50%;transform:translateX(-50%);top:27px;width:calc(100% - 112px);max-width:1320px;height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 4px;transition:background .35s,box-shadow .35s,width .45s,padding .35s,border-radius .35s,border .35s} .site-header.is-scrolled{position:fixed;top:18px;max-width:1080px;width:calc(100% - 80px);padding:0 20px;border-radius:100px;border:1px solid rgba(255,255,255,.65);background:rgba(249,246,237,.76);backdrop-filter:blur(22px) saturate(145%);-webkit-backdrop-filter:blur(22px) saturate(145%);box-shadow:0 8px 35px rgba(66,56,36,.075)} .brand{display:inline-flex;align-items:center;gap:7px;flex-shrink:0} .brand img{width:33px;height:38px} .brand span{font-family:Instrument,serif;font-size:36px;letter-spacing:.015em;line-height:1} .nav-center{display:flex;align-items:center;gap:34px;margin-left:100px} .nav-center a{display:flex;gap:8px;align-items:center;font-size:14px;color:#646761;transition:color .2s} .nav-center a:hover{color:var(--ink)} .nav-dot{display:block;width:6px;height:6px;border-radius:50%} .coral{background:#e38e75} .butter{background:#d5bf5a} .lavender{background:#ad91c6} .nav-end{display:flex;align-items:center;gap:24px} .nav-text{font-size:13px;color:#646761} .pill{display:inline-flex;align-items:center;justify-content:center;gap:20px;border-radius:40px;padding:11px 22px;font-size:13px;line-height:1.4;transition:background .2s,transform .2s,box-shadow .2s} .pill-blue{background:var(--blue);color:#fff} .pill-blue:hover{background:var(--blue-dark);transform:translateY(-2px);box-shadow:0 6px 18px rgba(76,109,175,.17)} .pill-large{padding:17px 30px;font-size:15px} .menu-toggle,.mobile-nav{display:none} .site-header a:hover .nav-dot{transform:scale(1.5)} .hero{position:relative;overflow:hidden;background:var(--cream);padding:0 0 95px} .hero-atmosphere{height:1120px;position:absolute;inset:0 0 auto;overflow:hidden;background:#f7f2e7;mask-image:linear-gradient(black 75%,transparent 100%)} .hero-intro{position:relative;z-index:1;text-align:center;padding:157px 24px 0;min-height:745px} .hero-eyebrow{color:#77776f;font-size:10px;letter-spacing:.22em;margin-bottom:24px} .hero h1{font-family:var(--serif);font-size:clamp(74px,8.2vw,118px);line-height:1.18;letter-spacing:-.055em;margin-right:.055em} .hero h1 span{color:#353833} .hero-description{font-size:18px;line-height:2.15;color:#6d6e65;margin-top:32px} .word-tag{display:inline-block;font-size:15px;line-height:1.9;padding:0 14px;border:1px solid;border-radius:30px;vertical-align:1px;margin:0 2px} .tag-peach{border-color:#d9ad91;color:#b78b6a} .tag-pink{border-color:#c496ac;color:#ae7f9a} .tag-blue{border-color:#98b7c9;color:#719bb6} .tag-gold{border-color:#d4c066;color:#b6a13e} .hero-actions{display:flex;align-items:center;justify-content:center;gap:28px;margin-top:38px} .watch-link{display:inline-flex;align-items:center;gap:10px;font-size:13px;padding:10px 0;border-bottom:1px solid transparent;line-height:1.5} .watch-link:hover{border-bottom-color:currentColor} .play-icon{font-size:9px;border:1px solid #aaa99d;border-radius:50%;width:24px;height:24px;display:inline-grid;place-items:center;padding-left:1px} .compatibility{display:flex;align-items:center;justify-content:center;gap:8px;font-size:11px;color:#8d8c80;margin-top:20px} .chrome-mark{display:inline-block;width:13px;height:13px;border-radius:50%;background:conic-gradient(#d66e60 0 32%,#d6c470 32% 66%,#8ca98a 66%);position:relative;opacity:.8} .chrome-mark:after{content:"";position:absolute;width:5px;height:5px;background:#7d9fc1;border:1.5px solid #f7f5ed;border-radius:50%;top:2.5px;left:2.5px} .hero-product-wrap{max-width:1080px;width:calc(100% - 160px);margin:0 auto;position:relative;z-index:2;scroll-margin-top:120px} .product-caption{display:flex;justify-content:space-between;align-items:center;color:#8a877d;font-size:11px;padding:0 6px 15px} .product-caption>span:last-child{display:flex;gap:18px} .reuse-float{position:absolute;right:-28px;bottom:-33px;background:rgba(250,251,255,.94);border:1px solid #fff;border-radius:22px;box-shadow:0 12px 45px #454c7112;padding:19px 20px;display:flex;align-items:center;gap:15px;width:300px;backdrop-filter:blur(16px)} .reuse-float div>span{font-size:13px} .reuse-float small{display:block;font-size:10px;margin-top:4px;color:#9b9fae} .reuse-float button{margin-left:auto;font-size:21px;color:#808ca4;padding:6px} .demo-footnote{position:relative;text-align:center;font-size:11px;color:#918c7e;margin-top:52px} .section-pad{padding:130px 40px} .section-heading{text-align:center;max-width:1000px;margin:0 auto 60px} .section-heading .eyebrow{margin-bottom:25px;color:#85847b} .section-heading h2{font-family:var(--serif);font-size:clamp(50px,6.05vw,86px);line-height:1.22;letter-spacing:-.05em} .section-description{font-size:17px;line-height:1.95;color:#7c7e76;margin-top:28px} .section-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:9px;vertical-align:1px} .dot-peach{background:#dd997b} .section-end-note{font-size:13px;color:#8a8d86;text-align:center;margin-top:35px} .tiny-plus{font-size:20px;margin-right:8px;color:#c19e83} .manifesto{text-align:center;position:relative;overflow:hidden;padding-top:145px;padding-bottom:140px;background:#fff} .manifesto>.eyebrow{color:#92948b;font-size:10px} .manifesto-title{font-size:clamp(45px,5.1vw,70px);line-height:1.38;letter-spacing:-.04em;margin:36px auto 30px} .paint-underline{position:relative;isolation:isolate;white-space:nowrap} .paint-underline:after{content:"";position:absolute;left:-4px;right:-8px;bottom:7px;height:22%;background:#e8e9d7;z-index:-1;transform:rotate(-1.5deg);border-radius:45% 20% 30% 12%} .manifesto-body{color:#83857e;font-size:17px;line-height:2} .manifesto-body p+p{margin-top:20px} .manifesto-close{font-size:19px;line-height:1.8;color:#50564d;margin-top:32px} .manifesto-signature{font-family:Instrument,serif;font-style:italic;font-size:27px;color:#aaa99a;margin-top:36px} .manifesto-orbit{position:absolute;font-family:var(--serif);font-size:22px;color:#b2aca4;letter-spacing:.04em;padding:25px 40px;border:1px solid #eae6dc;border-radius:3px;box-shadow:0 10px 35px #2d282704;background:#fff} .orbit-one{top:230px;left:-90px;transform:rotate(-12deg)} .orbit-two{right:-90px;top:430px;transform:rotate(13deg)} .archive-section{background:#fff;padding-top:70px} .window-dots{display:flex;gap:5px} .window-dots b{width:6px;height:6px;border-radius:50%;background:#d7dce3} .thought-section{background:#f7f5f1;padding-bottom:105px} .context-section{background:#d9714e;color:#fffaf1;position:relative;overflow:hidden;padding-top:115px;padding-bottom:85px} .context-grain{position:absolute;inset:0;background:radial-gradient(ellipse at 10% 70%,#c7604422,transparent 65%),radial-gradient(ellipse at 95% 100%,#b3536922,transparent 60%);pointer-events:none} .context-section .section-heading{position:relative;z-index:1;margin-bottom:32px} .context-section .eyebrow{color:#ffe5d3} .context-section .section-description{color:#ffe9db} .context-section h2{letter-spacing:-.045em} .context-desk{max-width:1060px;margin:auto;position:relative} .context-line{display:flex;justify-content:center;align-items:center;gap:16px;padding-bottom:31px} .context-line img{width:40px;height:40px;filter:brightness(0) invert(1);opacity:.85} .context-line>span{height:1px;width:180px;background:linear-gradient(to right,transparent,#ffc9b5)} .context-line>span:last-child{transform:rotate(180deg)} .context-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:17px;align-items:start} .context-card{color:#4e535f;border-radius:14px;background:#fafaf6;box-shadow:0 15px 25px #7a2b1d0d;min-height:306px;padding:21px 20px 16px;transition:transform .35s,box-shadow .35s} .context-card:nth-child(1){transform:rotate(-3deg) translateY(15px)} .context-card:nth-child(2){transform:rotate(1deg)} .context-card:nth-child(3){transform:rotate(-1deg) translateY(12px)} .context-card:nth-child(4){transform:rotate(3deg) translateY(0)} .context-card:hover{transform:translateY(-7px) rotate(0)} .context-card-top{display:flex;align-items:center;gap:7px} .context-icon{font-size:24px;color:#8c9ec0;line-height:1} .context-english{font-family:Instrument;font-size:16px;color:#8b92a2;white-space:nowrap} .context-switch{margin-left:auto;background:#dedfdc;width:28px;height:16px;border-radius:20px;padding:3px;flex-shrink:0;transition:background .2s} .context-switch span{display:block;width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 1px 2px #0001;transition:transform .2s} .context-switch[aria-checked="true"]{background:#8ca1c4} .context-switch[aria-checked="true"] span{transform:translateX(12px)} .context-card h3{font-family:var(--serif);font-size:26px;letter-spacing:-.03em;margin-top:22px;color:#5c6575} .context-card>p{font-size:10px;color:#a0a1a2;margin-top:6px} .context-example{border-top:1px solid #e6e7e5;margin-top:21px;padding-top:17px;min-height:110px} .context-example>span{font-size:9px;color:#adb0b1} .context-example>p{font-size:11px;line-height:1.9;color:#8b8f95;margin-top:10px} .context-card-bottom{display:flex;justify-content:space-between;font-size:8px;color:#b2b4b3;border-top:1px solid #e8e8e3;padding-top:12px} .context-card.rules{background:#fcf9f0} .rules h3,.rules .context-icon{color:#9e9270} .rules .context-english{color:#b3a78a} .context-card.now{background:#f9f1ed} .now h3,.now .context-icon{color:#b48c76} .now .context-english{color:#ba9b85} .context-card.inputs{background:#f2f1f7} .inputs h3,.inputs .context-icon{color:#9e91b4} .inputs .context-english{color:#aa9dbd} .context-status{display:flex;gap:9px;align-items:center;justify-content:center;margin-top:55px;font-size:12px;color:#ffe4d4;min-height:24px} .lock-small{font-size:23px} .context-disclaimer{text-align:center;position:relative;font-size:10px;color:#ffdecf;margin-top:25px} .details-section{padding-top:130px} .details-section .section-heading{margin-bottom:70px} .feature-mosaic{display:grid;grid-template-columns:repeat(12,1fr);gap:28px;max-width:1160px;margin:auto} .mosaic-card{border-radius:17px;overflow:hidden;min-height:615px;position:relative;padding:44px 42px} .mosaic-copy{position:relative;z-index:2} .mosaic-copy>.mini-label{color:#929292;font-size:9px;letter-spacing:.15em} .mosaic-copy h3{font-family:var(--serif);font-size:42px;line-height:1.35;letter-spacing:-.045em;margin-top:17px} .mosaic-copy>p{font-size:13px;line-height:1.9;color:#898981;margin-top:17px} .reuse-card{grid-column:span 5;background:#e9edf5;padding-right:30px;padding-left:30px} .reuse-card .mosaic-copy{padding-left:8px} .original-card{grid-column:span 7;background:#f2eded} .private-card{grid-column:span 7;background:#f3f1e8;min-height:470px} .flow-card{grid-column:span 5;background:#f8ece5;min-height:470px} .composer-bottom{display:flex;justify-content:space-between;align-items:center;font-size:9px;color:#afb5bf;margin-top:6px} .composer-bottom>span:first-child{font-size:18px} .composer-bottom>span:last-child{display:flex;align-items:center;gap:8px} .composer-bottom i{font-style:normal;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#e2e8f4;color:#9daeca;font-size:12px} .private-card .mosaic-copy{max-width:310px} .private-card .text-arrow{font-size:11px;color:#92917e;margin-top:24px} .privacy-art{position:absolute;right:-35px;bottom:-40px;width:330px;height:330px} .privacy-ring{position:absolute;border:1px solid #d8d5c4;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%)} .ring-outer{width:330px;height:330px} .ring-inner{width:230px;height:230px} .privacy-home{position:absolute;width:100px;height:100px;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-9deg);border-radius:26px;background:#fcfaf4;box-shadow:0 15px 40px #514d2812,inset 0 1px 0 white;display:grid;place-items:center;border:1px solid #e8e3d5} .privacy-home img{width:72px;opacity:.65} .privacy-label{position:absolute;background:#f9f7ef;border:1px solid #e5e0cf;border-radius:20px;color:#a19b82;font-size:9px;padding:5px 12px} .privacy-label-a{left:22px;top:75px;transform:rotate(-12deg)} .privacy-label-b{right:35px;top:36px;transform:rotate(9deg)} .privacy-label-c{left:80px;bottom:52px;transform:rotate(-5deg)} .flow-scene{margin-top:35px;position:relative} .flow-chat{max-width:330px;background:#fff9f5;border:1px solid #f3ded1;border-radius:15px 15px 3px 15px;padding:18px 20px;transform:rotate(2deg)} .flow-chat-label{font-size:8px;color:#bd9f8d} .flow-chat p{font-size:13px;line-height:1.8;color:#a58775;margin-top:10px} .flow-status{font-size:8px;display:block;margin-top:16px;color:#c2ac9c} .flow-passage{display:flex;align-items:center;justify-content:center;gap:10px;margin:14px 0} .flow-passage img{width:19px;height:19px;opacity:.65} .flow-passage span{width:20px;height:1px;background:#d3bdb0} .flow-archive{display:flex;gap:14px;align-items:center;background:#fffaf7;border:1px solid #ecdfd6;border-radius:9px;padding:14px 17px;max-width:320px;margin-left:auto;transform:rotate(-2deg);box-shadow:0 8px 20px #6b3b2010} .flow-archive-icon{color:#bc9d86;font-size:21px} .flow-archive strong{font-size:12px;font-weight:400;color:#9e836d} .flow-archive small{font-size:8px;display:block;color:#bfaa99;margin-top:4px} .flow-archive>span:last-child{margin-left:auto;color:#c2a58e} .how-section{background:#fff2f0;padding-top:115px;padding-bottom:100px} .how-section .section-heading{margin-bottom:37px} .use-tabs{display:flex;justify-content:center;gap:47px;max-width:900px;margin:0 auto 55px} .use-tabs button{font-size:15px;color:#b8a5a0;padding:10px 0;position:relative;transition:color .2s} .use-tabs button[aria-selected="true"]{color:#ca8166} .use-tabs button[aria-selected="true"]:after{content:"";height:5px;width:5px;border-radius:50%;background:#ca8166;position:absolute;left:50%;bottom:-8px} .use-panel{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:100px;max-width:1050px;margin:auto;min-height:390px} .use-story .mini-label{color:#be9d91;font-size:9px} .use-story h3{font-family:var(--serif);font-size:44px;line-height:1.35;letter-spacing:-.03em;color:#705b54;margin-top:20px} .use-story>p:not(.mini-label){font-size:13px;line-height:2;color:#a5928c;max-width:350px;margin-top:21px} .use-story .text-arrow{font-size:11px;color:#b78a77;margin-top:23px} .use-board{background:#fcfaf6;border:1px solid #eeddd3;box-shadow:0 20px 45px #93634a09,5px 6px 0 -1px #faeee7,6px 7px 0 #eddbd0;border-radius:7px;padding:24px 28px;transform:rotate(3deg);min-height:385px} .use-board-label{display:flex;justify-content:space-between;color:#b2a690;font-size:10px;border-bottom:1px solid #eae4d9;padding-bottom:16px} .use-board-label>span:last-child{font-size:18px} .use-board-note{margin-top:23px} .use-board-note>span{font-size:8px;color:#b6ab96;display:block} .use-board-note>p{font-family:var(--serif);font-size:20px;line-height:1.7;color:#86745e;margin-top:10px} .use-board-note+.use-board-note{margin-top:16px} .use-board-next{display:flex;flex-wrap:wrap;align-items:center;column-gap:10px;margin-top:22px;background:#eeeadc;border:1px solid #e3dcc8;padding:13px 16px;border-radius:7px} .use-board-next>span:first-child{width:100%;font-size:8px;color:#b2a587} .use-board-next p{font-size:12px;color:#9c8d6c;margin-top:5px} .use-board-next>span:last-child{margin-left:auto;color:#b0a07c} .simple-steps{display:grid;grid-template-columns:repeat(3,1fr);max-width:1050px;margin:90px auto 0;border-top:1px solid #ead9d3;padding-top:35px;gap:40px} .simple-steps>div{position:relative;padding-left:42px} .simple-steps>div>span{position:absolute;left:0;top:-5px;font-family:Instrument;font-size:27px;color:#d2aaa0} .simple-steps h3{font-size:14px;color:#9c7f75} .simple-steps p{font-size:11px;color:#b8a39b;margin-top:9px} .story-section{text-align:center;padding-top:110px;padding-bottom:100px} .story-section>.eyebrow{font-size:10px;color:#b3ada0} .story-art{width:300px;height:270px;margin:20px auto 30px;overflow:hidden;position:relative} .story-art img{position:absolute;width:370px;max-width:none;left:-35px;top:-40px;mix-blend-mode:multiply} .story-copy h2{font-family:var(--serif);font-size:64px;line-height:1.3;letter-spacing:-.03em;color:#56564a;margin-bottom:33px} .story-copy p{font-size:15px;line-height:2;color:#99998e} .story-copy p+p{margin-top:22px} .story-signature{display:block;font-family:Instrument;font-size:35px;font-style:italic;color:#aaa78f;margin-top:34px} .closing-section{position:relative;overflow:hidden;background:#f8f5eb;padding:100px 20px 95px;text-align:center} .closing-atmosphere{position:absolute;inset:0;background:radial-gradient(ellipse at 0 100%,#f1c89a80,transparent 60%),radial-gradient(ellipse at 100% 50%,#cfd9e480,transparent 60%),radial-gradient(ellipse at 50% 120%,#e7c2ca80,transparent 70%);mask-image:linear-gradient(transparent,#000 50%)} .closing-inner{position:relative;z-index:1} .closing-inner>img{margin:0 auto 22px} .closing-inner>.eyebrow{font-size:9px;color:#b0a797} .closing-inner h2{font-family:var(--serif);font-size:65px;line-height:1.3;letter-spacing:-.04em;margin:23px 0 35px} .closing-actions{display:flex;justify-content:center;align-items:center;gap:27px} .release-note{font-size:10px;color:#aea795;line-height:1.9;margin-top:24px} .site-footer{padding:70px 60px 25px;max-width:1320px;margin:auto} .footer-top{display:flex;justify-content:space-between;gap:80px;padding-bottom:65px} .footer-top>div>p{font-size:12px;color:#a2a193;margin-top:18px} .footer-top nav{display:flex;gap:80px} .footer-top nav>div{display:flex;flex-direction:column;gap:11px} .footer-top nav>div>span{font-size:10px;color:#b0af9f;margin-bottom:6px} .footer-top nav a{font-size:11px;color:#8a8e81} .footer-top nav a:hover{color:var(--blue)} .footer-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:21px;border-top:1px solid #eeede7;font-size:9px;color:#b3b2a5} .footer-bottom>a{color:#979c8e} .tour-dialog{padding:55px 60px 35px;width:640px;max-width:calc(100% - 32px);border:1px solid #fff;border-radius:20px;background:#faf8f1;color:var(--ink);box-shadow:0 40px 150px #292b3550;overflow:auto;max-height:90dvh} .tour-dialog::backdrop{background:#26334755;backdrop-filter:blur(12px)} .dialog-close{position:absolute;right:20px;top:15px;font-size:30px;font-weight:300;color:#949387} .tour-dialog>.eyebrow{font-size:9px;color:#a69d8b} .tour-dialog h2{font-family:var(--serif);font-size:43px;line-height:1.35;margin-top:18px;letter-spacing:-.02em} .tour-progress{display:flex;gap:8px;margin-top:26px} .tour-progress button{height:3px;background:#e4dfd2;border-radius:10px;flex:1;padding:0;position:relative} .tour-progress button:after{content:"";position:absolute;inset:-8px 0} .tour-progress button.is-active{background:#96a8c6} .tour-stage{min-height:230px;margin-top:28px;background:#fffdf9;border:1px solid #ece6da;border-radius:10px;padding:25px} .tour-step-label{font-size:10px;color:#a7997f} .tour-stage #tour-quote{font-family:var(--serif);font-size:26px;line-height:1.6;color:#6e6e5c;margin-top:16px} .tour-stage #tour-explanation{font-size:12px;line-height:1.9;color:#a09b8d;margin-top:20px} .tour-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:28px} .tour-bottom .text-arrow{font-size:11px;border:0} .toast{position:fixed;z-index:100;bottom:28px;left:50%;transform:translate(-50%,15px);background:#41494aeb;backdrop-filter:blur(10px);color:white;padding:12px 22px;font-size:12px;line-height:1.6;border-radius:30px;box-shadow:0 10px 30px #27384220;opacity:0;pointer-events:none;transition:transform .25s,opacity .25s;max-width:calc(100% - 40px);width:max-content;text-align:center} .toast.is-visible{opacity:1;transform:translate(-50%,0)} .js-motion .reveal{opacity:0;transform:translateY(25px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)} .js-motion .reveal.is-visible{opacity:1;transform:translateY(0)} @keyframes color-drift{0%{transform:rotate(-12deg) scale(1)}100%{transform:rotate(14deg) scale(1.08)}} @keyframes blink{0%,40%{opacity:1}50%,100%{opacity:0}} @media (min-width:1500px){.hero-intro{padding-top:174px;min-height:800px} .hero-atmosphere{height:1230px} .hero h1{font-size:130px} .hero-product-wrap{max-width:1150px} .hero-description{margin-top:36px} .hero-actions{margin-top:40px}} @media (max-width:1100px){.nav-center{margin-left:25px;gap:24px} .site-header{width:calc(100% - 70px)} .nav-end{gap:15px} .hero-intro{min-height:720px} .hero h1{font-size:92px} .hero-product-wrap{width:calc(100% - 100px)} .section-pad{padding-left:40px;padding-right:40px} .context-cards{gap:12px} .context-card{padding:18px 14px;min-height:302px} .context-english{font-size:13px} .context-icon{font-size:21px} .context-card h3{font-size:23px} .context-card>p{font-size:9px} .context-example>p{font-size:10px} .context-card-bottom{font-size:7px} .feature-mosaic{gap:22px} .mosaic-card{padding:35px 30px} .mosaic-copy h3{font-size:37px} .mosaic-copy>p{font-size:12px} .privacy-art{right:-70px;width:300px;height:300px} .privacy-home{width:85px;height:85px} .private-card .mosaic-copy{max-width:270px} .use-panel{gap:60px} .footer-top nav{gap:50px} .site-footer{padding-left:40px;padding-right:40px}} @media (max-width:850px){.nav-text{display:none} .nav-center{margin-left:0} .site-header{width:calc(100% - 50px)} .brand span{font-size:31px} .hero-intro{min-height:690px;padding-top:160px} .hero h1{font-size:82px} .hero-description{font-size:16px} .word-tag{font-size:13px} .hero-product-wrap{width:calc(100% - 70px)} .reuse-float{right:-12px;transform:scale(.85);transform-origin:right bottom;bottom:-30px} .section-pad{padding:95px 30px} .section-heading h2{font-size:63px} .manifesto-title{font-size:54px} .manifesto-orbit{display:none} .context-cards{grid-template-columns:1fr 1fr;max-width:590px;margin:auto;gap:22px} .context-card{padding:24px;min-height:290px} .context-english{font-size:17px} .context-icon{font-size:25px} .context-card h3{font-size:28px} .context-card>p{font-size:11px} .context-example>p{font-size:12px} .context-card-bottom{font-size:9px} .context-card:nth-child(n){transform:none} .context-card:nth-child(2n){transform:translateY(20px)} .context-card:hover{transform:translateY(-3px)} .context-card:nth-child(2n):hover{transform:translateY(17px)} .context-section .section-heading h2{font-size:65px} .context-status{margin-top:50px} .context-disclaimer{max-width:400px;margin:20px auto 0} .feature-mosaic{gap:20px} .mosaic-card{padding:30px 26px} .mosaic-copy h3{font-size:32px} .mosaic-copy>p{font-size:11px} .reuse-card,.flow-card{grid-column:span 6} .original-card,.private-card{grid-column:span 6} .mosaic-copy>.mini-label{font-size:8px} .privacy-art{right:-45px;bottom:-110px} .private-card{min-height:530px} .flow-card{min-height:530px} .private-card .mosaic-copy{max-width:none} .use-panel{gap:40px} .use-story h3{font-size:36px} .use-story>p:not(.mini-label){font-size:12px} .use-board{padding:23px} .use-board-note>p{font-size:18px} .use-tabs{gap:30px} .use-tabs button{font-size:13px} .simple-steps{gap:20px} .simple-steps>div{padding-left:31px} .simple-steps h3{font-size:12px} .simple-steps p{font-size:10px} .simple-steps>div>span{font-size:23px} .story-copy h2{font-size:56px} .closing-inner h2{font-size:56px} .footer-top{gap:30px} .footer-top nav{gap:30px} .site-footer{padding:50px 30px 25px}} @media (max-width:600px){html{scroll-padding-top:90px} .site-header{top:18px;width:calc(100% - 36px);height:48px;padding:0} .site-header.is-scrolled{top:12px;width:calc(100% - 24px);padding:0 15px;height:56px} .brand{gap:4px} .brand img{width:29px;height:29px} .brand span{font-size:30px} .nav-center{display:none} .nav-end{gap:12px} .nav-end .pill{padding:9px 15px;font-size:11px;gap:9px} .menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;padding:6px;width:27px;height:30px} .menu-toggle span{display:block;width:17px;height:1px;background:#868981;transition:transform .2s} .menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(3px) rotate(45deg)} .menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-3px) rotate(-45deg)} .mobile-nav{position:fixed;z-index:29;left:12px;right:12px;top:79px;border:1px solid #fff;border-radius:18px;background:#faf8f0f5;backdrop-filter:blur(20px);padding:13px 22px;box-shadow:0 15px 40px #62553315;display:flex;flex-direction:column;gap:5px} .mobile-nav a{padding:10px 0;font-size:14px;color:#71796f} .hero{padding-bottom:58px} .hero-intro{padding:123px 16px 0;min-height:596px} .hero-eyebrow{font-size:8px;letter-spacing:.17em;margin-bottom:24px} .hero h1{font-size:clamp(48px,12.5vw,72px);line-height:1.26;letter-spacing:-.055em} .hero-atmosphere{height:790px} .hero-description{font-size:14px;margin-top:27px;line-height:2.2} .word-tag{font-size:12px;padding:0 9px;margin:0 1px} .hero-actions{flex-direction:column;gap:12px;margin-top:27px} .hero-actions .pill-large{padding:13px 23px;font-size:13px} .hero-actions .watch-link{font-size:11px;padding:4px 0} .play-icon{height:20px;width:20px;font-size:7px} .compatibility{font-size:8px;margin-top:17px} .chrome-mark{width:11px;height:11px} .chrome-mark:after{width:4px;height:4px;top:2px;left:2px;border-width:1.5px} .hero-product-wrap{width:calc(100% - 32px)} .product-caption{padding:0 3px 11px;font-size:8px} .small-caps{font-size:7px} .product-caption>span:last-child{gap:8px} .reuse-float{right:-2px;bottom:-37px;transform:scale(.77);border-radius:19px} .demo-footnote{font-size:9px;margin-top:65px;padding:0 20px} .section-pad{padding:78px 20px} .section-heading{margin-bottom:38px} .section-heading .eyebrow{font-size:8px;letter-spacing:.14em;margin-bottom:19px} .section-heading h2{font-size:clamp(39px,10vw,54px);line-height:1.3;letter-spacing:-.045em} .section-description{font-size:13px;line-height:1.95;margin-top:22px} .manifesto{padding:86px 20px} .manifesto>.eyebrow{font-size:8px} .manifesto-title{font-size:clamp(34px,8.8vw,48px);margin:29px auto 25px;line-height:1.48} .manifesto-body{font-size:13px;line-height:2} .manifesto-body p+p{margin-top:16px} .manifesto-close{font-size:15px;line-height:1.8;margin-top:25px} .manifesto-signature{font-size:24px;margin-top:28px} .paint-underline:after{bottom:6px;height:18%} .mobile-break{display:block} .archive-section{padding-top:30px} .window-dots{gap:4px} .window-dots b{width:5px;height:5px} .section-end-note{font-size:10px;margin-top:24px;line-height:1.8} .thought-section{padding-bottom:66px} .context-section{padding-top:80px;padding-bottom:55px} .context-section .section-heading h2{font-size:clamp(37px,9.5vw,52px);line-height:1.3} .context-section .section-description{font-size:12px} .context-section .section-heading{margin-bottom:26px} .context-line{padding-bottom:25px;gap:12px} .context-line img{width:30px;height:30px} .context-line>span{width:95px} .context-cards{gap:12px} .context-card{padding:16px 12px 12px;border-radius:10px;min-height:271px} .context-card:nth-child(2n){transform:translateY(13px)} .context-card:hover{transform:none} .context-card:nth-child(2n):hover{transform:translateY(13px)} .context-card-top{gap:5px;flex-wrap:wrap} .context-icon{font-size:21px} .context-english{font-size:13px;order:3;display:block;width:100%;margin-top:1px} .context-switch{width:27px;height:16px} .context-switch[aria-checked="true"] span{transform:translateX(11px)} .context-card h3{font-size:22px;margin-top:13px} .context-card>p{font-size:9px;margin-top:5px;min-height:28px} .context-example{padding-top:12px;margin-top:12px;min-height:88px} .context-example>span{font-size:8px} .context-example>p{font-size:10px;margin-top:8px;line-height:1.8} .context-card-bottom{font-size:7px;padding-top:10px} .context-status{margin-top:38px;font-size:10px;padding:0 8px;text-align:center} .context-disclaimer{font-size:8px;line-height:1.8;margin-top:18px;max-width:275px} .details-section .section-heading{margin-bottom:38px} .feature-mosaic{display:flex;flex-direction:column;gap:17px} .mosaic-card{padding:31px 27px;border-radius:13px;min-height:0} .mosaic-copy h3{font-size:34px;line-height:1.35;margin-top:15px} .mosaic-copy>.mini-label{font-size:8px} .mosaic-copy>p{font-size:12px;margin-top:15px} .reuse-card{padding-bottom:24px} .reuse-card .mosaic-copy{padding-left:0} .original-card{padding-bottom:10px} .private-card{min-height:490px} .private-card .mosaic-copy{max-width:90%} .privacy-art{bottom:-65px;right:-33px;width:300px;height:300px} .privacy-ring.ring-outer{width:300px;height:300px} .privacy-ring.ring-inner{width:215px;height:215px} .privacy-label-c{bottom:65px} .flow-card{padding-bottom:35px} .flow-scene{margin-top:30px} .flow-chat{max-width:100%;margin-right:10px;padding:18px} .flow-chat p{font-size:13px} .flow-chat-label{font-size:8px} .flow-status{font-size:8px} .flow-archive{margin-left:20px} .flow-archive strong{font-size:12px} .how-section{padding:75px 23px 65px} .how-section .section-heading{margin-bottom:27px} .use-tabs{gap:19px;margin-bottom:40px;justify-content:space-between} .use-tabs button{font-size:11px;padding:8px 0;white-space:nowrap} .use-panel{display:flex;flex-direction:column;gap:35px;min-height:0} .use-story{width:100%;padding:0 8px} .use-story h3{font-size:35px;line-height:1.4;margin-top:18px} .use-story>p:not(.mini-label){font-size:12px;line-height:2;max-width:100%} .use-story .text-arrow{font-size:11px;margin-top:20px} .use-story .mini-label{font-size:8px} .use-board{width:calc(100% - 18px);padding:23px 25px;min-height:365px;transform:rotate(2deg)} .use-board-note>p{font-size:20px} .use-board-next p{font-size:12px} .simple-steps{display:flex;flex-direction:column;gap:25px;margin-top:58px;padding-top:28px} .simple-steps>div{padding-left:40px} .simple-steps>div>span{font-size:25px;top:-3px} .simple-steps h3{font-size:13px} .simple-steps p{font-size:11px;margin-top:5px} .story-section{padding-top:75px;padding-bottom:70px} .story-section>.eyebrow{font-size:8px} .story-art{width:255px;height:230px;margin-top:15px;margin-bottom:15px} .story-art img{width:320px;left:-33px;top:-35px} .story-copy h2{font-size:46px;line-height:1.35;margin-bottom:26px} .story-copy p{font-size:13px;line-height:2} .story-copy p+p{margin-top:17px} .story-signature{font-size:30px;margin-top:27px} .closing-section{padding:65px 18px 70px} .closing-inner>img{width:44px;height:44px;margin-bottom:18px} .closing-inner>.eyebrow{font-size:8px} .closing-inner h2{font-size:clamp(36px,9.4vw,50px);margin:23px 0 28px;line-height:1.4} .closing-actions{flex-direction:column;gap:10px} .closing-actions .pill-large{font-size:13px;padding:14px 24px} .closing-actions .watch-link{font-size:11px} .release-note{font-size:9px;margin-top:17px;line-height:1.9} .site-footer{padding:44px 24px 20px} .footer-top{flex-direction:column;gap:34px;padding-bottom:35px} .footer-top>div>p{font-size:11px;margin-top:12px} .footer-top nav{display:grid;grid-template-columns:1fr 1fr 1fr;gap:15px} .footer-top nav>div{gap:9px} .footer-top nav>div>span{font-size:9px;margin-bottom:3px} .footer-top nav a{font-size:10px} .footer-bottom{gap:12px;font-size:8px;flex-wrap:wrap;padding-top:19px} .footer-bottom>span:nth-child(2){display:none} .footer-bottom>a{margin-left:auto} .tour-dialog{padding:40px 25px 25px;border-radius:15px} .tour-dialog h2{font-size:36px} .tour-dialog>.eyebrow{font-size:8px} .tour-stage{padding:20px;margin-top:23px;min-height:245px} .tour-stage #tour-quote{font-size:24px} .tour-stage #tour-explanation{font-size:11px} .tour-bottom{margin-top:23px} .tour-bottom .pill{font-size:12px} .toast{font-size:11px;bottom:20px;padding:11px 17px;border-radius:15px} .js-motion .reveal{transform:translateY(16px);transition-duration:.65s}} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *,*:before,*:after{animation:none!important;transition:none!important} .js-motion .reveal{opacity:1;transform:none}} .context-section .eyebrow,.context-section .section-description,.context-status,.context-disclaimer{color:#3d271d} .context-card{min-height:335px} .context-card>p{color:#74777a;font-size:11px;line-height:1.7} .context-example>span{color:#777d81;font-size:10px} .context-example>p{color:#626c79;font-size:12px;line-height:1.85} .context-example{min-height:120px} .context-card-bottom{color:#7c8287;font-size:9px} .story-copy p{color:#727367} .mosaic-copy>p{color:#70736e} .use-story>p:not(.mini-label){color:#806b62} .pd-card-content{color:#667186} @media (max-width:600px){.context-card{min-height:315px} .context-example{min-height:110px} .context-card>p{font-size:10px} .context-example>p{font-size:11px} .context-example>span{font-size:9px} .context-card-bottom{font-size:8px} .context-disclaimer{font-size:9px} .mosaic-copy>p{font-size:12px}} .pd-demo { --pd-ink: #303745; --pd-secondary: #71798b; --pd-line: #e9ebf1; --pd-accent: #6284cd; --pd-muted-blue: #edf1f9; width: 100%; max-width: 1080px; height: 600px; margin-inline: auto; display: flex; flex-direction: column; overflow: hidden; background: #f5f6f9; color: var(--pd-ink); border: 1px solid #dfe3eb; border-radius: 12px; box-shadow: 0 28px 75px -35px #35456530, 0 4px 12px #35456505; font-family: inherit; font-size: 14px; line-height: 1.5; text-align: left; isolation: isolate; } .pd-demo *, .pd-demo *::before, .pd-demo *::after { box-sizing: border-box; } .pd-demo button, .pd-demo input { font: inherit; } .pd-demo button { -webkit-tap-highlight-color: transparent; } .pd-demo button { cursor: pointer; } .pd-demo button:focus-visible, .pd-demo input:focus-visible { outline: 2px solid var(--pd-accent); outline-offset: 3px; } .pd-demo button, .pd-demo input, .pd-demo h3, .pd-demo h4, .pd-demo p { margin: 0; } .pd-demo button { letter-spacing: normal; text-transform: none; } .pd-demo [hidden] { display: none !important; } .pd-icon { width: 19px; height: 19px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .pd-titlebar { position: relative; height: 39px; flex: 0 0 39px; border-bottom: 1px solid var(--pd-line); background: #f6f7fa; display: flex; align-items: center; justify-content: space-between; padding-inline: 17px; } .pd-window-dots { display: flex; gap: 6px; } .pd-window-dots span { width: 7px; height: 7px; border-radius: 50%; background: #d5d9e2; } .pd-window-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 9px; font-weight: 500; letter-spacing: 1.35px; color: #8c93a2; white-space: nowrap; } .pd-demo-badge { display: flex; align-items: center; gap: 6px; font-size: 10px; color: #7c8597; } .pd-demo-badge i { height: 4px; width: 4px; border-radius: 50%; background: #9baecb; } .pd-app { flex: 1; min-height: 0; display: flex; } .pd-sidebar { width: 157px; flex: 0 0 157px; padding: 25px 11px 18px; background: #f5f6f9; border-right: 1px solid var(--pd-line); display: flex; flex-direction: column; } .pd-brand { display: flex; align-items: center; gap: 7px; padding: 0 13px; margin-bottom: 31px; font-size: 20px; font-weight: 550; letter-spacing: -.5px; color: #42495a; } .pd-brand img { display: block; object-fit: contain; } .pd-nav { display: grid; gap: 5px; } .pd-tab { width: 100%; min-height: 41px; padding: 9px 12px; display: flex; align-items: center; gap: 10px; border: 1px solid transparent; border-radius: 6px; background: transparent; text-align: left; color: #7d8492; font-size: 13px !important; font-weight: 400; transition: color .2s, background .2s, border-color .2s; } .pd-tab:hover { background: #eceff5; color: #596984; } .pd-tab.pd-is-active { color: #536c9a; background: #e8edf6; border-color: #dfe6f2; } .pd-tab .pd-icon { width: 17px; height: 17px; } .pd-sidebar-note { margin-top: auto; padding: 0 8px; display: flex; gap: 5px; align-items: center; color: #8b92a1; font-size: 9px; white-space: nowrap; } .pd-sidebar-note .pd-icon { width: 12px; height: 12px; } .pd-panel { min-width: 0; flex: 1; display: flex; flex-direction: column; background: #fff; } .pd-panel:focus { outline: none; } .pd-panel:focus-visible { box-shadow: inset 0 0 0 2px var(--pd-accent); } .pd-split { flex: 1; min-height: 0; display: flex; } .pd-reader { flex: 1; min-width: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #d7dce7 transparent; padding: 27px 37px 24px; overscroll-behavior: contain; } .pd-reader h4 { font-size: 23px; line-height: 1.45; font-weight: 500; letter-spacing: -.5px; } .pd-statusbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 31px; flex: 0 0 31px; padding: 0 18px; border-top: 1px solid var(--pd-line); color: #929aab; background: #fafbfc; font-size: 9px; } .pd-status-left { display: flex; align-items: center; gap: 6px; } .pd-local-dot { width: 4px; height: 4px; border-radius: 50%; background: #99aea3; } .pd-status-right { color: #8a9abb; } .pd-archive-nav { width: 248px; flex: 0 0 248px; padding: 19px 13px; border-right: 1px solid var(--pd-line); background: #fcfcfd; overflow-y: auto; scrollbar-width: thin; } .pd-search { height: 36px; border: 1px solid #e2e6ee; background: white; border-radius: 6px; display: flex; align-items: center; gap: 7px; padding-inline: 10px; } .pd-search .pd-icon { width: 14px; height: 14px; color: #a0a8b8; } .pd-search input { min-width: 0; width: 100%; height: 100%; border: 0; outline: none; border-radius: 2px; background: transparent; color: var(--pd-ink); font-size: 11px; } .pd-search input::placeholder { color: #a1a8b6; } .pd-search:focus-within { border-color: #a8bbdf; box-shadow: 0 0 0 3px #6284cd0c; } .pd-search input:focus-visible { outline: 0; } .pd-archive-label { display: flex; gap: 5px; align-items: center; padding: 22px 6px 12px; font-size: 11px; color: #8a92a2; } .pd-archive-label .pd-icon { width: 11px; height: 11px; } .pd-archive-item { width: 100%; border: 1px solid transparent; border-radius: 6px; padding: 12px 12px; background: transparent; text-align: left; color: #737c8e; } .pd-archive-item + .pd-archive-item { margin-top: 5px; } .pd-archive-item:hover { background: #f1f3f8; } .pd-archive-item.pd-is-active { background: #edf1f8; border-color: #e5eaf3; } .pd-archive-item strong { display: block; font-size: 12px; font-weight: 500; color: #586477; } .pd-archive-item small { display: block; font-size: 10px; color: #9da5b3; margin-top: 5px; } .pd-context-body { padding: 25px 36px 18px; flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; background: #fbfcfe; } .pd-context-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; max-width: 680px; margin-inline: auto; } .pd-context-card { min-width: 0; border: 1px solid #e6eaf1; border-radius: 10px; background: #fff; padding: 17px 20px 13px; box-shadow: 0 2px 5px #7586a003; } .pd-card-top { display: flex; justify-content: space-between; gap: 13px; align-items: flex-start; } .pd-card-top h4 { color: #515c70; font-size: 14px; font-weight: 500; } .pd-card-top p { font-size: 8px; letter-spacing: .9px; color: #b0b7c5; margin-top: 3px; } .pd-card-top > .pd-icon { margin-top: 3px; width: 21px; height: 21px; color: #9daec8; stroke-width: 1.2; } .pd-card-top .pd-icon circle { fill: white; } .pd-card-content { margin-top: 15px; display: grid; gap: 6px; font-size: 13px; color: #667186; } .pd-card-bottom { margin-top: 16px; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #f0f2f6; gap: 10px; } .pd-card-bottom > span { font-size: 10px; color: #a6adba; } .pd-toggle { position: relative; width: 31px; height: 18px; border: 0; border-radius: 12px; background: #e1e5ed; padding: 2px; transition: background .2s ease; flex: 0 0 auto; } .pd-toggle::before { content: ""; position: absolute; inset: -8px -5px; } .pd-toggle > span { display: block; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px #45516b1a; transform: translateX(0); transition: transform .2s ease; } .pd-toggle[aria-checked="true"] { background: #83a0d1; } .pd-toggle[aria-checked="true"] > span { transform: translateX(13px); } .pd-context-card.pd-is-enabled { border-color: #d4dff0; } .pd-context-card.pd-is-enabled .pd-card-bottom > span { color: #829bc2; } .pd-context-note { margin-top: 18px !important; display: flex; align-items: center; justify-content: center; gap: 6px; color: #a4adbc; font-size: 10px; line-height: 1.8; } .pd-context-note .pd-icon { width: 12px; height: 12px; } .pd-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px !important; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } @media (max-width: 1000px) {.pd-sidebar { width: 139px; flex-basis: 139px; padding-inline: 8px; } .pd-tab { padding-inline: 10px; gap: 8px; } .pd-reader { padding-inline: 26px; } .pd-context-body { padding-inline: 25px; } .pd-sidebar-note { font-size: 8px; padding-inline: 3px; gap: 4px; } .pd-archive-nav { width: 215px; flex-basis: 215px; }} @media (max-width: 760px) {.pd-demo { height: auto; min-height: 600px; } .pd-titlebar { height: 35px; flex-basis: 35px; padding-inline: 14px; } .pd-window-title { font-size: 8px; letter-spacing: .8px; } .pd-demo-badge { font-size: 8px; } .pd-app { display: block; } .pd-sidebar { width: 100%; padding: 13px 14px; border-right: 0; border-bottom: 1px solid var(--pd-line); flex-direction: row; align-items: center; gap: 19px; } .pd-brand { padding: 0; margin: 0; gap: 5px; font-size: 16px; } .pd-brand img { width: 23px; height: 23px; } .pd-nav { display: flex; flex: 1; justify-content: flex-end; gap: 3px; } .pd-tab { width: auto; min-height: 36px; padding: 6px 9px; gap: 6px; font-size: 11px !important; white-space: nowrap; } .pd-tab .pd-icon { width: 15px; height: 15px; } .pd-sidebar-note { display: none; } .pd-split { display: block; } .pd-reader { padding: 25px 28px 28px; overflow: visible; } .pd-reader h4 { font-size: 23px; } .pd-archive-nav { width: 100%; padding: 15px 20px; border-right: 0; border-bottom: 1px solid var(--pd-line); overflow: visible; } .pd-search { max-width: 100%; } .pd-search input { font-size: 13px; } .pd-archive-label { padding-top: 15px; } .pd-archive-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; } .pd-archive-item + .pd-archive-item { margin-top: 0; } .pd-archive-item strong { font-size: 12px; } .pd-context-body { padding: 22px 22px 24px; overflow: visible; } .pd-context-card { padding: 18px 18px 14px; } .pd-context-grid { gap: 12px; } .pd-statusbar { min-height: 33px; padding: 8px 14px; flex-wrap: wrap; }} @media (max-width: 460px) {.pd-sidebar { gap: 5px; padding: 12px 9px; } .pd-brand { font-size: 14px; gap: 2px; } .pd-brand img { width: 21px; height: 21px; } .pd-tab { padding: 6px 7px; gap: 4px; font-size: 10px !important; } .pd-tab .pd-icon { width: 13px; height: 13px; } .pd-nav { gap: 2px; } .pd-window-title { font-size: 7px; letter-spacing: .5px; } .pd-window-dots { gap: 4px; } .pd-window-dots span { width: 6px; height: 6px; } .pd-demo-badge { font-size: 7px; gap: 4px; } .pd-reader { padding: 25px 20px 27px; } .pd-reader h4 { font-size: 21px; } .pd-context-grid { grid-template-columns: 1fr; } .pd-context-body { padding-inline: 20px; } .pd-card-content { font-size: 13px; } .pd-card-top h4 { font-size: 16px; } .pd-card-top p { font-size: 9px; } .pd-card-bottom > span { font-size: 11px; } .pd-context-note { align-items: flex-start; font-size: 10px; } .pd-context-note .pd-icon { margin-top: 3px; } .pd-statusbar { font-size: 8px; gap: 5px; } .pd-status-right { display: none; } .pd-archive-list { grid-template-columns: 1fr; } .pd-archive-item { padding: 9px 10px; }} @media (prefers-reduced-motion: reduce) {.pd-demo *, .pd-demo *::before, .pd-demo *::after { transition: none !important; scroll-behavior: auto !important; }} .hero-atelier-label{position:absolute;left:4.6%;top:420px;z-index:2;writing-mode:vertical-rl;transform:rotate(180deg);font-family:Instrument,serif;font-size:13px;color:#8c776b;letter-spacing:.12em;opacity:.65;pointer-events:none} .hero-atelier-label-right{left:auto;right:4.4%;top:370px;transform:none;color:#817e8a} @media (max-width:580px){.hero-atelier-label{display:none}} .skip-link{top:-100px;transform:none!important} .skip-link:focus-visible{top:10px} .paia { --surface:#fff; --ink:#292b31; --muted:#6d7480; --border:#dce0e7; --rule:#edf0f3; --hover:#f3f5f8; --pressed:#e9edf3; --success:#eef2f8; --focus:#657999; --panel-shadow:0 2px 5px #17253e04,0 10px 28px #17253e0c; --anchor-shadow:0 2px 4px #17253e05,0 6px 18px #17253e0b; --rear-a:#93a2be; --rear-b:#8192b1; --front-a:#899bb9; --front-b:#667c9f; --rear-alpha-a:.27; --rear-alpha-b:.37; --front-alpha-a:.36; --front-alpha-b:.55; --edge-a:#fff; --edge-b:#7185a6; --edge-alpha-a:.92; --edge-alpha-b:.30; --rear-x:-2.5px; --rear-y:0px; --speed:120ms; --ease:cubic-bezier(.2,.7,.2,1); --text-scale:1; position:absolute; width:48px; height:48px; z-index:20; color:var(--ink); font:400 calc(14px * var(--text-scale))/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,"Noto Sans CJK SC",sans-serif; pointer-events:none; isolation:isolate; } [data-theme=dark] .paia { --surface:#2b2c30; --ink:#e9ebf0; --muted:#a5aab4; --border:#454850; --rule:#3b3d43; --hover:#363940; --pressed:#41454e; --success:#384354; --focus:#a4b8d8; --panel-shadow:0 2px 5px #00000012,0 12px 32px #00000028; --anchor-shadow:0 2px 5px #00000015,0 6px 18px #00000022; --rear-a:#c1cee5; --rear-b:#a0b3d2; --front-a:#d4dff2; --front-b:#9eb4d6; --rear-alpha-a:.28; --rear-alpha-b:.36; --front-alpha-a:.57; --front-alpha-b:.72; --edge-a:#e8efff; --edge-b:#a9bddc; --edge-alpha-a:.57; --edge-alpha-b:.32; } .paia *, .paia *::before, .paia *::after { box-sizing:border-box; } .paia [hidden] { display:none !important; } .paia button, .paia input, .paia textarea {font:inherit; color:inherit;} .paia button {appearance:none; border:0; cursor:pointer; margin:0; background:none; -webkit-tap-highlight-color:transparent;} .paia button:disabled {cursor:default; opacity:.4;} .paia button:focus-visible,.paia input:focus-visible,.paia textarea:focus-visible {outline:2px solid var(--focus);outline-offset:-3px;} .paia button svg {width:17px;height:17px;display:block; flex:none;} .paia .ps-anchor {position:absolute;inset:0; width:48px;height:48px;border:1px solid var(--border);border-radius:50%;background:var(--surface);box-shadow:var(--anchor-shadow);z-index:4;pointer-events:auto;padding:0;} .paia .ps-anchor:hover {background:var(--hover);} .paia .ps-anchor:active {background:var(--pressed);} .paia .ps-anchor:focus-visible {outline-offset:3px;} .paia .ps-anchor svg {position:absolute;left:-1px;top:-1px;width:48px;height:48px;overflow:visible;} .paia .ps-rear {transform:translate(var(--rear-x),var(--rear-y));transition:transform var(--speed) var(--ease);} .paia .ps-rear-a {stop-color:var(--rear-a);stop-opacity:var(--rear-alpha-a);} .paia .ps-rear-b {stop-color:var(--rear-b);stop-opacity:var(--rear-alpha-b);} .paia .ps-front-a {stop-color:var(--front-a);stop-opacity:var(--front-alpha-a);} .paia .ps-front-b {stop-color:var(--front-b);stop-opacity:var(--front-alpha-b);} .paia .ps-edge-a {stop-color:var(--edge-a);stop-opacity:var(--edge-alpha-a);} .paia .ps-edge-b {stop-color:var(--edge-b);stop-opacity:var(--edge-alpha-b);} .paia[data-mode=capsule] {--rear-x:-5px;} .paia[data-mode=board] {--rear-x:-5.25px;--rear-y:-1.5px;} .paia .ps-capsule {position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 80ms linear;} .paia .ps-capsule-shape {position:absolute;left:-224px;top:0;width:272px;height:48px;overflow:visible;filter:drop-shadow(0 3px 7px #17253e0c);} .paia .ps-capsule-shape path {fill:var(--surface);stroke:var(--border);stroke-width:1;} .paia .ps-use-capsule {position:absolute;right:54px;top:2px;width:216px;height:44px;padding:0 16px;pointer-events:none;border-radius:22px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .paia .ps-use-capsule:hover {background:var(--hover);} .paia .ps-use-capsule:active {background:var(--pressed);} .paia[data-mode=capsule] .ps-capsule {opacity:1;visibility:visible;} .paia[data-mode=capsule] .ps-use-capsule {pointer-events:auto;} .paia[data-mode=capsule] .ps-anchor {border-color:transparent;background:transparent;box-shadow:none;} .paia[data-mode=capsule] .ps-anchor:hover {background:var(--hover);border-color:var(--border);} .paia[data-mode=capsule] .ps-anchor:active {background:var(--pressed);} .paia .ps-board {position:absolute;right:34px;bottom:34px;width:336px;height:312px;border:1px solid var(--border);border-radius:18px;background:var(--surface);box-shadow:var(--panel-shadow);display:flex;flex-direction:column;overflow:hidden;pointer-events:none;visibility:hidden;opacity:0;transition:opacity 80ms linear;} .paia[data-mode=board] .ps-board {visibility:visible;opacity:1;pointer-events:auto;transition-duration:120ms;} .paia[data-mode=board] .ps-anchor {box-shadow:0 2px 5px #17253e07;} .paia .ps-header {height:43px;min-height:43px;display:flex;align-items:center;padding:0 7px 0 15px;gap:0;} .paia .ps-title {font-size:calc(12px * var(--text-scale));color:var(--muted);font-weight:500;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .paia .ps-icon-button {display:flex;align-items:center;justify-content:center;min-width:40px;height:40px;border-radius:10px;color:var(--muted);padding:0;} .paia .ps-icon-button:hover {background:var(--hover);color:var(--ink);} .paia .ps-icon-button:active {background:var(--pressed);} .paia .ps-header[data-search=true] {padding-left:5px;} .paia .ps-query {flex:1;min-width:0;background:none;border:0;outline:none;padding:8px 4px;height:40px;font-size:calc(13px * var(--text-scale));} .paia .ps-query::placeholder {color:var(--muted);} .paia input[type=search]::-webkit-search-cancel-button {-webkit-appearance:none;} .paia .ps-body {flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;} .paia .ps-list {margin:0;padding:0 12px 4px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--border) transparent;flex:1;min-height:0;} .paia .ps-row {height:calc(44px * var(--text-scale));min-height:44px;display:flex;position:relative;border-radius:9px;} .paia .ps-row + .ps-row::before {content:"";position:absolute;height:1px;background:var(--rule);top:0;left:4px;right:4px;pointer-events:none;} .paia .ps-row:hover,.paia .ps-row:focus-within {background:var(--hover);} .paia .ps-row:active {background:var(--pressed);} .paia .ps-row.ps-inserted,.paia .ps-use-capsule.ps-inserted {background:var(--success);} .paia .ps-row.ps-inserted::after {content:"✓";position:absolute;right:13px;top:50%;transform:translateY(-50%);font-size:14px;color:var(--focus);} .paia .ps-inserted .ps-row-more {opacity:0;} .paia .ps-row-use {flex:1;min-width:0;text-align:left;padding:0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:9px;} .paia .ps-row-more {display:flex;justify-content:center;align-items:center;width:36px;min-width:36px;padding:0;border-radius:9px;opacity:0;color:var(--muted);} .paia .ps-row:hover .ps-row-more,.paia .ps-row:focus-within .ps-row-more {opacity:1;} .paia .ps-empty {margin:auto 0;padding:25px 20px;color:var(--muted);font-size:calc(13px * var(--text-scale));line-height:1.8;text-align:center;} .paia .ps-pane {padding:4px 15px 14px;overflow:auto;overscroll-behavior:contain;flex:1;min-height:0;} .paia .ps-detail-text {margin:2px 0 12px;padding:12px;background:var(--hover);border-radius:10px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:calc(13px * var(--text-scale));line-height:1.7;user-select:text;} .paia .ps-action {display:block;text-align:left;width:100%;padding:10px 8px;min-height:44px;border-radius:9px;} .paia .ps-action:hover {background:var(--hover);} .paia .ps-actions-pair {display:flex;gap:4px;} .paia .ps-actions-pair .ps-action {text-align:center;width:50%;} .paia .ps-editor {overflow:auto;overscroll-behavior:contain;display:flex;flex-direction:column;padding:2px 15px 12px;flex:1;min-height:0;gap:8px;} .paia .ps-editor label {font-size:calc(12px * var(--text-scale));color:var(--muted);} .paia .ps-edit-text {width:100%;resize:none;background:var(--hover);border:1px solid var(--border);border-radius:10px;padding:10px 12px;line-height:1.65;flex:1;min-height:44px;} .paia .ps-edit-meta {font-size:calc(11px * var(--text-scale));color:var(--muted);min-height:18px;display:flex;justify-content:space-between;gap:8px;} .paia .ps-over {color:#ae4e44;} .paia .ps-footer {display:flex;justify-content:flex-end;gap:7px;flex-shrink:0;} .paia .ps-footer button {padding:0 13px;min-height:36px;border:1px solid var(--border);border-radius:9px;font-size:calc(12px * var(--text-scale));} .paia .ps-footer button:hover {background:var(--hover);} .paia .ps-footer .ps-primary {background:var(--ink);color:var(--surface);border-color:var(--ink);} .paia .ps-footer .ps-primary:hover {opacity:.88;} .paia .ps-notice {padding:5px 15px;font-size:calc(12px * var(--text-scale));line-height:1.6;color:var(--muted);margin:0;flex-shrink:0;max-height:80px;overflow:auto;} .paia .ps-guard {display:flex;flex-direction:column;justify-content:center;gap:12px;flex:1;padding:16px;overflow:auto;} .paia .ps-guard p {margin:0;} .paia .ps-guard p + p {font-size:12px;color:var(--muted);} .paia .ps-guard .ps-action {border:1px solid var(--border);text-align:center;} .paia .ps-sr {position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;} .paia[data-space=entry] .ps-board,.paia[data-space=entry] .ps-capsule {visibility:hidden;opacity:0;pointer-events:none;} .paia[data-space=entry] .ps-use-capsule {pointer-events:none;} .paia[data-space=entry] .ps-anchor {background:var(--surface);border-color:var(--border);box-shadow:var(--anchor-shadow);} .paia[data-space=hidden] {visibility:hidden;pointer-events:none;} .paia[data-space=hidden] .ps-anchor {pointer-events:none;} .paia[data-solid=true] {--rear-alpha-a:1;--rear-alpha-b:1;--front-alpha-a:1;--front-alpha-b:1;} @media (hover:none),(pointer:coarse) {.paia .ps-row-more {opacity:.65;}} @media (prefers-reduced-motion:reduce) {.paia * {transition:none !important;animation:none !important;}} .paia[data-reduce=true] * {transition:none !important;animation:none !important;} @media (prefers-reduced-transparency:reduce) {.paia {--rear-alpha-a:1;--rear-alpha-b:1;--front-alpha-a:1;--front-alpha-b:1;}} @media (forced-colors:active) {.paia {--surface:Canvas;--ink:CanvasText;--muted:CanvasText;--border:ButtonText;--hover:Canvas;--focus:Highlight;--rule:ButtonBorder;} .paia .ps-anchor,.paia .ps-board {border:1px solid ButtonText;box-shadow:none;} .paia .ps-glyph rect {fill:Canvas;stroke:ButtonText;stroke-width:1;forced-color-adjust:none;} .paia .ps-capsule-shape path {fill:Canvas;stroke:ButtonText;forced-color-adjust:none;} .paia .ps-row-more {opacity:1;} .paia .ps-row:focus-within {outline:1px solid Highlight;}} .paia[data-geometry=r3] {--capsule-width:272px;--board-width:336px;--board-height:328px;} .paia[data-geometry=r3] .ps-unified-skin { position:absolute;right:0;bottom:0;width:48px;height:48px;border:1px solid var(--border); border-radius:24px;background:var(--surface);box-shadow:var(--anchor-shadow); pointer-events:none;z-index:0; transition:width 80ms var(--ease),height 80ms var(--ease),border-radius 80ms var(--ease); } .paia[data-geometry=r3][data-mode=capsule][data-space=full] .ps-unified-skin { width:var(--capsule-width);transition-duration:120ms; } .paia[data-geometry=r3][data-mode=board][data-space=full] .ps-unified-skin { width:var(--board-width);height:var(--board-height);border-radius:18px 18px 24px 18px; box-shadow:var(--panel-shadow);transition-duration:120ms; } .paia[data-geometry=r3] .ps-anchor, .paia[data-geometry=r3] .ps-anchor:hover, .paia[data-geometry=r3] .ps-anchor:active {border-color:transparent;background:transparent;box-shadow:none;} .paia[data-geometry=r3] .ps-anchor::before {content:"";position:absolute;inset:3px;border-radius:50%;pointer-events:none;} .paia[data-geometry=r3] .ps-anchor:hover::before {background:var(--hover);} .paia[data-geometry=r3] .ps-anchor:active::before {background:var(--pressed);} .paia[data-geometry=r3] .ps-anchor:focus-visible {outline-offset:-4px;} .paia[data-geometry=r3] .ps-anchor svg {z-index:1;} .paia[data-geometry=r3] .ps-capsule { inset:auto 0 0 auto;width:48px;height:48px;border-radius:24px;overflow:hidden;z-index:1; visibility:hidden;opacity:0; transition:width 80ms var(--ease),opacity 80ms linear,visibility 0s linear 80ms; } .paia[data-geometry=r3][data-mode=capsule][data-space=full] .ps-capsule { width:var(--capsule-width);visibility:visible;opacity:1; transition:width 120ms var(--ease),opacity 80ms linear,visibility 0s; } .paia[data-geometry=r3] .ps-use-capsule { right:48px;top:0;width:calc(var(--capsule-width) - 48px);height:48px; padding:0 12px 0 16px;border-radius:24px 0 0 24px; } .paia[data-geometry=r3] .ps-board { right:0;bottom:0;z-index:2;border-color:transparent;background:transparent;box-shadow:none; border-radius:18px 18px 24px 18px; clip-path:inset(calc(100% - 48px) 0 0 calc(100% - 48px) round 24px); transition:clip-path 80ms var(--ease),opacity 80ms linear,visibility 0s linear 80ms; } .paia[data-geometry=r3][data-mode=capsule] .ps-board { clip-path:inset(calc(100% - 48px) 0 0 calc(100% - var(--capsule-width)) round 24px); } .paia[data-geometry=r3][data-mode=board][data-space=full] .ps-board { clip-path:inset(0px round 18px 18px 24px 18px); transition:clip-path 120ms var(--ease),opacity 120ms linear,visibility 0s; } .paia[data-geometry=r3] .ps-header { height:48px;min-height:48px;flex-shrink:0;padding:2px 55px 0 15px;position:relative; } .paia[data-geometry=r3] .ps-header::before { content:"";position:absolute;top:0;left:15px;right:15px;height:1px;background:var(--rule);pointer-events:none; } .paia[data-geometry=r3] .ps-header[data-search=true] {padding-left:5px;padding-right:55px;} .paia[data-geometry=r3] .ps-body:has(> .ps-list) {padding:7px 0;} .paia[data-geometry=r3] .ps-list {padding:0 12px;} .paia[data-geometry=r3] .ps-pane {padding-top:12px;} .paia[data-geometry=r3] .ps-editor {padding-top:14px;} .paia[data-geometry=r3] .ps-notice {max-height:72px;} .paia[data-geometry=r3][data-space=entry] .ps-capsule, .paia[data-geometry=r3][data-space=hidden] .ps-capsule {width:48px;visibility:hidden;opacity:0;} @media (prefers-reduced-motion:reduce) {.paia[data-geometry=r3] * {transition:none !important;}} .paia[data-geometry=r3][data-reduce=true] * {transition:none !important;} @media (forced-colors:active) {.paia[data-geometry=r3] .ps-unified-skin {background:Canvas;border:1px solid ButtonText;box-shadow:none;} .paia[data-geometry=r3] .ps-board,.paia[data-geometry=r3] .ps-anchor {border-color:transparent;background:transparent;box-shadow:none;} .paia[data-geometry=r3] .ps-anchor:focus-visible {outline:2px solid Highlight;}} :root{--v5-ink:#30352f;--v5-muted:#7b8179;--v5-rule:#e5e6df;--v5-blue:#607fc0} [hidden]{display:none!important} button,input,textarea{-webkit-tap-highlight-color:transparent} button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid #6486bf;outline-offset:4px} button{touch-action:manipulation} .hero-product-wrap{max-width:1120px;width:calc(100% - 120px)} .pd-demo{max-width:1120px;height:562px;border-radius:16px;box-shadow:0 28px 75px -35px #35456530,0 4px 12px #35456505;overflow:hidden} .pd-sidebar{background:#f7f8fb} .pd-reader{padding:26px 30px} .pd-reader h4{font-size:25px} .pd-context-body{padding-top:26px} .pd-context-note{line-height:1.8} .pd-context-card{border-radius:13px} .pd-context-card:nth-child(1){background:#f5f7fc} .pd-context-card:nth-child(2){background:#f9f6ee} .pd-context-card:nth-child(3){background:#eff5f0} .pd-context-card:nth-child(4){background:#f5f0f7} .pd-card-content span{color:#788394;font-size:12px} .pd-statusbar{min-height:33px;font-size:10px} .v5-reuse-link{width:294px;bottom:-25px;border-radius:999px;padding:10px 15px 10px 10px;gap:10px} .v5-reuse-link>div{max-width:200px} .v5-reuse-link small{font-size:10px;color:#8e99a9} .r3-glyph-placeholder{display:inline-block;width:48px;height:48px;flex:0 0 48px;position:relative;border:1px solid #dce0e7;border-radius:50%;background:#fff;box-shadow:0 2px 4px #17253e05,0 6px 18px #17253e0b} .r3-glyph-placeholder svg{width:48px;height:48px;position:absolute;inset:-1px} #archive{background:#fff;padding-top:95px;padding-bottom:110px} #archive .section-heading{margin-bottom:54px} .ax-scene{max-width:1160px;margin:auto;position:relative;isolation:isolate;padding:30px 36px 24px;border-radius:24px;border:1px solid #e3e8eb;background:radial-gradient(ellipse at 84% 20%,#d7e0ec85,transparent 63%),radial-gradient(ellipse at 13% 95%,#f9e3c960,transparent 55%),#f0f3f4;box-shadow:0 24px 60px #36465508} .ax-scene::before{content:"";position:absolute;inset:10px;border:1px solid #ffffff90;border-radius:16px;pointer-events:none;z-index:-1} .ax-top{display:flex;justify-content:space-between;gap:20px;align-items:center;color:#758598;font-size:10px;letter-spacing:.12em;margin:0 7px 29px} .ax-top>span:first-child{display:flex;align-items:center;gap:10px} .ax-top i{width:6px;height:6px;background:#8ea9ce;border-radius:50%;display:inline-block} .ax-top b{font-size:17px;font-weight:400;margin-left:10px} .ax-layout{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;align-items:start} .ax-find{padding:18px 0 5px 16px;min-width:0} .ax-find>label{font-size:14px;color:#7b8794;display:block;margin-bottom:23px} .ax-search{display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid #aebfd3} .ax-search svg{width:23px;height:23px;stroke:#7089a9;stroke-width:1.35;fill:none;flex-shrink:0} .ax-search input{min-width:0;width:100%;font-family:var(--serif);font-size:33px;letter-spacing:-.03em;color:#4c6688;background:transparent;border:0;border-radius:0;outline:0;padding:0;line-height:1.5;-webkit-appearance:none} .ax-search input::-webkit-search-cancel-button{display:none} .ax-search input::placeholder{color:#9eafbf;font-size:19px} .ax-search button{width:30px;height:30px;flex-shrink:0;border-radius:50%;font-size:20px;color:#8598af;background:#ffffff60} .ax-result-count{font-size:10px;color:#94a0aa;margin:29px 0 12px;letter-spacing:.04em} .ax-results{display:flex;flex-direction:column;gap:10px;min-height:246px} .ax-result{width:100%;text-align:left;background:#f9fbfc9e;border:1px solid #ffffffa0;border-radius:12px;padding:17px 18px;transition:.2s;position:relative} .ax-result:hover{background:#fff;transform:translateX(3px)} .ax-result.is-active{background:#fff;border-color:#becde0;box-shadow:0 7px 22px #7790b316} .ax-result strong{font-size:14px;font-weight:500;color:#5c6e86;line-height:1.6;display:block} .ax-result p{font-size:12px;line-height:1.85;color:#8b97a5;margin-top:7px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .ax-result mark{background:#f0e5bf;color:#576477;border-radius:2px;padding:0 2px} .ax-find-bottom{font-size:13px;color:#8c97a0;line-height:1.8;margin:29px 0 0;padding-left:32px;position:relative} .ax-find-bottom>span{position:absolute;left:0;top:2px;color:#b1a482;font-size:26px} .ax-reading-wrap{position:relative;min-width:0;padding:0 7px 18px 0;isolation:isolate} .ax-reading-wrap::before,.ax-reading-wrap::after{content:"";position:absolute;inset:10px 0 6px 8px;border:1px solid #e1e3e4;background:#f9faf9;border-radius:14px;transform:rotate(1.3deg);z-index:-1} .ax-reading-wrap::after{inset:7px 4px 11px 4px;transform:rotate(-.65deg);background:#fdfcf9} .ax-reading{min-height:563px;background:#fffefb;border:1px solid #e5e6e2;border-radius:13px;padding:32px 35px 26px;box-shadow:0 22px 42px #4b5b7011;display:flex;flex-direction:column} .ax-margin-note{position:absolute;right:25px;bottom:-16px;font-family:Instrument,Georgia,serif;font-style:italic;font-size:19px;color:#8b9cb3;transform:rotate(-4deg);z-index:2} .ax-bottom{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #dae1e6;padding-top:22px;margin:32px 10px 0;font-size:11px;color:#8a979f} .ax-bottom>span:first-child{letter-spacing:.13em;font-size:10px} .ax-bottom i{font-size:17px;font-style:normal;color:#97a9bb;margin-left:9px} .reuse-card{grid-column:span 12;display:grid;grid-template-columns:.75fr 1.25fr;align-items:center;gap:44px;min-height:660px;padding:37px 40px 28px;background:radial-gradient(ellipse at 0 35%,#f1f4fc,transparent 65%),#e9eef6} .reuse-card .mosaic-copy{padding:0 0 38px 10px} .reuse-card .mosaic-copy h3{font-size:49px;line-height:1.4} .reuse-card .mosaic-copy>p{font-size:14px;line-height:1.95} .r3-showcase{min-width:0} .r3-demo-controls{display:flex;justify-content:flex-end;gap:5px;margin-bottom:15px} .r3-demo-controls button{font-size:10px;padding:7px 14px;border-radius:999px;color:#8290a5;background:transparent;border:1px solid transparent} .r3-demo-controls button[aria-pressed=true]{border-color:#d1dbe8;background:#f8faff;color:#627eaa} .r3-host{position:relative;height:552px;background:#fff;border:1px solid #f6f8fc;border-radius:17px;box-shadow:0 12px 38px #64768b0e;min-width:0;overflow:hidden} .r3-host-top{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:21px 22px;font-size:12px;color:#666f7a} .r3-host-top i{font-style:normal;color:#a3a9b4} .r3-host-top>span:last-child{font-size:10px;color:#a3acba} .r3-host-question{position:absolute;top:80px;left:0;right:0;text-align:center;font-size:17px;color:#a7b0bc;font-family:var(--serif)} .r3-composer{position:absolute;left:22px;right:22px;bottom:21px;border:1px solid #e4e8ee;border-radius:23px;background:#fff;box-shadow:0 3px 12px #34476606;padding:14px 16px 11px} .r3-composer textarea{display:block;width:100%;min-height:50px;max-height:90px;resize:none;border:0;background:transparent;padding:0;font:13px/1.8 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#5d6776;outline:none} .r3-composer textarea::placeholder{color:#a7afbb} .r3-composer:focus-within{border-color:#9eb0ca;box-shadow:0 0 0 3px #8c9fbe0a} .r3-composer-bottom{display:flex;justify-content:space-between;align-items:center;color:#99a3b2;font-size:9px;gap:10px} .r3-composer-bottom>span:first-child{font-size:23px} .r3-composer-bottom>span:last-child{display:flex;gap:10px;align-items:center} .r3-composer-bottom i{font-style:normal;display:grid;place-items:center;width:26px;height:26px;font-size:18px;border-radius:50%;background:#eff2f6;color:#95a1b5} .r3-demo-note{text-align:center;font-size:10px;color:#8b98ac;line-height:1.8;margin-top:14px} .original-card{grid-column:span 7;min-height:540px} .private-card{grid-column:span 5;min-height:540px} .flow-card{grid-column:span 12;min-height:320px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:45px} .flow-card .flow-scene{margin-top:0;max-width:440px;width:100%;justify-self:end} .r3-host .paia{line-height:1.55;font-size:13px} .r3-host .paia .ps-title{font-size:11px} .r3-host .paia .ps-row-use{font-size:12px} .context-switch{position:relative} .context-switch::before{content:"";position:absolute;inset:-11px -6px} .pd-toggle{position:relative} .pd-toggle::before{content:"";position:absolute;inset:-10px -7px} .context-card-bottom,.context-access{font-size:10px} .story-copy p{max-width:520px;margin-left:auto;margin-right:auto} @keyframes v5-content-in{from{opacity:.5;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}} @media (max-width:1100px){.hero-product-wrap{width:calc(100% - 60px)} .pd-sidebar{width:146px;flex-basis:146px} .pd-reader{padding:25px} .ax-layout{gap:32px;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)} .ax-scene{padding:26px} .ax-find{padding-left:5px} .ax-reading{padding:27px;min-height:540px} .reuse-card{gap:26px;padding:30px;grid-template-columns:.7fr 1.3fr} .reuse-card .mosaic-copy h3{font-size:42px} .reuse-card .mosaic-copy>p{font-size:12px} .r3-host{height:555px}} @media (max-width:850px){.hero-product-wrap{width:calc(100% - 38px)} .pd-demo{height:570px} .pd-sidebar{width:132px;flex-basis:132px;padding-left:9px;padding-right:9px} .pd-brand{font-size:18px;padding:0 8px} .pd-tab{font-size:11px!important;padding:9px!important;gap:7px} .pd-sidebar-note{font-size:8px;white-space:normal} .pd-reader{padding:23px 22px} .pd-reader h4{font-size:22px} .ax-scene{padding:24px 22px} .ax-layout{gap:25px;grid-template-columns:.82fr 1.18fr} .ax-reading{padding:25px 22px;min-height:570px} .ax-find-bottom{font-size:11px} .ax-result{padding:13px} .ax-search input{font-size:28px} .ax-result strong{font-size:13px} .ax-result p{font-size:11px} .reuse-card{display:block;padding:35px} .reuse-card .mosaic-copy{padding:0} .reuse-card .mosaic-copy h3{font-size:40px} .reuse-card .mosaic-copy>p{font-size:13px} .r3-showcase{margin-top:20px} .r3-host{height:550px} .r3-host-question{top:80px} .r3-host .paia .ps-row-use{font-size:13px} .original-card,.private-card{grid-column:span 6;min-height:560px;padding:30px 24px} .private-card .mosaic-copy{max-width:100%} .privacy-art{bottom:-40px;right:-70px;transform:scale(.9)} .flow-card{display:grid;grid-template-columns:.85fr 1.15fr;gap:24px;padding:35px 27px} .mosaic-copy h3{font-size:34px}} @media (max-width:620px){.hero-product-wrap{width:calc(100% - 26px)} .pd-demo{height:auto;min-height:530px;border-radius:12px} .pd-app{display:block} .pd-sidebar{width:100%;padding:11px 12px 9px;border-right:0;border-bottom:1px solid #e6eaf1;display:block} .pd-brand,.pd-sidebar-note{display:none} .pd-nav{display:flex;gap:8px;justify-content:center} .pd-tab{width:auto;min-height:35px;padding:8px 10px!important;font-size:11px!important;border-radius:999px;justify-content:center} .pd-tab .pd-icon{width:14px;height:14px} .pd-titlebar{height:34px;flex-basis:34px;padding:0 12px} .pd-window-title{font-size:7px;letter-spacing:.09em} .pd-demo-badge{font-size:8px} .pd-window-dots{gap:4px} .pd-window-dots span{width:5px;height:5px} .pd-split{display:block} .pd-reader{padding:22px 20px;max-height:none;overflow:visible} .pd-reader h4{font-size:24px} .pd-statusbar{font-size:8px;flex-wrap:wrap;gap:5px;padding:9px 12px} .pd-status-right{font-size:8px} .pd-archive-nav{width:100%;border-right:0;border-bottom:1px solid #e6eaf1;padding:17px 15px;max-height:none} .pd-archive-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .pd-archive-label{padding:13px 4px 8px} .pd-archive-item{margin:0!important;padding:9px 10px!important} .pd-archive-item strong{font-size:10px!important} .pd-archive-item small{font-size:9px!important} .pd-context-body{padding:20px 15px} .pd-context-grid{grid-template-columns:1fr 1fr;gap:12px} .pd-context-card{padding:16px 13px;min-height:178px} .pd-card-top h4{font-size:16px!important} .pd-card-top p{font-size:8px!important} .pd-card-top>.pd-icon{width:17px;height:17px} .pd-card-content{min-height:50px} .pd-card-content span{font-size:10px;line-height:1.8} .pd-card-bottom{font-size:9px} .v5-reuse-link{bottom:-32px;right:3px;transform:none;width:267px;padding:7px 12px 7px 7px;gap:8px} .v5-reuse-link div>span{font-size:11px} .v5-reuse-link small{font-size:9px} .v5-reuse-link .r3-glyph-placeholder{width:40px;height:40px;flex-basis:40px} .v5-reuse-link .r3-glyph-placeholder svg{width:40px;height:40px} #archive{padding:62px 16px 60px} .section-heading .section-description{font-size:13px} .ax-scene{padding:22px 16px 20px;border-radius:17px} .ax-top{font-size:8px;letter-spacing:.07em;margin:0 4px 22px} .ax-top>span:last-child{font-size:9px} .ax-top b{margin-left:4px} .ax-layout{display:flex;flex-direction:column;gap:22px} .ax-find{width:100%;padding:0 4px} .ax-find>label{font-size:12px;margin-bottom:12px} .ax-search{padding-bottom:10px;gap:10px} .ax-search input{font-size:29px} .ax-search svg{width:20px;height:20px} .ax-result-count{font-size:9px;margin:20px 0 10px} .ax-results{min-height:0;display:flex;flex-direction:column;gap:8px} .ax-result{padding:12px 14px} .ax-result p{font-size:11px;-webkit-line-clamp:1;margin-top:3px} .ax-find-bottom{display:none} .ax-reading-wrap{width:100%;padding:0 4px 14px 0} .ax-reading{min-height:430px;padding:24px 23px 22px} .ax-margin-note{font-size:16px;bottom:-8px;right:19px} .ax-bottom{margin-top:23px;padding-top:18px;font-size:9px;line-height:1.7;gap:12px} .ax-bottom>span:first-child{font-size:8px;letter-spacing:.05em} .ax-bottom>span:last-child{max-width:135px} .ax-bottom i{font-size:12px;margin-left:3px} .feature-mosaic{display:flex;flex-direction:column;gap:20px} .reuse-card{display:block;padding:28px 18px 23px;min-height:0} .reuse-card .mosaic-copy{padding:0 6px} .reuse-card .mosaic-copy h3{font-size:36px} .reuse-card .mosaic-copy>p{font-size:12px} .r3-showcase{margin-top:20px} .r3-demo-controls{margin-bottom:12px;justify-content:center} .r3-demo-controls button{padding:7px 15px;font-size:10px} .r3-host{height:551px;border-radius:12px} .r3-host-top{padding:17px 14px;font-size:11px} .r3-host-top>span:last-child{font-size:9px} .r3-host-question{top:76px;font-size:16px} .r3-composer{left:12px;right:12px;bottom:15px;padding:13px 13px 9px;border-radius:20px} .r3-composer textarea{font-size:12px;min-height:56px} .r3-demo-note{font-size:9px;padding:0 6px} .r3-host .paia .ps-row-use{font-size:12px} .r3-host .paia .ps-title{font-size:10px} .r3-host .paia .ps-header{padding-left:11px;padding-right:51px} .original-card,.private-card{min-height:490px;padding:30px 27px} .flow-card{display:block;min-height:510px;padding:30px 27px} .flow-card .flow-scene{margin-top:32px} .flow-card .mosaic-copy h3{font-size:34px} .context-card-bottom,.context-access{font-size:8px}} @media (prefers-reduced-motion:reduce){.ax-result{transition:none}} .skip-link{top:-100px;transform:none!important} .skip-link:focus-visible{top:10px} .ax-result p{color:#78899e} .ax-result strong{color:#536a89} .r3-glyph-placeholder{--rear-a:#93a2be;--rear-b:#8192b1;--front-a:#899bb9;--front-b:#667c9f;--edge-a:#fff;--edge-b:#7185a6} .r3-glyph-placeholder .ps-rear{transform:translate(-2.5px,0)} .r3-glyph-placeholder .ps-rear-a{stop-color:var(--rear-a);stop-opacity:.27} .r3-glyph-placeholder .ps-rear-b{stop-color:var(--rear-b);stop-opacity:.37} .r3-glyph-placeholder .ps-front-a{stop-color:var(--front-a);stop-opacity:.36} .r3-glyph-placeholder .ps-front-b{stop-color:var(--front-b);stop-opacity:.55} .r3-glyph-placeholder .ps-edge-a{stop-color:var(--edge-a);stop-opacity:.92} .r3-glyph-placeholder .ps-edge-b{stop-color:var(--edge-b);stop-opacity:.30} :root{--v6-ink:#2f3338;--v6-secondary:#666d76;--v6-blue:#6284cd;--v6-ease:cubic-bezier(.22,.68,0,1)} .hero-description{color:#696b64} .hero-actions .pill{transition:background .22s,box-shadow .22s,transform .22s} .hero-actions .pill:hover{transform:translateY(-2px);box-shadow:0 12px 24px #6284cd22} .footer-top nav a{transition:color .2s} .compatibility{color:#7d7e75} .demo-footnote{color:#787e80} #archive .section-description{color:#737d83} .ax-find>label{color:#64768a} .ax-result p{color:#68798d} #reuse .mosaic-copy>p{color:#70766f} .use-story>p:not(.mini-label){color:#87756f} .story-copy p{color:#74786e} .simple-steps p{color:#8c776f} .release-note{color:#807d71} .pd-reader,.pd-context-body{font-family:var(--sans)} .skip-link{position:fixed!important;top:10px!important;left:16px!important;width:1px;height:1px;padding:0;clip-path:inset(50%);overflow:hidden;white-space:nowrap;transform:none!important} .skip-link:focus-visible{width:auto;height:auto;clip-path:none;overflow:visible;padding:10px 18px;background:#fff;border-radius:8px;box-shadow:0 4px 24px #28406020} #thoughts.craft-study-section{--cl-ink:#303a3b;--cl-muted:#66777b;background:#fbfaf7;padding:104px 32px 85px;position:relative;overflow:hidden;color:var(--cl-ink)} .cl-intro{max-width:1232px;margin:0 auto 46px} .cl-overline{font-size:10px;letter-spacing:.13em;display:flex;align-items:center;gap:14px;color:#657484} .cl-section-number{font-family:Instrument,Georgia,serif;font-size:24px;letter-spacing:0;color:#6581af} .cl-hairline{height:1px;background:#dfe2e0;flex:1;margin:0 22px} .cl-overline em{font-family:Instrument,Georgia,serif;font-size:23px;letter-spacing:0;color:#8291a1;font-weight:400} .cl-intro-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(250px,.6fr);gap:48px;align-items:end;margin-top:30px} .cl-intro h2{font-family:var(--serif);font-size:clamp(50px,5.7vw,84px);font-weight:400;line-height:1.25;letter-spacing:-.05em;color:#313c3b} .cl-intro h2>span{color:#637fa1} .cl-intro-copy{padding-bottom:7px} .cl-intro-copy p{font-size:15px;line-height:1.95;color:#5f6e72} .cl-intro-copy p+p{font-size:12px;line-height:1.9;color:#7b888b;margin-top:14px} #thoughts #ed-cover-title{font-family:var(--serif);font-size:clamp(28px,2.5vw,38px);font-weight:400;letter-spacing:-.04em;line-height:1.4;margin:13px 0 7px;max-width:100%;color:#364a49;white-space:normal} #thoughts #lx-chapters{display:flex;gap:12px;justify-content:space-between;align-items:stretch} #lx-origins{display:grid;grid-template-columns:1fr;gap:9px} .cl-afterword{max-width:1232px;margin:34px auto 0;display:flex;align-items:center;justify-content:space-between;gap:30px} .cl-afterword>p{font-family:var(--serif);font-size:27px;line-height:1.6;letter-spacing:-.03em;color:#6b7c7e} .cl-afterword>p span{color:#8094a6} .cl-afterword>div{text-align:right;display:grid;gap:10px;font-size:11px;color:#788587} .cl-afterword small{font-size:9px;color:#879293} #thoughts button:focus-visible,#thoughts [tabindex="0"]:focus-visible{outline:2px solid #6284cd;outline-offset:4px} #thoughts textarea:focus-visible{outline:2px solid #6284cd;outline-offset:3px} @media (max-width:1100px){#thoughts.craft-study-section{padding-left:24px;padding-right:24px} .cl-intro-grid{gap:28px;grid-template-columns:1.4fr .7fr} .cl-intro-copy p{font-size:13px} .cl-intro-copy p+p{font-size:11px} #thoughts #ed-cover-title{font-size:32px}} @media (max-width:760px){#thoughts.craft-study-section{padding:72px 20px 60px} .cl-intro{margin-bottom:28px} .cl-intro-grid{display:block;margin-top:24px} .cl-intro h2{font-size:clamp(39px,7.8vw,62px)} .cl-intro-copy{margin-top:23px;display:flex;gap:20px;align-items:start} .cl-intro-copy p{font-size:13px} .cl-intro-copy p+p{margin:0;font-size:11px} .cl-overline{font-size:8px;gap:10px;letter-spacing:.07em} .cl-section-number{font-size:21px} .cl-hairline{margin-inline:5px} .cl-overline em{font-size:18px} #thoughts #ed-cover-title{font-size:32px;margin:12px 0 7px} #thoughts #lx-chapters{gap:4px} .cl-afterword{margin-top:25px;display:block} .cl-afterword>p{font-size:25px;line-height:1.65} .cl-afterword>div{margin-top:20px;text-align:left;gap:7px;font-size:10px} .cl-afterword small{font-size:9px}} @media (max-width:380px){#thoughts.craft-study-section{padding-inline:14px} .cl-intro-copy{display:block} .cl-intro-copy p+p{display:none} .cl-overline em{font-size:17px} .cl-overline{gap:8px;font-size:7px} .cl-hairline{max-width:35px} #thoughts #ed-cover-title{font-size:28px} .cl-afterword>p{font-size:22px}} @keyframes cl-page-arrive{from{opacity:.45;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}} @keyframes cl-cover-arrive{from{opacity:.5}to{opacity:1}} @media (prefers-reduced-motion:reduce){#thoughts *,#thoughts *:before,#thoughts *:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}} @media (min-width:1000px){#archive>.section-heading{display:grid;grid-template-columns:1.2fr .75fr;gap:0 68px;align-items:end;text-align:left;max-width:1160px;margin-bottom:40px} #archive>.section-heading>.eyebrow{grid-column:1/-1;margin-bottom:23px} #archive>.section-heading>h2{font-size:clamp(52px,5.1vw,76px)} #archive>.section-heading>.section-description{margin:0 0 8px;font-size:15px;line-height:2} #reuse>.section-heading{display:flex;flex-direction:column;align-items:flex-start;text-align:left;max-width:1160px;margin-bottom:43px} #reuse>.section-heading h2{font-size:clamp(52px,5vw,72px)} #reuse>.section-heading h2 br{display:none} #reuse>.section-heading>.eyebrow{margin-bottom:22px}} #thoughts,#library-gallery,#lx-reader{scroll-margin-top:116px} @media (max-width:569px){.cl-intro-copy{display:block} .cl-intro-copy p{font-size:13px;line-height:1.95} .cl-intro-copy p+p{display:none} .cl-intro{margin-bottom:31px}} .v8-library {max-width:1240px;margin:auto;color:#293649;--ui-muted:#758296;--ui-blue:#567db9;--ui-edge:#e5eaf1;font-family:var(--sans)} .v8-library-stage {position:relative;padding:40px 42px 28px;border:1px solid #e4e9f1;border-radius:24px;background:radial-gradient(ellipse at 8% 3%,#fff7e9 0,transparent 48%),radial-gradient(ellipse at 95% 85%,#e5ecfc 0,transparent 52%),#f4f7fa;box-shadow:0 28px 65px -35px #46608134;isolation:isolate} .v8-topic-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-bottom:26px} .v8-topic-card {position:relative;min-width:0;background:#fffffff2;border:1px solid #e0e6ef;border-radius:17px;padding:20px 22px 19px;box-shadow:0 5px 16px #5b739008;transition:border-color .18s,box-shadow .18s,background .18s} .v8-topic-card.is-current {border-color:#a9bfdf;box-shadow:0 6px 24px #6d8db515;background:#fff} .v8-topic-card:hover {border-color:#a9bfdf;box-shadow:0 7px 22px #6583ac14} .v8-topic-title {display:block;text-align:left;font-size:19px;letter-spacing:-.025em;font-weight:500;line-height:1.5;color:#2d3a50;margin-bottom:13px;max-width:100%;padding:0} .v8-topic-title:hover {color:#476ba7} .v8-topic-card nav {display:flex;flex-direction:column;align-items:flex-start;gap:1px} .v8-topic-card nav button {font-size:13px;color:#6b798c;min-height:31px;padding:5px 0;text-align:left;line-height:1.6;transition:color .15s} .v8-topic-card nav button:hover,.v8-topic-card nav button[aria-current=true] {color:#426aa3} .v8-topic-reader {background:#fff;border:1px solid #e3e8f0;border-radius:18px;overflow:hidden;box-shadow:0 18px 44px -24px #405e8c33} .v8-reader-head {display:flex;justify-content:space-between;align-items:center;gap:22px;padding:22px 29px;border-bottom:1px solid #e9edf3;min-height:80px} .v8-reader-head h3 {font-family:var(--sans);font-size:22px;font-weight:500;letter-spacing:-.035em;line-height:1.45;color:#2b384c} .v8-reader-actions {display:flex;align-items:center;gap:16px;flex-shrink:0} .v8-order {font-size:11px;color:#778397;min-height:36px;white-space:nowrap} .v8-order:hover {color:#456da7} .v8-order[hidden]{display:none!important} .v8-organize {display:flex;align-items:center;gap:9px;padding:8px 12px;min-height:38px;border-radius:10px;border:1px solid #e4e9f2;background:#f9fbfe;color:#597ba9;font-size:12px;white-space:nowrap;transition:background .2s,border-color .2s} .v8-organize>span {font-size:19px;line-height:1} .v8-organize>i {width:22px;height:13px;border-radius:12px;background:#cfd7e3;position:relative;display:block} .v8-organize>i:after {content:"";position:absolute;height:9px;width:9px;top:2px;left:2px;background:#fff;border-radius:50%;box-shadow:0 1px 3px #0001;transition:transform .18s} .v8-organize[aria-checked=true] {background:#eff4fe;border-color:#c7d6ed} .v8-organize[aria-checked=true]>i {background:#6d8ec8} .v8-organize[aria-checked=true]>i:after {transform:translateX(9px)} .v8-reader-body {display:grid;grid-template-columns:181px minmax(0,1fr);align-items:stretch} .v8-section-nav {border-right:1px solid #edf0f5;background:#fcfdff;padding:26px 15px;display:flex;flex-direction:column;gap:7px;align-items:stretch} .v8-section-nav button {text-align:left;line-height:1.65;padding:11px 13px;font-size:13px;border-radius:8px;min-height:42px;color:#7b8798;transition:background .16s,color .16s} .v8-section-nav button:hover {background:#f2f6fc;color:#486995} .v8-section-nav button[aria-current=true] {background:#edf3fc;color:#4c70a5} .v8-prose-wrap {padding:31px clamp(28px,4vw,58px) 29px;min-width:0;max-width:960px;width:100%;margin:auto} .v8-prose-wrap h4 {font-family:var(--sans);font-size:22px;font-weight:500;line-height:1.55;letter-spacing:-.025em;color:#34415a;margin:0 0 22px} .v8-prose {font-size:16px;line-height:1.65;color:#445269} .v8-entry + .v8-entry {margin-top:24px} .v8-entry time {display:block;font-size:11.5px;line-height:1.6;color:#8390a2;margin-bottom:7px;white-space:normal} .v8-entry-body {white-space:pre-wrap;overflow-wrap:anywhere;min-height:1.65em;border:0;outline:none;padding:0;border-radius:2px;line-height:1.65} .v8-entry-body:focus {outline:1px solid #b9cbe9;outline-offset:7px} .v8-prose h5 {font-size:17px;font-weight:500;color:#344b70;margin:25px 0 9px;line-height:1.55} .v8-prose h5:first-child {margin-top:0} .v8-prose .v8-ai-block {white-space:pre-line;line-height:1.8;overflow-wrap:anywhere} .v8-ai-label {font-size:10px;line-height:1.6;color:#7c8ea9;display:block;margin-bottom:15px} .v8-ai-note {font-size:12px;color:#7b899d;line-height:1.7;padding:10px 14px;background:#f5f8fd;border-radius:8px;margin-bottom:18px} .v8-writing-end {min-height:34px;font-size:15px;color:#465871;line-height:1.7;margin-top:25px;border-top:1px solid #eef1f6;padding:17px 0 0;outline:none;white-space:pre-wrap;overflow-wrap:anywhere} .v8-writing-end:empty:before,.v8-edit-add:empty:before {content:attr(data-placeholder);color:#99a4b3;pointer-events:none;font-size:13px} .v8-writing-end:focus {border-top-color:#a8bfdf} .v8-edit-state {display:block;min-height:16px;color:#8092ad;font-size:10px;margin-top:10px} .v8-stage-foot {display:flex;justify-content:space-between;gap:18px;align-items:center;padding-top:23px;color:#8b99aa;font-size:9px;letter-spacing:.12em} .v8-stage-foot>span:last-child {font-family:Instrument,Georgia,serif;font-size:24px;letter-spacing:-.02em;font-style:italic;color:#98a5b6} .v8-library button:focus-visible,.v8-hero-library button:focus-visible {outline:2px solid #7696c7;outline-offset:3px} .v8-hero-library {width:100%;min-width:0;flex:1;overflow:auto;padding:29px 28px;background:linear-gradient(145deg,#fff,#fbfcff);scrollbar-width:thin} .v8-hero-library .v8-topic-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:0;align-items:start} .v8-hero-library .v8-topic-card {padding:18px 19px 15px;background:#fff} .v8-hero-library .v8-topic-title {font-size:17px;margin-bottom:10px} .v8-hero-library .v8-topic-card nav button {font-size:12px;min-height:30px} .v8-hero-back {color:#6683af;font-size:11px;min-height:30px;margin-bottom:13px} .v8-hero-reader-head {display:flex;gap:12px;justify-content:space-between;align-items:center;border-bottom:1px solid #e8edf4;padding-bottom:15px} .v8-hero-reader-head h4 {font-size:21px;line-height:1.45;font-family:var(--sans);font-weight:500;letter-spacing:-.025em;color:#33465e} .v8-hero-chapters {display:flex;gap:17px;margin:14px 0 21px;border-bottom:1px solid #e9edf5;overflow-x:auto} .v8-hero-chapters button {font-size:11px;line-height:1.6;padding:9px 0 10px;white-space:nowrap;border-bottom:1px solid transparent;color:#78859b;min-height:36px} .v8-hero-chapters button[aria-current=true] {color:#557ab1;border-color:#7392c3} .v8-hero-prose {font-size:14px;line-height:1.65;color:#47576d} .v8-hero-prose .v8-entry time {font-size:10px} .v8-hero-prose .v8-entry+.v8-entry {margin-top:20px} .v8-hero-prose h5 {font-weight:500;color:#3b5479;font-size:15px;margin:16px 0 9px} .v8-hero-library .v8-organize {min-height:34px;font-size:10px;gap:6px;padding:5px 9px} .v8-hero-library .v8-ai-block {white-space:pre-line} .pd-archive-nav .v8-project {border:0;margin-top:6px;padding:0} .v8-project summary {cursor:pointer;min-height:37px;padding:9px 5px;font-size:12px;color:#596c86;line-height:1.6;list-style:none;display:flex;gap:8px;align-items:center} .v8-project summary:before {content:"›";font-size:17px;color:#94a5bc;transition:transform .18s} .v8-project[open]>summary:before {transform:rotate(90deg)} .v8-project .pd-archive-item {margin-left:9px;width:calc(100% - 9px);padding:9px 10px} .pd-archive-item strong {font-weight:400!important;font-size:12px!important} .pd-archive-item small {color:#8b99ad!important;line-height:1.65!important} .v8-archive-head {display:flex;align-items:center;gap:12px;justify-content:space-between;border-bottom:1px solid #e9edf3;padding-bottom:17px;margin-bottom:25px} .v8-archive-head h3,.v8-archive-head h4 {font-family:var(--sans);font-weight:500;letter-spacing:-.025em;font-size:22px;color:#374860;line-height:1.55} .v8-archive-actions {display:flex;gap:12px;align-items:center;flex-shrink:0} .v8-archive-prose {font-size:16px;color:#47566b;line-height:1.65} #ax-reading .v8-archive-prose {padding-top:0} #ax-reading .v8-entry-body:focus {outline-offset:5px} .v8-archive-copy {min-height:36px;font-size:11px;color:#6483b1;padding:5px 9px;border-radius:7px} .v8-archive-copy:hover {background:#eff4fc} .ax-results{max-height:390px;overflow:auto;scrollbar-width:thin;min-height:210px} .ax-result{border-radius:4px;border:none;border-bottom:1px solid #dbe3ee;background:transparent;box-shadow:none;padding:16px 12px;transform:none!important} .ax-result.is-active {border-color:#c9d8eb;background:#ffffffb3;box-shadow:inset 2px 0 #88a7cf;border-radius:4px} .ax-result strong{font-size:14px;font-weight:400;color:#455973} .ax-result p{font-size:10px;color:#8795a8;margin-top:8px;-webkit-line-clamp:1} .ax-reading{min-height:390px;transform:none!important;background:#fff} .v8-search-empty{padding:26px 12px;line-height:1.9;font-size:13px;color:#7a8ba1} .v8-edit-example{background:#fffdfd;border:1px solid #e9dfe3;border-radius:13px;margin:31px 0 0 12px;padding:25px 28px;box-shadow:0 18px 45px -22px #75556424;min-height:260px;transform:rotate(-1deg)} .v8-mini-doc-head{display:flex;justify-content:space-between;color:#9a8690;font-size:11px;border-bottom:1px solid #efe9ec;padding-bottom:17px;margin-bottom:23px} .v8-edit-example time{font-size:11px;color:#a3929a} .v8-edit-example p{font-family:var(--serif);font-size:27px;color:#725c69;line-height:1.7;margin-top:8px;outline:none} .v8-edit-example p:focus{outline:1px solid #c7b6bf;outline-offset:6px} .v8-mini-rule{width:35px;background:#dfd1d9;height:1px;margin:22px 0} .v8-edit-add{font-size:14px;color:#756470;line-height:1.8;outline:none;white-space:pre-wrap;min-height:30px} .v8-edit-example-status{font-size:10px;color:#9a8792;display:block;min-height:15px;margin-top:8px} .v8-context-title{font:inherit;letter-spacing:inherit;text-align:left;color:inherit;padding:0;line-height:inherit} .v8-context-directory{display:grid;gap:6px} .v8-context-directory>button{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:34px;width:100%;text-align:left;padding:4px 0;color:#78879a;font-size:12px;line-height:1.7} .context-card.rules .v8-context-directory>button{color:#8b8065} .context-card.now .v8-context-directory>button{color:#987c73} .context-card.inputs .v8-context-directory>button{color:#87819d} .v8-context-directory>button>span:last-child{opacity:.65;font-size:14px} .v8-context-directory>button:hover>span:first-child{text-decoration:underline;text-underline-offset:4px} .pd-card-content button{font-size:12px;color:#788394;display:block;min-height:31px;text-align:left;padding:3px 0} .pd-card-top h4>button{font:inherit;color:inherit;text-align:left;padding:0} .v8-connection-row{display:flex;justify-content:space-between;align-items:center;gap:15px;margin:0 auto 24px;color:#78869a;font-size:12px} .v8-connection-row>button{display:flex;gap:8px;align-items:center;min-height:38px;color:inherit;font-size:inherit} .v8-connection-row>div{display:flex;align-items:center;gap:13px} .v8-status-dot{display:block;height:5px;width:5px;background:currentColor;opacity:.6;border-radius:50%} #context .v8-connection-row{color:#fff2e8;max-width:100%;padding:0 10px} .pd-context-body .v8-connection-row{max-width:680px;margin-bottom:15px;font-size:10px} .v8-master{display:block;width:32px;height:19px;background:#cfb4aa;border-radius:20px;padding:3px;position:relative} .v8-master:before{content:"";position:absolute;inset:-12px} .v8-master i{display:block;height:13px;width:13px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0002;transition:transform .2s} .v8-master[aria-checked=true]{background:#7393ca} .v8-master[aria-checked=true] i{transform:translateX(13px)} .pd-context-body .v8-master{background:#cdd6e5} .pd-context-body .v8-master[aria-checked=true]{background:#7393ca} .context-access{line-height:1.8} .context-switch,.pd-toggle{position:relative} .context-switch:before,.pd-toggle:before{content:"";position:absolute;inset:-10px -8px} .v8-context-dialog{margin:auto;width:min(580px,calc(100% - 30px));max-height:min(82vh,850px);border:1px solid #e1e7f0;border-radius:20px;background:#fff;padding:28px 30px;box-shadow:0 35px 120px #273d6930;color:#35465e;overflow:auto} .v8-context-dialog::backdrop{background:#34415b38;backdrop-filter:blur(8px)} .v8-context-dialog>header{display:flex;align-items:start;justify-content:space-between;gap:24px;padding-bottom:24px;border-bottom:1px solid #e9edf5} .v8-context-dialog header p{font-size:9px;letter-spacing:.15em;color:#8b9aae;margin:0 0 9px} .v8-context-dialog h2{font-size:25px;font-weight:500;line-height:1.5;color:#33455f;letter-spacing:-.025em} .v8-context-dialog [data-close-context]{font-size:24px;color:#7c8da5;min-height:40px;width:40px;border-radius:50%;background:#f5f7fb} #context-dialog-body{padding-top:22px;font-size:14px;line-height:1.8} .v8-ctx-group+.v8-ctx-group{margin-top:28px} .v8-ctx-group h3{font-size:12px;font-weight:400;color:#8694a8;margin-bottom:10px} .v8-ctx-group div[contenteditable]{font-size:16px;line-height:1.75;white-space:pre-wrap;outline:none;min-height:30px} .v8-ctx-group div[contenteditable]:focus{outline:1px solid #aec3e5;outline-offset:7px} .v8-dialog-note{font-size:10px;line-height:1.8;color:#8b98aa;border-top:1px solid #ecf0f5;margin-top:25px;padding-top:17px} @keyframes v8-organize-reveal{from{opacity:.3;filter:blur(5px);transform:translateY(5px)}to{opacity:1;filter:blur(0);transform:translateY(0)}} @media (prefers-reduced-motion:no-preference){.v8-is-changing{animation:v8-organize-reveal .32s ease-out both}} @media (min-width:1200px){.v8-hero-library .v8-topic-grid{grid-template-columns:repeat(3,minmax(0,1fr))} .v8-hero-library .v8-topic-title{font-size:16px}} @media (max-width:1000px){.v8-library-stage{padding:26px 24px 23px} .v8-topic-grid{gap:15px} .v8-topic-card{padding:18px 17px 16px} .v8-topic-title{font-size:17px} .v8-topic-card nav button{font-size:12px} .v8-reader-body{grid-template-columns:155px minmax(0,1fr)} .v8-reader-head{padding:19px 22px} .v8-reader-head h3{font-size:20px} .v8-prose-wrap{padding:25px 30px} .v8-prose{font-size:15px} .v8-prose-wrap h4{font-size:21px} .v8-hero-library{padding:22px 20px} .v8-reader-actions{gap:10px}} @media (max-width:760px){.v8-library-stage{padding:20px 18px 22px} .v8-topic-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin-bottom:20px} .v8-topic-card{padding:17px 18px} .v8-reader-head{flex-wrap:wrap;gap:12px;padding:21px 23px} .v8-reader-actions{margin-left:auto} .v8-reader-body{display:block} .v8-section-nav{flex-direction:row;gap:15px;overflow-x:auto;border-right:0;border-bottom:1px solid #e9edf3;padding:7px 20px;background:#fff} .v8-section-nav button{white-space:nowrap;border-radius:0;padding:9px 0;border-bottom:1px solid transparent;font-size:12px} .v8-section-nav button[aria-current=true]{background:none;border-bottom-color:#7c9bc7} .v8-prose-wrap{padding:25px 25px 20px} .v8-stage-foot{font-size:8px} .v8-stage-foot>span:last-child{font-size:21px} .v8-prose-wrap h4{font-size:20px} .v8-prose{font-size:15px} .v8-archive-head{gap:10px;flex-wrap:wrap} .v8-archive-actions{margin-left:auto} .v8-archive-prose{font-size:15px} .ax-reading{min-height:300px} .ax-results{max-height:250px;min-height:0} .v8-context-directory>button{font-size:12px} .v8-connection-row{font-size:11px}} @media (max-width:480px){.v8-library-stage{padding:16px 12px 20px;border-radius:16px;margin-inline:-4px} .v8-topic-grid{grid-template-columns:1fr;gap:12px;margin-bottom:20px} .v8-topic-card{padding:18px 20px 15px} .v8-topic-title{font-size:18px;margin-bottom:9px} .v8-topic-card nav{flex-direction:row;flex-wrap:wrap;column-gap:17px;row-gap:1px} .v8-topic-card nav button{font-size:12px;min-height:32px} .v8-topic-reader{border-radius:13px} .v8-reader-head{padding:20px 19px 15px;display:block} .v8-reader-head h3{font-size:21px} .v8-reader-actions{justify-content:space-between;margin-top:13px} .v8-organize{font-size:12px;min-height:39px} .v8-order{font-size:11px} .v8-section-nav{padding-inline:18px;gap:16px} .v8-section-nav button{font-size:11px} .v8-prose-wrap{padding:24px 20px 20px} .v8-prose-wrap h4{font-size:19px;line-height:1.5;margin-bottom:20px} .v8-prose{font-size:14px;line-height:1.8} .v8-entry-body{line-height:1.8} .v8-entry time{font-size:11px} .v8-writing-end{font-size:14px} .v8-stage-foot{display:block;padding:20px 5px 0} .v8-stage-foot>span:last-child{display:none} .v8-hero-library{padding:21px 15px} .v8-hero-library .v8-topic-grid{grid-template-columns:1fr} .v8-hero-library .v8-topic-card nav{gap:0;flex-direction:column} .v8-hero-library .v8-topic-title{font-size:15px} .v8-hero-reader-head{flex-wrap:wrap} .v8-hero-reader-head h4{font-size:19px} .v8-hero-chapters{gap:16px} .v8-hero-prose{font-size:13px;line-height:1.8} .v8-hero-prose .v8-entry-body{line-height:1.8} .v8-connection-row{font-size:10px;gap:10px} .v8-connection-row>div{gap:8px} .v8-context-directory>button{font-size:11px;min-height:35px} .v8-context-dialog{padding:24px 21px} .v8-context-dialog h2{font-size:23px} .v8-ctx-group div[contenteditable]{font-size:15px} .v8-archive-head h3{font-size:21px} .v8-archive-actions{gap:8px} .v8-edit-example{margin-left:0;padding:22px 21px} .v8-edit-example p{font-size:25px}} @media (prefers-reduced-motion:reduce){.v8-is-changing{animation:none!important}} .v8-ctx-filters{display:flex;gap:16px;margin-bottom:16px} .v8-ctx-filters button{min-height:36px;font-size:12px;color:#8693a6;padding:0 6px;border-bottom:1px solid transparent} .v8-ctx-filters button[aria-pressed=true]{border-bottom-color:#7092c9;color:#5379b0} .v8-ctx-topic-row{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 2px;border-bottom:1px solid #e9edf5} .v8-ctx-topic-row>button:first-child{min-height:40px;text-align:left;color:#485f80;font-size:14px;display:flex;align-items:center;gap:15px} .v8-ctx-topic-row>button:first-child span{font-size:13px;color:#8c9bb0} .v8-ctx-topic-row .v8-master{flex:0 0 32px;background:#cbd5e5} .v8-ctx-topic-row .v8-master[aria-checked=true]{background:#7393ca} .v8-ctx-scope-note{font-size:11px;line-height:1.8;color:#8a97aa;margin:19px 0 0} .v8-ctx-back{font-size:12px;color:#6081b1;min-height:35px;margin-bottom:10px} .v8-ctx-topic-heading{font-size:22px;font-weight:500;line-height:1.6;color:#344a69} .v8-ctx-chapters{display:flex;gap:16px;flex-wrap:wrap;margin:18px 0 25px;border-bottom:1px solid #e7edf5} .v8-ctx-chapters button{padding:8px 0 11px;color:#8793a7;font-size:12px;border-bottom:1px solid transparent} .v8-ctx-chapters button[aria-current=true]{color:#577baa;border-bottom-color:#7f9bc8} .v8-ctx-readonly{font-size:15px;line-height:1.75;color:#485b75} .v8-connection-explanation{font-size:20px;margin-bottom:14px;color:#3d5271} .v8-connection-detail{color:#7b899e;line-height:1.8} #library-gallery .cl-afterword{height:auto;min-height:0;overflow:visible;padding-bottom:4px} #library-gallery .cl-afterword>p{margin:0;white-space:normal} #library-gallery .cl-afterword>p>span{position:static;display:inline;line-height:inherit} @media (pointer:coarse){.v8-topic-card nav button{min-height:38px} .v8-section-nav button{min-height:44px}} .hero{background:#fafbfd} .hero-atmosphere{height:1180px;background:#fafbfd;mask-image:linear-gradient(#000 0%,#000 77%,transparent 100%)} .v9-horizon{position:absolute;inset:0;background:radial-gradient(ellipse 42% 56% at -6% 45%,#e0eafb99,transparent 83%),radial-gradient(ellipse 31% 48% at 102% 25%,#e2d7ec66,transparent 90%),radial-gradient(ellipse 28% 27% at 90% 56%,#f5dec955,transparent 80%),linear-gradient(180deg,#fcfcfd 15%,#fafbfd 64%,#f2f5fc)} .v9-hero-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none} .hero-atelier-label{color:#8698af} .v9-library{max-width:1280px;--v9-ink:#333b4a;--v9-blue:#6585bd} .v9-library .v8-library-stage{border:0;border-radius:30px;background:linear-gradient(123deg,#edf1fa 1%,#f9f5f1 46%,#f0f2fa 75%,#e3eafa);padding:70px 40px 30px;display:grid;grid-template-columns:272px minmax(0,1fr);gap:0 26px;align-items:center;box-shadow:none;isolation:isolate;overflow:visible;min-height:775px} .v9-thought-atmosphere{position:absolute;inset:0;z-index:-1;border-radius:inherit;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse 45% 40% at 3% 72%,#ccd9f03d,transparent 90%),radial-gradient(ellipse 60% 60% at 72% 5%,#fffaf6c9,transparent 90%)} .v9-thought-atmosphere svg{width:100%;height:100%;position:absolute;inset:0} .v9-library .v8-topic-grid{display:grid;grid-template-columns:1fr;gap:18px;margin:0;padding:8px 0;align-self:center;position:relative;z-index:2} .v9-library .v8-topic-card{padding:23px 24px 19px;border:1px solid #ffffffeb;border-radius:18px;box-shadow:0 12px 30px -16px #364d7930;background:linear-gradient(125deg,#fff,#fffdfb);transition:transform .38s cubic-bezier(.2,.75,.2,1),box-shadow .38s,border-color .25s;transform:translateX(-12px);overflow:hidden} .v9-library .v8-topic-card:after{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid #6c89b30b;pointer-events:none} .v9-library .v8-topic-card:nth-child(2){transform:translateX(12px);background:linear-gradient(125deg,#fff,#fdfaff)} .v9-library .v8-topic-card:nth-child(3){transform:translateX(-2px);background:linear-gradient(125deg,#fff,#f7fbfe)} .v9-library .v8-topic-card.is-current{border-color:#b9ccec;box-shadow:0 18px 38px -17px #46669a46;transform:translateX(20px);background:#fff} .v9-library .v8-topic-card:hover{transform:translateX(15px) translateY(-3px);box-shadow:0 18px 38px -17px #46669a46} .v9-library .v8-topic-card.is-current:hover{transform:translateX(20px) translateY(-3px)} .v9-library .v8-topic-title{font-size:19px;line-height:1.55;letter-spacing:-.035em;color:#3a4455;margin-bottom:14px;font-weight:500} .v9-library .v8-topic-card nav{gap:0;align-items:stretch} .v9-library .v8-topic-card nav button{display:block;font-size:12px;line-height:1.55;color:#8690a1;min-height:32px;padding:6px 15px 6px 0;position:relative;transition:color .2s,transform .2s} .v9-library .v8-topic-card nav button:hover{color:#547bb9;transform:translateX(3px)} .v9-library .v8-topic-card nav button[aria-current=true]{color:#5879ad} .v9-library .v8-topic-card nav button[aria-current=true]:after{content:"↗";position:absolute;right:0;top:6px;color:#87a1c9} .v9-library .v8-topic-reader{position:relative;align-self:center;margin:0 0 0 5px;min-width:0;min-height:580px;border:1px solid #fff;border-radius:22px;background:#fff;overflow:visible;box-shadow:0 32px 65px -35px #3f507a64,0 2px 7px #53617b07} .v9-library .v8-topic-reader:before{content:"";position:absolute;inset:8px -7px -8px 7px;z-index:-1;background:#ffffff7d;border:1px solid #ffffffc2;border-radius:22px;transform:rotate(1.3deg);box-shadow:0 15px 30px -20px #4d64953b;pointer-events:none} .v9-library .v8-reader-head{padding:28px 32px 19px;border:0;min-height:82px;border-radius:22px 22px 0 0;align-items:center} .v9-library .v8-reader-head h3{font-size:23px;font-weight:500;color:#333d4e;letter-spacing:-.035em} .v9-library .v8-reader-actions{gap:9px} .v9-library .v8-organize{border:1px solid #e6eaf4;border-radius:30px;padding:9px 12px;min-height:36px;background:#f8faff;color:#6281b1;font-size:11px;gap:7px} .v9-library .v8-organize>span{font-size:17px} .v9-library .v8-organize[aria-checked=true]{background:#edf2ff;border-color:#cfdbf3;color:#496da7} .v9-library .v8-reader-body{display:block} .v9-library .v8-section-nav{border:0;border-bottom:1px solid #e9edf3;background:none;display:flex;flex-direction:row;gap:23px;padding:0 32px;overflow-x:auto;scrollbar-width:thin} .v9-library .v8-section-nav button{white-space:nowrap;padding:12px 0 14px;font-size:12px;border-radius:0;border-bottom:2px solid transparent;min-height:44px;color:#929aa7;flex:0 0 auto} .v9-library .v8-section-nav button:hover{background:transparent;color:#587aaa} .v9-library .v8-section-nav button[aria-current=true]{color:#5e7eb3;background:transparent;border-bottom-color:#8ba5cf} .v9-library .v8-prose-wrap{padding:34px 44px 21px;max-width:760px;margin:auto} .v9-library .v8-prose-wrap h4{font-family:var(--serif);font-size:34px;line-height:1.42;font-weight:400;letter-spacing:-.045em;color:#3e4857;margin-bottom:24px} .v9-library .v8-prose{font-size:16px;line-height:1.85;color:#626d7d} .v9-library .v8-entry-body{line-height:1.85} .v9-library .v8-entry time{font-size:10px;color:#a1aaba;line-height:1.7;margin-bottom:10px} .v9-library .v8-entry+.v8-entry{margin-top:26px} .v9-library .v8-writing-end{margin-top:31px;padding-top:20px;border-top:1px solid #eff1f5;font-size:16px;min-height:49px;color:#5d6b82} .v9-library .v8-writing-end:empty:before{font-size:12px;color:#a4adba} .v9-library .v8-edit-state{margin-top:8px;min-height:14px} .v9-library .v8-prose h5{font-size:17px;font-weight:500;color:#506b97;line-height:1.55;margin:25px 0 10px} .v9-library .v8-stage-foot{grid-column:1/-1;position:relative;padding:28px 6px 0;color:#8797b2;align-self:end} .v9-library .v8-stage-foot>span:last-child{font-size:24px;color:#94a6c3} .v9-library .cl-afterword{padding-top:35px} @media (min-width:1450px){.v9-library .v8-library-stage{padding:75px 55px 30px;gap:0 38px} .v9-library .v8-prose-wrap{padding:38px 54px 24px}} @media (max-width:1100px) and (min-width:781px){.v9-library .v8-library-stage{grid-template-columns:224px minmax(0,1fr);padding:45px 25px 28px;gap:0 15px} .v9-library .v8-topic-card{padding:19px 19px 16px} .v9-library .v8-topic-title{font-size:17px} .v9-library .v8-reader-head{padding:25px 24px 17px;flex-wrap:wrap;gap:10px} .v9-library .v8-section-nav{padding:0 24px;gap:16px} .v9-library .v8-prose-wrap{padding:30px 29px 24px} .v9-library .v8-prose-wrap h4{font-size:30px} .v9-library .v8-prose{font-size:15px} .v9-library .v8-topic-reader{min-height:645px}} @media (max-width:780px){.v9-library .v8-library-stage{display:flex;flex-direction:column;align-items:stretch;padding:27px 20px 22px;gap:25px;min-height:0;border-radius:24px} .v9-library .v8-topic-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0;align-self:stretch;padding:0} .v9-library .v8-topic-card,.v9-library .v8-topic-card:nth-child(n),.v9-library .v8-topic-card:hover,.v9-library .v8-topic-card.is-current{transform:none;border-radius:13px;padding:17px 14px 14px} .v9-library .v8-topic-title{font-size:16px;margin-bottom:11px;line-height:1.5} .v9-library .v8-topic-card nav button{font-size:11px;line-height:1.6;padding:7px 0;min-height:32px} .v9-library .v8-topic-card nav button[aria-current=true]:after{display:none} .v9-library .v8-topic-reader{align-self:stretch;margin:0;min-height:0} .v9-library .v8-reader-head{padding:25px 27px 17px} .v9-library .v8-section-nav{padding:0 27px;gap:25px} .v9-library .v8-prose-wrap{padding:30px 32px 25px} .v9-library .v8-stage-foot{padding:0 4px} .v9-library .v8-stage-foot>span:last-child{font-size:22px}} @media (max-width:520px){.hero-atmosphere{height:950px} .v9-horizon{background:radial-gradient(ellipse 65% 42% at -20% 42%,#e5edfc,transparent 90%),radial-gradient(ellipse 50% 50% at 120% 38%,#ece5f3,transparent 90%),#fcfcfd} .v9-hero-lines{width:150%;left:-20%} .v9-library .v8-library-stage{padding:22px 14px 20px;gap:20px;border-radius:20px} .v9-library .v8-topic-grid{grid-template-columns:1fr;gap:10px} .v9-library .v8-topic-card,.v9-library .v8-topic-card:nth-child(n){padding:16px 18px 14px;border-radius:13px;box-shadow:0 7px 16px -13px #384e8036} .v9-library .v8-topic-title{font-size:17px;margin-bottom:8px} .v9-library .v8-topic-card nav{display:flex;flex-direction:row;flex-wrap:wrap;column-gap:17px;row-gap:0} .v9-library .v8-topic-card nav button{font-size:11px;min-height:32px} .v9-library .v8-topic-reader{border-radius:15px;box-shadow:0 16px 35px -23px #3f507a5c} .v9-library .v8-topic-reader:before{border-radius:15px;inset:4px -4px -5px 4px;transform:rotate(.7deg)} .v9-library .v8-reader-head{padding:19px 19px 16px;min-height:70px;gap:10px;flex-wrap:wrap} .v9-library .v8-reader-head h3{font-size:20px} .v9-library .v8-organize{font-size:10px;padding:7px 10px;min-height:34px} .v9-library .v8-section-nav{padding:0 19px;gap:17px} .v9-library .v8-section-nav button{font-size:11px;min-height:44px;padding:12px 0} .v9-library .v8-prose-wrap{padding:27px 22px 21px} .v9-library .v8-prose-wrap h4{font-size:29px;margin-bottom:21px} .v9-library .v8-prose,.v9-library .v8-entry-body{font-size:14px;line-height:1.85} .v9-library .v8-entry time{font-size:10px} .v9-library .v8-writing-end{margin-top:25px} .v9-library .v8-stage-foot{align-items:flex-start;gap:10px} .v9-library .v8-stage-foot>span:first-child{font-size:6px;letter-spacing:.1em;line-height:1.8;max-width:110px} .v9-library .v8-stage-foot>span:last-child{font-size:19px;max-width:145px;line-height:1.25;text-align:right} .v9-library .cl-afterword{padding-top:27px}} @media (prefers-reduced-motion:reduce){.v9-library *{transition:none!important} .v9-library .v8-topic-card:hover{transform:none} .v9-library .v8-topic-card.is-current:hover{transform:translateX(20px)}} @media (forced-colors:active){.v9-thought-atmosphere,.v9-hero-lines,.v9-horizon{display:none} .v9-library .v8-topic-card,.v9-library .v8-topic-reader{border:1px solid CanvasText} .v9-library .v8-topic-reader:before{display:none}}
/* Localized layout, keyboard and reduced-motion finishing. */
html[lang=en] .hero h1{font-size:clamp(74px,8.2vw,118px)}html[lang=en] .hero-description{letter-spacing:0}html[lang=en] .v9-library .v8-topic-title{font-size:18px;letter-spacing:-.02em}html[lang=en] .v9-library .v8-section-nav{gap:18px}html[lang=en] .v9-library .v8-section-nav button{font-size:11px}html[lang=en] .v8-entry-body{overflow-wrap:break-word}html[lang=en] .pd-tab span{font-size:11px}html[lang=en] .context-card h3{font-size:clamp(25px,3vw,34px)}html[lang=en] .tl-head-grid h2{font-size:clamp(56px,6.5vw,90px);line-height:1.07}html[lang=en] .hero-description .word-tag{padding-inline:11px}.atelier-language{white-space:nowrap}button:focus-visible,a:focus-visible,[contenteditable]:focus-visible{outline:2px solid #6487c5;outline-offset:4px}@media(max-width:580px){html[lang=en] .hero h1{font-size:clamp(51px,12vw,70px)}html[lang=en] .hero-description{font-size:14px}html[lang=en] .hero-description .word-tag{font-size:10px;padding-inline:8px}html[lang=en] .tl-head-grid h2{font-size:48px}html[lang=en] .context-card h3{font-size:23px}.footer-bottom{row-gap:15px}}@media(max-width:780px){.v9-library .v8-topic-card.is-current:hover{transform:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}.v9-library .v8-topic-card:hover{transform:none}}@media(forced-colors:active){.hero h1,.hero h1 span{color:CanvasText!important;-webkit-text-fill-color:CanvasText!important;background:none!important}.context-card,.v8-organize,.v8-topic-card{border:1px solid CanvasText}.v8-organize[aria-checked=true]{outline:2px solid Highlight}.context-switch{border:1px solid ButtonText}.context-switch[aria-checked=true]{outline:2px solid Highlight}}

/* Thought-only optical finishing. Context and hero content geometry are unchanged. */
.v9-library .v8-topic-card{background:linear-gradient(145deg,#fff 60%,#f4f7ff);border-color:#fff}
.v9-library .v8-topic-card:nth-child(2){background:linear-gradient(135deg,#fff 55%,#faf2f7)}
.v9-library .v8-topic-card:nth-child(3){background:linear-gradient(140deg,#fff 50%,#edf6fb)}
.v9-library .v8-topic-card.is-current{background:#fff;border-color:#b9ccec}
.v9-library .v8-topic-card nav button,.v9-library .v8-section-nav button{color:#66758a}
.v9-library .v8-topic-card nav button[aria-current=true],.v9-library .v8-section-nav button[aria-current=true]{color:#476aa2}
.v9-library .v8-entry time{font-size:11.5px;color:#69778a}
.v9-library .v8-organize{color:#526d98}
@media(pointer:coarse){.v9-library .v8-topic-card nav button{min-height:44px}}

/* English words must reflow, not escape their small-screen navigation. */
@media(max-width:580px){
 html[lang=en] .pd-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;width:100%}
 html[lang=en] .pd-tab{width:100%;min-width:0;flex-direction:column;justify-content:center;gap:5px;padding:8px 3px;white-space:normal;text-align:center}
 html[lang=en] .pd-tab span{font-size:10px;line-height:1.3;overflow-wrap:normal}
 html[lang=en] .use-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
 html[lang=en] .use-tabs button{min-width:0;width:100%;white-space:normal;line-height:1.55;text-align:center}
}