.study-page{font-size:15px;line-height:1.5}
.study-header{position:sticky;top:0;z-index:30;padding:16px 0;background:var(--bg);border-bottom:1px solid var(--line)}.study-header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px}
.study-header .logo-mark{width:38px;height:28px;margin:0;flex:none}.study-header .logo-mark svg{width:100%;height:100%}
.study-header nav{display:flex;flex-direction:row;align-items:center;gap:22px;padding:0;margin:0;width:auto;font-size:12px}.study-header .theme-switch{min-height:32px}
.study-reading{display:grid;grid-template-columns:158px minmax(0,520px);grid-template-rows:auto auto;column-gap:55px;width:calc(100% + 213px);margin-left:-213px;align-items:start}
.study-reading>.study-intro{grid-column:2;grid-row:1}.study-reading>.study-article{grid-column:2;grid-row:2;min-width:0}
.study-intro{padding:57px 0 0}.study-intro h1{font-family:Georgia,'Times New Roman',serif;font-size:32px;line-height:1.12;font-weight:400;letter-spacing:-1px;margin:0 0 19px;width:100%}.study-intro>p{font-size:15px;line-height:1.5;color:var(--muted);width:100%}.study-intro figure{margin:30px 0 0}.study-intro img{width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;border-radius:8px}
.study-toc{position:sticky;top:108px;grid-column:1;grid-row:1 / span 2;align-self:start;width:158px;margin-top:100px}.study-toc summary{font-size:11px;color:var(--muted);list-style:none;margin-bottom:17px;cursor:pointer}.study-toc summary::-webkit-details-marker{display:none}.study-toc nav{display:block;margin:0;padding:0;width:auto}.study-toc ol{display:grid;gap:12px;list-style:none;margin:0;padding:0}.study-toc a{display:block;font-size:11px;line-height:1.45;color:var(--muted);padding-left:12px;border-left:1px solid var(--line)}.study-toc a[aria-current="location"]{color:var(--text);border-left:2px solid #315ed4;padding-left:11px}
.study-article section{margin-top:60px;scroll-margin-top:32px}.study-article h2{font-size:21px;line-height:1.3;letter-spacing:-.4px;font-weight:550;margin:0 0 20px}.study-article h3{font-size:17px;line-height:1.4;font-weight:550;letter-spacing:-.2px;margin:30px 0 14px}.study-article p{margin:0 0 16px;color:var(--muted)}.study-article strong{font-weight:600;color:var(--text)}.study-article blockquote{margin:0 0 22px}.study-article blockquote p{font-style:italic;color:var(--text)}.study-article ul,.study-article ol{padding-left:20px;margin:18px 0 22px;color:var(--muted)}.study-article li{padding-left:3px;margin-bottom:12px}.study-article li:last-child{margin-bottom:0}.study-article code{font-size:13px;overflow-wrap:anywhere}
.study-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:25px 0 28px}.study-gallery.components{grid-template-columns:repeat(3,minmax(0,1fr))}.study-zoom{display:block;cursor:zoom-in;overflow:hidden;border-radius:8px;background:#f1f5f7}.study-zoom img{width:100%;height:100%;object-fit:contain}.study-gallery .study-zoom{aspect-ratio:1.82}.study-gallery.components .study-zoom{aspect-ratio:1.12}.study-gallery.final-screens .study-zoom{aspect-ratio:1.247}.study-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:26px 0 32px}.study-pair figure{margin:0;min-width:0}.study-pair .study-zoom{aspect-ratio:1}.study-page figcaption{text-align:center;color:var(--muted);font-size:11px;margin:9px 0 0;line-height:1.4}
.study-table-wrap{margin:24px 0}.study-article table{width:100%;border-collapse:collapse;font-size:13px;line-height:1.5}.study-article th{text-align:left;font-weight:550;padding:12px 12px 12px 0;border-bottom:1px solid var(--line)}.study-article td{padding:15px 12px 15px 0;vertical-align:top;color:var(--muted);border-bottom:1px solid var(--line)}.study-article th:first-child,.study-article td:first-child{width:32%}.study-article td:last-child,.study-article th:last-child{padding-right:0}
.study-carousel{margin:28px 0 30px}.study-viewport{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;touch-action:pan-y;cursor:grab;border-radius:8px}.study-viewport::-webkit-scrollbar{display:none}.study-viewport.dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}.study-slide{flex:0 0 100%;min-width:0;scroll-snap-align:center;padding:6px 0;perspective:1100px}.study-face{position:relative;overflow:hidden;border-radius:8px;background:#f1f5f7;aspect-ratio:2.06;backface-visibility:hidden}.study-face img{width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}[data-carousel-edge],[data-carousel-shade]{position:absolute;inset:0;pointer-events:none;opacity:0}[data-carousel-edge]{transform:scale(1.025)}.study-carousel-controls{display:flex;justify-content:space-between;align-items:center;margin-top:10px;gap:10px}.study-carousel-controls p{font-size:11px;margin:0}.study-carousel-controls [data-count]{margin-left:10px;font-variant-numeric:tabular-nums}.study-carousel-controls>div{display:flex;gap:7px}.study-carousel-controls button{border:1px solid var(--line);border-radius:20px;padding:6px 12px;font-size:11px}.study-carousel-controls button:disabled{opacity:.35;cursor:default}.study-carousel-controls button:not(:disabled):hover{background:var(--soft)}
.study-comparison{margin:24px 0 30px}.study-compare-stage{position:relative;aspect-ratio:1.65;overflow:hidden;border-radius:8px;background:#f1f5f7}.study-compare-stage>img,.study-compare-before,.study-compare-before img{position:absolute;width:100%;height:100%;inset:0;object-fit:contain}.study-compare-before{clip-path:inset(0 calc(100% - var(--reveal)) 0 0);background:#f1f5f7}.compare-label{position:absolute;top:10px;font-size:10px;padding:2px 6px;border-radius:3px;background:#fff;color:#222;pointer-events:none}.compare-label.before{left:10px}.compare-label.after{right:10px}.compare-handle{position:absolute;top:50%;left:var(--reveal);transform:translate(-50%,-50%);display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid #ccc;background:white;color:#333;pointer-events:none}.compare-handle::before,.compare-handle::after{content:'';position:absolute;width:1px;height:400px;background:#fff;left:50%}.compare-handle::before{bottom:100%}.compare-handle::after{top:100%}.study-compare-stage input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}.study-compare-stage:focus-within{outline:2px solid #315ed4;outline-offset:5px}
.study-architecture{margin:28px 0;padding:24px 0;text-align:center}.study-architecture>p:first-child{font-size:11px;letter-spacing:.06em}.study-architecture>p:nth-child(2){color:var(--text);font-size:17px}.study-architecture>span{display:block;margin:16px 0;color:var(--muted)}.study-architecture>div{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;border-top:1px solid var(--line);padding-top:20px;font-size:12px;color:var(--muted)}.study-architecture>div>span{position:relative}.study-architecture>div>span::before{content:'';position:absolute;top:-20px;left:50%;height:10px;width:1px;background:var(--line)}
.study-gallery.components{margin-bottom:16px}.study-system-cta{margin:0 0 28px}.study-system-cta a{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:13px 16px;border-radius:8px;background:var(--text);color:var(--bg);font-size:14px;font-weight:550;line-height:1.4}.study-system-cta a:hover{opacity:.84}.study-system-cta a:focus-visible{outline-color:#315ed4}.study-system-cta span{font-size:18px;line-height:1}.study-return{display:flex;justify-content:space-between;gap:24px;padding:58px 0;font-size:12px;color:var(--muted)}.study-return a:hover{color:var(--text)}
.study-lightbox{width:min(1200px,95vw);max-height:94dvh;padding:48px 20px 18px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--text)}.study-lightbox::backdrop{background:#000b}.study-lightbox img{width:auto;max-width:100%;max-height:76dvh;object-fit:contain;margin:auto}.study-lightbox form{position:absolute;top:10px;right:14px}.study-lightbox button{padding:6px;font-size:13px}.study-lightbox p{font-size:12px;text-align:center;margin:12px 0 0;color:var(--muted)}
@media(max-width:1000px){.study-reading{display:block;width:auto;margin:0}.study-toc{position:relative;top:auto;width:auto;margin-top:30px}.study-toc summary{margin:0;padding:12px 0;border-bottom:1px solid var(--line)}.study-toc summary::after{content:' +';float:right}.study-toc details[open] summary::after{content:' −'}.study-toc ol{padding-top:16px;grid-template-columns:1fr 1fr;gap:12px}.study-toc a{font-size:12px}}
@media(max-width:767px){.study-header{padding:14px 0}.study-header-inner{gap:12px}.study-header nav{gap:12px}.study-intro{padding-top:40px}.study-intro h1{font-size:35px}.study-article section{margin-top:46px}.study-article h2{font-size:21px}.study-article table{font-size:12px}.study-gallery.components{grid-template-columns:repeat(2,minmax(0,1fr))}.study-gallery{gap:8px}.study-pair{grid-template-columns:minmax(0,1fr);gap:18px}.study-return{padding:44px 0}}
@media(max-width:370px){.study-header nav{gap:12px;font-size:11px}.study-header .logo-mark{width:30px}.study-intro h1{font-size:30px}.study-article th,.study-article td{padding-right:8px}}
@media(prefers-reduced-motion:reduce){.study-viewport{scroll-behavior:auto}.study-face{transform:none!important}[data-carousel-edge],[data-carousel-shade]{display:none}}