:root{--paper:#edf0e6;--ink:#303c2d;--accent:#5c6c47}body{background:#f8f9f5}header{border:0}.diagram-hero{height:170svh;position:relative;background:#edf0e6}.diagram-stage{position:sticky;top:0;height:100svh;min-height:650px;overflow:clip;isolation:isolate;background:radial-gradient(ellipse at 75% 43%,#dce5c9 0%,#edf0e6 48%,#f2f3ed 100%)}.hero-grid{position:absolute;inset:0;background-image:radial-gradient(#66765322 .7px,transparent .7px);background-size:17px 17px;mask-image:linear-gradient(90deg,transparent,#000);opacity:.8}.diagram-copy{position:absolute;top:28%;left:6.5%;width:43%;z-index:4;will-change:transform,opacity}.diagram-copy .eyebrow{font-size:10px;letter-spacing:2.3px;color:#69745d;margin-bottom:30px}.diagram-copy h1{font-size:clamp(70px,7.6vw,122px);line-height:.98;letter-spacing:-.065em;font-weight:450}.hero-intro{font-size:15px;line-height:1.8;color:#78826e;margin-top:28px}.hero-link{display:inline-flex;gap:48px;align-items:center;font-size:13px;margin-top:29px;padding-bottom:9px;border-bottom:1px solid #7c876d55}.hero-link:hover{color:#758b54}.diagram-space{position:absolute;inset:0;perspective:1500px;pointer-events:none}.floating-board{position:absolute;left:53%;top:35%;width:clamp(400px,45vw,760px);padding:17px 14px 14px;border:1px solid #ffffffc9;background:linear-gradient(140deg,#ffffffb0,#e7ebd9bb);box-shadow:12px 45px 80px -45px #4d5a3a66,inset 0 1px 1px #fff;border-radius:18px;transform-origin:center;will-change:transform;backface-visibility:hidden}.floating-board img{display:block;width:100%;border-radius:9px;mix-blend-mode:multiply;opacity:.95}.board-edge{display:flex;justify-content:space-between;font-size:8px;letter-spacing:1.4px;color:#6c785d;padding:0 9px 12px}.board-03{z-index:1;top:17%;left:58%;width:38vw}.board-02{z-index:2;top:35%;left:60%;width:39vw}.board-01{z-index:3;top:52%;left:48%;width:45vw}.diagram-axis{position:absolute;width:50vw;height:50vw;border:1px solid #aebc9645;border-radius:50%;left:54%;top:12%;transform:rotateX(55deg) rotateZ(-25deg)}.diagram-axis:after{content:'';position:absolute;inset:14%;border:1px solid #aebc9645;border-radius:50%}.diagram-hero-foot{position:absolute;bottom:30px;left:6.5%;right:5%;display:flex;align-items:center;justify-content:space-between;color:#7c8770;font-size:9px;letter-spacing:1.4px;z-index:5}.motion-toggle{background:none;font-size:10px;padding:10px 0;letter-spacing:0}.diagram-collection{position:relative;margin-top:-45px;border-radius:46px 46px 0 0;background:#f8f9f5;padding:110px 6.5% 100px;z-index:5;box-shadow:0 -20px 80px -40px #5b6c4430}.collection-heading{display:grid;grid-template-columns:1fr 1fr;align-items:end;margin-bottom:48px;column-gap:50px}.collection-heading .eyebrow{grid-column:1/-1;color:#8a947e;font-size:9px;margin-bottom:24px}.collection-heading h2,.format-heading h2{font-size:clamp(40px,4.6vw,72px);line-height:1.08;letter-spacing:-.045em;font-weight:450}.collection-heading>p:last-child{justify-self:end;color:#87907f;font-size:14px;padding-bottom:7px}.diagram-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:15px}.diagram-tabs button{display:flex;align-items:center;gap:13px;background:#e9ede2aa;color:#8b947f;padding:22px 18px;font-size:14px;border:1px solid transparent;border-radius:12px;transition:background .3s,color .3s,transform .3s}.diagram-tabs small{font-size:9px;opacity:.6}.diagram-tabs .tab-arrow{margin-left:auto}.diagram-tabs button[aria-selected=true]{background:#435239;color:#fff}.diagram-tabs button:hover{transform:translateY(-3px)}.diagram-view{background:#eeefe5;border:1px solid #e0e4d7;border-radius:22px;overflow:hidden;box-shadow:0 25px 70px -48px #45573360}.viewer-top,.viewer-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 28px;color:#748064;font-size:11px}.viewer-top{border-bottom:1px solid #d4dbc855}.viewer-top p{font-size:14px;color:#4c5a41}.viewer-top button{background:none;font-size:11px;white-space:nowrap}.diagram-view iframe{display:block;border:0;width:100%;height:clamp(350px,44vw,630px);background:#eeefe5}.viewer-bottom{border-top:1px solid #d4dbc855;letter-spacing:.3px}.viewer-bottom a:hover{text-decoration:underline}.mobile-pan{display:none}.format-section{padding:90px 8% 140px;display:grid;grid-template-columns:1fr 1.1fr;gap:10%;background:#f8f9f5}.format-heading .eyebrow{font-size:9px;color:#929b88;display:block;margin-bottom:24px}.format-heading em{color:#859576}.format-list article{display:grid;grid-template-columns:26px 100px 1fr;gap:14px;padding:29px 0;border-top:1px solid #d9dfd0;align-items:baseline}.format-list article>span{font-size:9px;color:#9ca68f}.format-list h3{font-size:28px;font-weight:400;letter-spacing:-1px}.format-list p{font-size:13px;line-height:1.8;color:#7d8871}.format-list article{opacity:1;transform:none}.format-section[data-animate] .format-list article{opacity:.25;transform:translateY(24px);transition:opacity .65s,transform .65s}.format-section[data-animate].visible .format-list article{opacity:1;transform:none}.format-list article:nth-child(2){transition-delay:.12s!important}.format-list article:nth-child(3){transition-delay:.24s!important}.diagram-price-art{flex:1;display:grid;align-items:center;margin:0 -12px}.diagram-price-art img{width:100%;border-radius:12px;mix-blend-mode:multiply}.source-note{padding:25px 20px 34px;background:#f4f5f0;text-align:center;font-size:10px;color:#929b88;line-height:1.8}.source-note a{text-decoration:underline;text-underline-offset:3px}.plan-pro-max .plan-scope{opacity:.8}
@media(min-width:800px) and (max-height:720px){.diagram-copy{top:24%}.diagram-copy h1{font-size:85px}.hero-intro{margin-top:20px}.board-01{top:48%}.diagram-stage{min-height:600px}}
@media(max-width:799px){header{height:75px;padding:0 5%}.brand{font-size:20px}.brand-symbol{font-size:27px;margin-right:3px}header nav{gap:12px}header nav>a:not(.nav-buy){display:none}.nav-buy{font-size:10px;padding:9px 10px;gap:12px}.diagram-hero{height:135svh}.diagram-stage{min-height:730px}.diagram-copy{top:17%;left:7%;width:86%}.diagram-copy h1{font-size:clamp(58px,10vw,80px);letter-spacing:-3px}.diagram-copy h1 br{display:none}.diagram-copy .eyebrow{margin-bottom:20px;font-size:9px}.hero-intro{font-size:13px;line-height:1.8;margin-top:20px}.hero-link{margin-top:18px;font-size:12px;gap:40px}.floating-board{padding:10px;border-radius:13px}.board-edge{font-size:6px;padding:0 5px 8px}.board-03{top:47%;left:32%;width:65vw}.board-02{top:56%;left:18%;width:75vw}.board-01{top:66%;left:5%;width:84vw}.diagram-axis{left:15%;top:46%;width:90vw;height:90vw}.diagram-hero-foot{left:7%;right:7%;bottom:25px;font-size:7px;letter-spacing:.5px}.diagram-hero-foot>a{display:none}.diagram-collection{padding:70px 5% 50px;margin-top:-28px;border-radius:28px 28px 0 0}.collection-heading{display:block;margin-bottom:30px}.collection-heading h2{font-size:44px}.collection-heading>p:last-child{font-size:12px;margin-top:20px}.collection-heading .eyebrow{font-size:8px;margin-bottom:20px}.diagram-tabs{grid-template-columns:repeat(2,1fr)}.diagram-tabs button{font-size:12px;padding:16px 13px}.diagram-view{border-radius:16px}.viewer-top,.viewer-bottom{padding:18px 15px;gap:10px;font-size:9px}.viewer-top p{font-size:12px;line-height:1.5}.diagram-view iframe{height:415px}.mobile-pan{display:block;font-size:9px;color:#9aa38d;text-align:center;padding:0 15px 15px}.format-section{padding:55px 7% 65px;display:block}.format-heading h2{font-size:45px}.format-list{margin-top:35px}.format-list article{grid-template-columns:20px 65px 1fr;gap:10px;padding:22px 0}.format-list h3{font-size:24px}.format-list p{font-size:12px}.source-note{font-size:9px}.plans-note{text-align:center}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.diagram-hero{height:100svh;min-height:730px}.diagram-stage{position:relative;height:100%;min-height:730px}.diagram-copy,.floating-board{will-change:auto}.diagram-tabs button{transition:none}.format-section[data-animate] .format-list article{opacity:1;transform:none;transition:none}.motion-toggle{display:none}}
/* Vertical scroll drives a stack of full-size diagram cards. */
.diagram-collection{height:440svh;padding:0;overflow:visible;box-shadow:none}.collection-stage{position:sticky;top:0;height:100svh;min-height:650px;padding:62px 6.5% 36px;overflow:clip;border-radius:46px 46px 0 0;background:#f8f9f5;display:flex;flex-direction:column}.collection-heading{margin-bottom:26px;flex:none}.collection-heading .eyebrow{margin-bottom:18px}.collection-heading h2{font-size:clamp(36px,3.5vw,54px)}.collection-heading>p:last-child{font-size:13px}.diagram-deck{position:relative;flex:1;min-height:0;perspective:1400px}.diagram-deck .diagram-view{position:absolute;inset:0;display:flex;flex-direction:column;transform-origin:50% 100%;box-shadow:0 12px 35px -25px #4c603d60;will-change:transform,opacity;backface-visibility:hidden}.diagram-deck .diagram-view:not(:first-child){transform:translateY(118%)}.diagram-deck iframe{pointer-events:none;flex:1;min-height:0;height:auto;user-select:none}.viewer-top,.viewer-bottom{flex:none}.viewer-top h3{font-size:24px;font-weight:450;letter-spacing:-.6px;display:flex;align-items:center;gap:18px}.viewer-top h3 small{font-size:9px;letter-spacing:0;color:#9aa48c}.viewer-top p{font-size:12px;color:#879178;margin-top:10px}
@media(max-width:799px){.diagram-collection{height:400svh}.collection-stage{padding:45px 5% 30px;min-height:620px;border-radius:28px 28px 0 0}.collection-heading{margin-bottom:24px}.collection-heading h2{font-size:35px}.collection-heading .eyebrow{font-size:7px;margin-bottom:15px}.collection-heading>p:last-child{margin-top:16px;font-size:11px}.viewer-top h3{font-size:21px;gap:12px}.viewer-top p{font-size:11px;line-height:1.6;max-width:230px}.viewer-top{align-items:flex-start}.viewer-top button{padding:4px 0;font-size:10px}.viewer-bottom{font-size:8px}.diagram-copy h1 br{display:initial}}
@media(prefers-reduced-motion:reduce){.diagram-collection{height:auto}.collection-stage{height:auto;min-height:0;position:relative;overflow:visible}.diagram-deck{display:grid;gap:24px}.diagram-deck .diagram-view{position:relative;inset:auto;transform:none!important;opacity:1!important;will-change:auto;height:620px}.diagram-deck iframe{min-height:300px}@media(max-width:799px){.diagram-deck .diagram-view{height:480px}}}

/* Light studio gallery: thin translucent sheets, quiet depth, original animated diagrams. */
:root{--paper:#f1f2ef;--ink:#303930;--accent:#71816c;--sans:'Inter','PingFang SC','Hiragino Sans GB',sans-serif}
body{background:var(--paper);font-family:var(--sans)}
body:before{display:none}
.diagram-hero{--panel-width:clamp(420px,38vw,580px);--panel-height:clamp(350px,47svh,460px);position:relative;height:100svh;min-height:760px;padding:0;display:block;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse 65% 58% at 50% 44%,#fafbf7 15%,#f1f3ee 68%,#e9ece7 100%)}
.diagram-gallery-heading{position:absolute;top:15%;left:5%;right:5%;padding:0;text-align:center;z-index:3}
.diagram-hero .diagram-gallery-heading h1{margin:0;font-family:var(--sans);font-size:clamp(46px,4.5vw,70px);line-height:1.08;letter-spacing:-.065em;font-weight:400;color:#303a30;white-space:nowrap}
.diagram-gallery-heading p{margin:20px auto 0;font-size:13px;line-height:1.5;font-weight:400;color:#7a8476;letter-spacing:.02em}
.glass-landscape{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.gallery-floor{position:absolute;left:-10%;right:-10%;bottom:-18%;height:57%;background:radial-gradient(ellipse at 50% 55%,#a8b19e35,transparent 63%);filter:blur(36px)}
.diagram-rail{position:absolute;top:34%;left:0;right:0;z-index:2;height:calc(var(--panel-height) + 140px);display:flex;gap:0;overflow-x:auto;overflow-y:hidden;padding:50px calc((100vw - var(--panel-width))/2) 90px;scrollbar-width:none;cursor:grab;overscroll-behavior-x:contain;touch-action:pan-x pan-y pinch-zoom;outline-offset:-4px}
.diagram-rail::-webkit-scrollbar{display:none}
.diagram-rail.is-dragging{cursor:grabbing;user-select:none}
.diagram-rail-item{flex:0 0 var(--panel-width);width:var(--panel-width);height:var(--panel-height);margin:0 -35px 0 0;padding:22px;position:relative;display:flex;flex-direction:column;border:1px solid #ffffffad;border-radius:3px;background:linear-gradient(135deg,#ffffff80,#f6f7f24d 50%,#e0e6d975);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 #ffffffab,1px 0 0 #a5b19b35,14px 22px 38px -28px #52654c45;transform:none;transform-origin:50% 50%;transition:none;scroll-margin-left:24px}
.diagram-rail-item:nth-child(3n+2){background:radial-gradient(ellipse at 60% 52%,#c6d7bb7a,transparent 69%),linear-gradient(135deg,#f8faf4bf,#e0e7d885)}
.diagram-rail-item:nth-child(3n){background:linear-gradient(140deg,#efeee6a6,#ffffff66 55%,#e4e7de80)}
.diagram-rail-item.is-before{transform:perspective(1800px) translateY(28px) rotateY(-17deg) scale(.91)}
.diagram-rail-item.is-after{transform:perspective(1800px) translateY(-10px) rotateY(-17deg) scale(.91)}
.diagram-rail-item.is-featured{z-index:4;transform:perspective(1800px) translateY(0) rotateY(-5deg) scale(1);box-shadow:inset 0 1px 0 #ffffffab,1px 0 0 #a5b19b35,17px 28px 40px -28px #52654c4a}
.diagram-rail-item:last-child{margin-right:0}
.glass-panel-top{display:flex;align-items:center;justify-content:space-between;gap:12px;position:relative;z-index:2;flex:none;color:#87917f;font-size:9px;letter-spacing:.05em}
.glass-live{display:flex;align-items:center;gap:7px;padding:0;background:none;border:0;box-shadow:none;color:#7a8771;font-size:10px;letter-spacing:0}
.glass-live i{width:4px;height:4px;border-radius:50%;background:#8d9e78}
.diagram-rail-art{position:relative;z-index:2;flex:1;min-height:0;width:100%;margin:10px 0;background:transparent;overflow:hidden}
.diagram-rail-art iframe{display:block;width:100%;height:100%;border:0;background:transparent;pointer-events:none}
.diagram-rail-item figcaption{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:10px;border-top:1px solid #8e9e8025;flex:none}
.diagram-rail-item h2{margin:0;font-family:var(--sans);font-size:17px;font-weight:400;line-height:1.3;letter-spacing:-.035em;color:#4b5943}
.diagram-rail-item figcaption a{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:0;border:0;background:none;box-shadow:none;color:#849279;font-size:19px}
.diagram-rail-item figcaption a:hover{color:#3d502f}
.diagram-gallery-footer{position:absolute;bottom:28px;left:5%;right:5%;height:auto;margin:0;padding:0;display:flex;align-items:center;justify-content:space-between;background:none;color:#91998b;font-family:var(--sans);font-size:10px;letter-spacing:.04em;z-index:3}
.diagram-collection{margin-top:0;border-radius:0}
.collection-stage{border-radius:0}
.diagram-collection,.collection-stage,.format-section{background:#f5f6f1}
@media(max-width:799px){
 .diagram-hero{--panel-width:min(87vw,480px);--panel-height:clamp(330px,46svh,430px);height:100svh;min-height:700px}
 .diagram-gallery-heading{top:20%;left:5%;right:5%}
 .diagram-hero .diagram-gallery-heading h1{font-size:clamp(35px,9.3vw,58px);letter-spacing:-.055em}
 .diagram-gallery-heading p{font-size:11px;line-height:1.6;margin-top:15px}
 .diagram-rail{top:34%;height:calc(var(--panel-height) + 110px);padding-top:34px;padding-bottom:76px}
 .diagram-rail-item{padding:16px;margin-right:6px}
 .diagram-rail-item,.diagram-rail-item.is-before,.diagram-rail-item.is-after{transform:perspective(1200px) translateY(10px) rotateY(-12deg) scale(.94)}
 .diagram-rail-item.is-featured{transform:perspective(1200px) rotateY(-3deg)}
 .diagram-rail-item h2{font-size:16px}
 .diagram-gallery-footer{bottom:21px;font-size:9px}
}
@media(prefers-reduced-motion:reduce){.diagram-hero{height:100svh;min-height:700px}.diagram-rail-item{transition:none}}

/* The whole gallery changes depth with page scroll, never a fixed card tilt. */
.diagram-hero-scroll{position:relative;height:320svh}
.diagram-hero-scroll .diagram-hero{position:sticky;top:0;height:100svh;min-height:660px;--panel-width:clamp(360px,32vw,520px);--panel-height:clamp(320px,43svh,440px)}
.diagram-hero-scroll .diagram-rail{top:26%;height:70%;padding-top:110px;padding-bottom:120px;gap:18px;touch-action:pan-x pan-y pinch-zoom}
.diagram-hero-scroll .diagram-rail-item{margin:0;transition:none;will-change:transform}
.diagram-hero-scroll .diagram-rail-item.is-featured{box-shadow:inset 0 1px 0 #ffffffab,1px 0 0 #a5b19b35,14px 22px 38px -28px #52654c45}
@media(max-width:799px){
 .diagram-hero-scroll{height:280svh}
 .diagram-hero-scroll .diagram-hero{--panel-width:min(85vw,440px);--panel-height:clamp(310px,42svh,410px);min-height:640px}
 .diagram-hero-scroll .diagram-rail{top:28%;padding-top:95px;padding-bottom:110px}
 .diagram-gallery-footer{letter-spacing:0;font-size:8px}
}
@media(prefers-reduced-motion:reduce){
 .diagram-hero-scroll{height:auto}
 .diagram-hero-scroll .diagram-hero{position:relative}
 .diagram-hero-scroll .diagram-rail-item{will-change:auto}
}