:root { --ink:#071319; --ink-2:#0c1d24; --paper:#edf1ed; --white:#f8fbf7; --line:rgba(22,48,55,.18); --muted:#5e6a6b; --cyan:#44d8d2; --copper:#d99c61; --mono:"DM Mono", monospace; --sans:"Noto Sans SC", Arial, sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); letter-spacing:0; }
a { color:inherit; text-decoration:none; } img { display:block; max-width:100%; } button { font:inherit; }
.page-progress { position:fixed; z-index:20; top:0; left:0; right:0; height:2px; background:rgba(255,255,255,.15); }.page-progress span { display:block; width:0; height:100%; background:var(--cyan); }
.site-header { height:76px; padding:0 clamp(24px,4vw,72px); display:flex; align-items:center; justify-content:space-between; position:absolute; z-index:10; width:100%; color:var(--white); border-bottom:1px solid rgba(255,255,255,.2); }
.brand { font:500 22px var(--mono); letter-spacing:0; }.brand span { color:var(--cyan); }.site-header nav { display:flex; gap:30px; font-size:14px; }.site-header nav a { opacity:.75; transition:opacity .2s; }.site-header nav a:hover { opacity:1; }.header-contact { display:flex; gap:8px; align-items:center; font-size:14px; }.header-contact i,.footer-mail i,.button i,.back-top i { width:17px; height:17px; }
.hero { min-height:100svh; position:relative; overflow:hidden; color:var(--white); display:flex; flex-direction:column; justify-content:center; padding:110px clamp(24px,10vw,168px) 105px; }.hero-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.04); animation:hero-in 1.4s cubic-bezier(.2,.8,.2,1) both; }.hero-shade { position:absolute; inset:0; background:linear-gradient(90deg, rgba(2,13,19,.94) 0%, rgba(2,13,19,.78) 31%, rgba(2,13,19,.26) 67%, rgba(2,13,19,.48) 100%); }.hero-grid { position:absolute; inset:0; opacity:.2; background-image:linear-gradient(rgba(116,239,230,.3) 1px, transparent 1px),linear-gradient(90deg,rgba(116,239,230,.3) 1px,transparent 1px); background-size:55px 55px; mask-image:linear-gradient(90deg,#000 0%,transparent 70%); }.hero-copy { position:relative; max-width:680px; }.eyebrow,.section-label { color:var(--cyan); font:500 12px var(--mono); letter-spacing:0; text-transform:uppercase; }.eyebrow { margin:0 0 20px; }.hero h1 { margin:0; font-size:clamp(72px,12vw,176px); line-height:.9; letter-spacing:0; font-weight:800; }.hero-statement { margin:28px 0 34px; max-width:485px; font-size:clamp(18px,2.2vw,25px); line-height:1.7; font-weight:500; }.hero-actions { display:flex; gap:14px; flex-wrap:wrap; }.button { min-height:48px; display:inline-flex; align-items:center; gap:16px; padding:0 20px; border:1px solid rgba(255,255,255,.48); font-size:14px; transition:transform .2s,background .2s; }.button:hover { transform:translateY(-2px); }.button-primary { color:var(--ink); background:var(--cyan); border-color:var(--cyan); }.button-quiet:hover { background:rgba(255,255,255,.12); }.hero-meta { position:absolute; right:clamp(24px,4vw,72px); bottom:55px; display:flex; flex-direction:column; gap:10px; font:12px var(--mono); text-align:right; color:rgba(248,251,247,.8); }.hero-meta span { display:flex; align-items:center; justify-content:flex-end; gap:9px; }.hero-meta span:after { content:""; width:20px; height:1px; background:var(--cyan); }.scroll-prompt { position:absolute; bottom:34px; left:clamp(24px,4vw,72px); display:flex; align-items:center; gap:10px; font-size:12px; color:rgba(248,251,247,.74); }.scroll-prompt span { width:35px; height:1px; background:var(--cyan); animation:scroll-line 1.8s ease-in-out infinite; }
.section-shell { width:min(1220px, calc(100% - 48px)); margin:0 auto; }.intro { padding:142px 0 126px; display:grid; grid-template-columns:180px minmax(0,1fr); column-gap:8vw; }.section-label { display:flex; align-items:center; gap:12px; white-space:nowrap; }.section-label span { color:var(--copper); }.intro-copy { max-width:785px; }.intro h2,.projects h2,.experience h2 { margin:0; font-size:clamp(34px,5vw,64px); line-height:1.25; font-weight:700; }.intro-copy > p { max-width:690px; margin:28px 0 65px; color:var(--muted); font-size:17px; line-height:2; }.capability-list { grid-column:2; border-top:1px solid var(--line); }.capability { min-height:106px; display:grid; grid-template-columns:60px 1fr 30px; align-items:center; gap:18px; border-bottom:1px solid var(--line); }.capability-number { color:var(--copper); font:12px var(--mono); }.capability h3 { margin:0 0 7px; font-size:18px; }.capability p { margin:0; color:var(--muted); font-size:14px; }.capability i { color:var(--cyan); width:22px; height:22px; }
.system-map { background:var(--ink); color:var(--white); padding:126px 0 116px; overflow:hidden; }.system-map-inner { position:relative; }.system-map-head { display:grid; grid-template-columns:1.2fr .72fr; align-items:end; gap:8vw; margin:38px 0 85px; }.system-map h2 { margin:0; font-size:clamp(34px,5vw,62px); line-height:1.27; }.system-map-head p { color:#b6c9c8; margin:0; font-size:16px; line-height:1.9; }.flow { display:grid; grid-template-columns:1fr 64px 1fr 64px 1fr 64px 1fr; align-items:center; }.flow-item { min-height:170px; padding:25px; border:1px solid rgba(154,224,218,.3); display:flex; flex-direction:column; justify-content:flex-end; background:rgba(255,255,255,.025); }.flow-item i { width:27px; height:27px; color:var(--cyan); margin-bottom:auto; }.flow-item strong { font-size:17px; }.flow-item span { color:#aac1c0; font-size:12px; margin-top:7px; }.flow-line { height:1px; background:rgba(154,224,218,.48); position:relative; }.flow-line span { width:8px; height:8px; border-radius:50%; position:absolute; right:0; top:-3px; background:var(--cyan); box-shadow:0 0 0 5px rgba(68,216,210,.12); }
.projects { padding:138px 0 0; }.projects-head { display:grid; grid-template-columns:180px 1fr; column-gap:8vw; padding-bottom:88px; }.projects-head h2 { grid-column:2; }.projects-head p { grid-column:2; max-width:635px; color:var(--muted); line-height:1.85; font-size:16px; margin:22px 0 0; }.project { margin:0 calc((100vw - min(1220px, calc(100vw - 48px))) / -2); padding:0 max(24px, calc((100vw - min(1220px, calc(100vw - 48px))) / 2)); position:relative; }.project-index { font:12px var(--mono); color:var(--copper); padding:34px 0 20px; }.project-main { max-width:1220px; margin:auto; }.project-featured { background:#e1e8e1; padding-bottom:116px; }.project-title-block > p { color:var(--copper); font:12px var(--mono); margin:0 0 15px; }.project-title-block h3 { font-size:clamp(32px,4.3vw,55px); line-height:1.24; margin:0; font-weight:700; }.image-floorplan { margin:55px 0 54px; position:relative; overflow:hidden; aspect-ratio:1.9/1; background:#123447; }.image-floorplan img { width:100%; height:100%; object-fit:cover; transition:transform .7s ease; }.image-floorplan:hover img,.project-image:hover img { transform:scale(1.035); }.project-image span,.project-image figcaption { position:absolute; left:18px; bottom:15px; margin:0; padding:6px 9px; background:rgba(5,18,25,.7); color:#effcfb; font:11px var(--mono); }.project-body { max-width:865px; }.project-lead { font-size:20px; line-height:1.85; margin:0 0 42px; }.project-details { display:grid; grid-template-columns:1fr 1fr; gap:34px; border-top:1px solid var(--line); padding-top:22px; }.project-details b { font-size:14px; }.project-details p { margin:9px 0 0; color:var(--muted); font-size:14px; line-height:1.85; }.tech-list { display:flex; flex-wrap:wrap; list-style:none; padding:0; margin:34px 0 0; gap:8px; }.tech-list li { border:1px solid var(--line); padding:7px 10px; font:11px var(--mono); }
.project-dark { background:var(--ink-2); color:var(--white); padding-bottom:120px; }.project-dark .project-details { border-color:rgba(255,255,255,.2); }.project-dark .project-details p { color:#b7c9c9; }.project-dark .tech-list li { border-color:rgba(255,255,255,.25); }.two-column { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:55px 8vw; align-items:start; }.two-column .project-title-block { grid-column:1; }.two-column .project-body { grid-column:2; grid-row:1 / span 2; }.dashboard-image { grid-column:1; margin:30px 0 0; position:relative; overflow:hidden; border:1px solid rgba(96,214,208,.27); }.project-image img { width:100%; transition:transform .7s ease; }.project-light { background:#d6ddd4; padding-bottom:120px; }.two-column.reverse .project-title-block { grid-column:2; }.two-column.reverse .project-body { grid-column:1; grid-row:1 / span 2; }.two-column.reverse .project-image { grid-column:2; grid-row:2; }.alarm-image { margin:30px 0 0; position:relative; overflow:hidden; aspect-ratio:1.55/1; background:#162b36; }.alarm-image img { height:100%; object-fit:cover; }
.project-compact { background:#f6f6f0; padding-bottom:112px; }.compact-grid { display:grid; grid-template-columns:.8fr 1.25fr; gap:50px 8vw; }.compact-grid .project-body { grid-column:2; grid-row:1 / span 2; }.protocol-visual,.generator-visual { grid-column:1; margin-top:12px; min-height:250px; display:flex; align-items:center; justify-content:center; padding:25px; position:relative; }.protocol-visual { background:var(--ink); color:var(--white); gap:12px; flex-wrap:wrap; }.protocol-node { width:104px; height:104px; padding:14px 10px; border:1px solid rgba(255,255,255,.26); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:10px; font-size:12px; }.protocol-node i { width:24px; color:var(--cyan); }.protocol-node.focus { background:rgba(68,216,210,.14); border-color:var(--cyan); }.protocol-arrow { color:var(--cyan); font-size:21px; }.protocol-visual small { display:block; width:100%; color:#b8c8c7; text-align:center; margin-top:6px; font-size:11px; }.project-generator { background:#e5ddd2; padding-bottom:130px; }.generator-visual { background:#17333a; color:#eff9f2; gap:14px; }.sheet,.generator-code { width:132px; min-height:164px; padding:16px; border:1px solid rgba(255,255,255,.28); display:flex; flex-direction:column; }.sheet { background:#e7f0e9; color:#183038; }.sheet span,.generator-code span { font-size:11px; }.sheet b { font:20px var(--mono); margin:13px 0 11px; }.sheet em { height:5px; background:rgba(16,48,53,.25); margin:4px 0; }.generator-code { background:#102327; }.generator-code code { color:var(--cyan); font:10px var(--mono); margin:13px 0 0; }.generator-arrow { font:25px var(--mono); color:var(--copper); }.package-output { display:flex; flex-direction:column; align-items:center; gap:11px; color:var(--copper); font-size:12px; }.package-output i { width:42px; height:42px; }
.screenshots { padding:126px 0 130px; }.screenshots-head { display:grid; grid-template-columns:180px minmax(0,1fr); column-gap:8vw; margin-bottom:68px; }.screenshots-head h2 { margin:0; font-size:clamp(34px,4.9vw,62px); line-height:1.28; }.screenshots-head p { max-width:650px; margin:23px 0 0; color:var(--muted); font-size:16px; line-height:1.9; }.screenshot-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; }.screenshot { margin:0; overflow:hidden; border:1px solid var(--line); background:#dce4de; }.screenshot img { width:100%; height:270px; object-fit:cover; object-position:top center; transition:transform .7s ease; }.screenshot:hover img { transform:scale(1.025); }.screenshot-wide { grid-column:span 1; }.screenshot-wide img { height:300px; }.screenshot figcaption { display:flex; align-items:baseline; justify-content:space-between; gap:18px; padding:14px 16px 16px; border-top:1px solid var(--line); }.screenshot figcaption b { font-size:15px; }.screenshot figcaption span { color:var(--muted); font-size:12px; text-align:right; line-height:1.55; }
.evidence { display:grid; grid-template-columns:1.04fr .96fr; background:var(--ink); color:var(--white); }.evidence-image { min-height:630px; overflow:hidden; }.evidence-image img { height:100%; width:100%; object-fit:cover; object-position:left center; opacity:.7; }.evidence-copy { padding:105px clamp(24px,7vw,115px); }.evidence-copy h2 { font-size:clamp(34px,4.3vw,57px); line-height:1.32; margin:38px 0 58px; }.evidence-points { border-top:1px solid rgba(255,255,255,.22); }.evidence-points p { margin:0; padding:17px 0; color:#b7c9c9; border-bottom:1px solid rgba(255,255,255,.18); line-height:1.75; font-size:14px; }.evidence-points b { display:block; color:var(--white); margin-bottom:3px; }
.portfolio { padding:128px 0 142px; }.portfolio-head { display:grid; grid-template-columns:180px minmax(0,1fr); column-gap:8vw; margin-bottom:73px; }.portfolio-head h2 { margin:0; font-size:clamp(34px,4.9vw,62px); line-height:1.28; }.portfolio-head p { max-width:700px; margin:23px 0 0; color:var(--muted); font-size:16px; line-height:1.9; }.catalog { display:grid; grid-template-columns:1fr 1fr; gap:0 7vw; border-top:1px solid var(--line); }.catalog-column { padding:30px 0 13px; border-bottom:1px solid var(--line); }.catalog-column:nth-child(odd) { padding-right:3vw; }.catalog-column:nth-child(even) { padding-left:3vw; border-left:1px solid var(--line); }.catalog-title { display:flex; gap:14px; align-items:baseline; margin-bottom:16px; }.catalog-title span { color:var(--copper); font:12px var(--mono); }.catalog-title h3 { margin:0; font-size:21px; }.catalog ul { list-style:none; margin:0; padding:0; }.catalog li { padding:15px 0; border-top:1px solid rgba(22,48,55,.11); }.catalog li:first-child { border-top:0; }.catalog b { font-size:15px; }.catalog p { margin:6px 0 0; color:var(--muted); font-size:13px; line-height:1.8; }
.experience { padding:132px 0 145px; }.experience > .section-label { margin-bottom:42px; }.experience-grid { display:grid; grid-template-columns:1fr .9fr; gap:8vw; }.timeline { margin-top:55px; border-top:1px solid var(--line); }.timeline > div { padding:20px 0 22px; border-bottom:1px solid var(--line); display:grid; grid-template-columns:145px 1fr; column-gap:20px; }.timeline time { color:var(--copper); font:11px var(--mono); padding-top:3px; }.timeline h3 { margin:0; font-size:17px; }.timeline p { margin:6px 0 0; color:var(--muted); font-size:14px; }.skill-wall { align-self:end; padding:31px; background:#d6ded6; }.skill-wall > p { margin:0 0 20px; font:12px var(--mono); color:var(--muted); }.skill-wall div { display:flex; flex-wrap:wrap; gap:9px; }.skill-wall span { font-size:13px; padding:8px 10px; background:rgba(248,251,247,.58); border:1px solid rgba(14,41,45,.12); }
.role-summary { margin-top:40px; padding:28px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.role-summary time { color:var(--copper); font:11px var(--mono); }.role-summary h3 { margin:11px 0 9px; font-size:18px; }.role-summary > p { margin:0; color:var(--muted); font-size:14px; line-height:1.85; }.role-summary ul { margin:16px 0 0; padding-left:18px; color:var(--muted); font-size:13px; line-height:1.85; }.experience .timeline { margin-top:0; }
footer { background:#071319; color:var(--white); }.footer-top { padding:112px 0 90px; }.footer-top h2 { margin:19px 0 45px; font-size:clamp(35px,5vw,64px); line-height:1.3; }.footer-mail { display:inline-flex; align-items:center; gap:13px; color:var(--cyan); font:clamp(19px,2.2vw,28px) var(--mono); border-bottom:1px solid rgba(68,216,210,.45); padding-bottom:8px; }.footer-bottom { min-height:74px; border-top:1px solid rgba(255,255,255,.18); display:flex; align-items:center; gap:25px; font-size:12px; color:#b5c5c5; }.footer-bottom a { color:var(--white); }.back-top { margin-left:auto; display:flex; align-items:center; gap:7px; }
.reveal { opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }.reveal.is-visible { opacity:1; transform:none; }.hero .reveal { animation:rise .75s cubic-bezier(.2,.7,.2,1) both; }.hero .reveal:nth-child(1) { animation-delay:.25s; }.hero .reveal:nth-child(2) { animation-delay:.34s; }.hero .reveal:nth-child(3) { animation-delay:.45s; }.hero .reveal:nth-child(4) { animation-delay:.55s; }
@keyframes hero-in { from { transform:scale(1.12); } to { transform:scale(1.04); } } @keyframes rise { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:none; } } @keyframes scroll-line { 50% { transform:scaleX(.45); transform-origin:left; } } 
@media (max-width:800px) { .site-header { height:64px; padding:0 20px; }.site-header nav { display:none; }.header-contact { font-size:13px; }.hero { min-height:100svh; padding:100px 24px 80px; }.hero-shade { background:linear-gradient(90deg,rgba(2,13,19,.9),rgba(2,13,19,.58)); }.hero-grid { background-size:38px 38px; }.hero h1 { font-size:76px; }.hero-statement { font-size:18px; margin:22px 0 29px; }.hero-meta { right:22px; bottom:23px; font-size:10px; }.scroll-prompt { display:none; }.section-shell { width:min(100% - 40px, 1220px); }.intro { padding:86px 0 75px; display:block; }.section-label { margin-bottom:34px; }.intro h2,.projects h2,.experience h2 { font-size:34px; }.intro-copy > p { font-size:15px; margin:22px 0 40px; line-height:1.85; }.capability { min-height:95px; grid-template-columns:39px 1fr 25px; gap:10px; }.capability h3 { font-size:16px; }.capability p { font-size:12px; line-height:1.65; }.system-map { padding:79px 0; }.system-map-head { display:block; margin:28px 0 43px; }.system-map h2 { font-size:34px; }.system-map-head p { margin-top:21px; font-size:14px; }.flow { display:block; }.flow-item { min-height:96px; padding:17px; display:grid; grid-template-columns:33px 1fr; align-items:center; gap:0 12px; }.flow-item i { grid-row:1 / span 2; margin:0; }.flow-item strong { font-size:15px; }.flow-item span { margin:3px 0 0; font-size:11px; }.flow-line { width:1px; height:22px; margin-left:31px; }.flow-line span { right:-3px; top:auto; bottom:0; }.projects { padding-top:80px; }.projects-head { display:block; padding-bottom:48px; }.projects-head p { font-size:14px; margin-top:17px; }.project { margin:0 -20px; padding:0 20px; }.project-index { padding:25px 0 18px; }.project-featured,.project-dark,.project-light,.project-compact,.project-generator { padding-bottom:75px; }.project-title-block h3 { font-size:31px; }.image-floorplan { margin:34px 0; aspect-ratio:1.35/1; }.project-lead { font-size:16px; line-height:1.85; margin-bottom:29px; }.project-details { grid-template-columns:1fr; gap:20px; padding-top:18px; }.project-details p { font-size:13px; }.tech-list { margin-top:27px; }.two-column,.compact-grid { display:flex; flex-direction:column; gap:30px; }.two-column .project-body,.two-column .project-title-block,.two-column .project-image,.two-column.reverse .project-title-block,.two-column.reverse .project-body,.two-column.reverse .project-image,.compact-grid .project-body { display:contents; }.two-column .project-title-block > p,.two-column .project-title-block > h3 { width:100%; }.two-column .project-body { width:100%; }.two-column .project-body > * { width:100%; }.dashboard-image,.alarm-image { order:2; width:100%; margin:0; }.two-column .project-body { order:3; }.two-column .project-title-block { order:1; }.protocol-visual,.generator-visual { width:100%; min-height:215px; padding:15px; }.protocol-node { width:78px; height:84px; font-size:10px; padding:8px 4px; }.protocol-arrow { font-size:15px; }.generator-visual { gap:7px; }.sheet,.generator-code { width:91px; min-height:125px; padding:10px; }.sheet b { font-size:15px; margin:8px 0; }.generator-code code { font-size:8px; margin-top:9px; }.generator-arrow { font-size:18px; }.screenshots { padding:77px 0 80px; }.screenshots-head { display:block; margin-bottom:38px; }.screenshots-head h2 { font-size:34px; }.screenshots-head p { margin-top:18px; font-size:14px; line-height:1.85; }.screenshot-grid { display:block; }.screenshot { margin-bottom:18px; }.screenshot img,.screenshot-wide img { height:auto; aspect-ratio:1.55/1; object-fit:cover; }.screenshot figcaption { display:block; padding:12px 13px 14px; }.screenshot figcaption b { display:block; font-size:14px; }.screenshot figcaption span { display:block; margin-top:4px; text-align:left; font-size:11px; }.evidence { display:flex; flex-direction:column; }.evidence-image { min-height:auto; height:315px; }.evidence-copy { padding:68px 20px; }.evidence-copy h2 { font-size:35px; margin:27px 0 36px; }.experience { padding:79px 0 85px; }.experience-grid { display:block; }.timeline { margin-top:38px; }.timeline > div { grid-template-columns:1fr; gap:7px; }.skill-wall { margin-top:43px; padding:22px; }.footer-top { padding:77px 0 58px; }.footer-top h2 { font-size:35px; margin:16px 0 34px; }.footer-mail { font-size:17px; word-break:break-all; }.footer-bottom { min-height:unset; padding:21px 0; display:grid; grid-template-columns:1fr 1fr; gap:12px; }.back-top { margin-left:0; justify-self:end; }.footer-bottom span:nth-of-type(2) { justify-self:end; } }
@media (max-width:800px) { .portfolio { padding:77px 0 82px; }.portfolio-head { display:block; margin-bottom:39px; }.portfolio h2 { font-size:34px; }.portfolio-head p { margin-top:18px; font-size:14px; line-height:1.85; }.catalog { display:block; }.catalog-column,.catalog-column:nth-child(odd),.catalog-column:nth-child(even) { padding:25px 0 8px; border-left:0; }.catalog-title h3 { font-size:19px; }.catalog li { padding:13px 0; }.catalog p { font-size:12px; }.role-summary { margin-top:31px; padding:22px 0; }.role-summary h3 { font-size:16px; }.experience .timeline { margin-top:0; } }
.skill-wall .skill-groups { display:grid; grid-template-columns:1fr 1fr; gap:21px 28px; }.skill-groups section { padding-top:14px; border-top:1px solid rgba(14,41,45,.16); }.skill-groups h3 { margin:0 0 11px; font:500 12px var(--mono); color:var(--ink); }.skill-wall .skill-groups section > div { display:flex; flex-wrap:wrap; gap:8px; }.skill-wall .skill-groups span { font-size:12px; padding:7px 9px; }
@media (max-width:800px) { .skill-wall .skill-groups { grid-template-columns:1fr; gap:17px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.reveal,.hero .reveal,.hero-image { animation:none; transition:none; opacity:1; transform:none; } }
.architecture-map { margin:46px 0 0; padding:24px; border:1px solid var(--line); }.architecture-map-light { background:#d8e1d9; }.architecture-map-dark { background:#092128; border-color:rgba(109,221,214,.28); color:var(--white); }.two-column > .architecture-map { grid-column:1 / -1; margin:0; }.architecture-title { margin:0 0 18px; color:var(--copper); font:500 11px var(--mono); letter-spacing:0; text-transform:uppercase; }.architecture-flow { display:grid; grid-template-columns:minmax(0,1fr) 38px minmax(0,1fr) 38px minmax(0,1fr) 38px minmax(0,1fr); align-items:stretch; }.architecture-stage { display:flex; }.architecture-node { width:100%; min-height:118px; padding:16px; border:1px solid rgba(15,45,49,.28); display:flex; flex-direction:column; justify-content:center; gap:7px; background:rgba(248,251,247,.44); }.architecture-node i { width:22px; height:22px; color:#296c70; }.architecture-node b { font-size:14px; }.architecture-node span { color:var(--muted); font-size:11px; line-height:1.55; }.architecture-node.focus { background:rgba(68,216,210,.16); border-color:#4d9292; }.architecture-link { position:relative; min-height:100%; }.architecture-link:before { content:""; position:absolute; left:8px; right:8px; top:50%; height:1px; background:rgba(26,80,84,.5); }.architecture-link:after { content:""; position:absolute; right:8px; top:calc(50% - 3px); width:7px; height:7px; border-top:1px solid rgba(26,80,84,.7); border-right:1px solid rgba(26,80,84,.7); transform:rotate(45deg); }.architecture-note { margin:17px 0 0; color:var(--muted); font-size:12px; line-height:1.7; }.architecture-map-dark .architecture-title { color:var(--cyan); }.architecture-map-dark .architecture-node { background:rgba(255,255,255,.035); border-color:rgba(145,225,220,.3); }.architecture-map-dark .architecture-node.focus { background:rgba(68,216,210,.13); border-color:var(--cyan); }.architecture-map-dark .architecture-node i { color:var(--cyan); }.architecture-map-dark .architecture-node span,.architecture-map-dark .architecture-note { color:#b7cbca; }.architecture-map-dark .architecture-link:before { background:rgba(154,224,218,.52); }.architecture-map-dark .architecture-link:after { border-color:var(--cyan); }.protocol-visual .architecture-title,.generator-visual .architecture-title { position:absolute; top:17px; left:20px; z-index:1; margin:0; }.protocol-visual .architecture-note,.generator-visual .architecture-note { position:absolute; left:20px; right:20px; bottom:13px; margin:0; color:#b8c8c7; text-align:center; font-size:10px; line-height:1.5; }.protocol-node small { display:block; width:auto; margin:0; color:#b8c8c7; text-align:center; font-size:9px; line-height:1.4; }.package-output small { max-width:82px; color:#c2d3d0; text-align:center; font-size:9px; line-height:1.4; }
@media (max-width:800px) { .architecture-map { margin-top:32px; padding:18px; }.two-column > .architecture-map { margin-top:0; }.architecture-flow { display:flex; flex-direction:column; }.architecture-node { min-height:88px; padding:14px; }.architecture-link { width:1px; min-height:25px; height:25px; margin:0 0 0 28px; }.architecture-link:before { left:0; right:auto; top:0; width:1px; height:100%; }.architecture-link:after { left:-3px; right:auto; top:auto; bottom:0; transform:rotate(135deg); }.architecture-note { font-size:11px; }.protocol-visual,.generator-visual { padding-top:44px; padding-bottom:42px; }.protocol-visual .architecture-note,.generator-visual .architecture-note { left:15px; right:15px; bottom:10px; }.protocol-node { min-height:84px; }.protocol-node small { font-size:8px; }.package-output small { font-size:8px; } }