.project-viewer{padding:75px 28px 35px;margin:0;inset:0;width:100%;height:100dvh;max-width:none;max-height:100dvh;overflow:auto;border:0;background:transparent;color:var(--fg)}.project-viewer::backdrop{background:#e8ebf2ec;backdrop-filter:blur(14px)}.project-close{position:fixed;top:18px;right:25px;width:44px;height:44px;border:1px solid #3b3bb52b;border-radius:50%;background:#f9faff;color:var(--fg);font-size:28px;z-index:3;cursor:pointer}.project-detail{max-width:1050px;margin:5vh auto;display:grid;grid-template-columns:1fr 1.1fr;align-items:start;gap:60px}.detail-art{padding:28px 0 0}.detail-art .project-cover{min-height:340px;aspect-ratio:1.12;padding:30px}.detail-art .cover-title{font-size:38px}.detail-art .cover-top,.detail-art .cover-sub,.detail-art .cover-badge{font-size:11px}.detail-art .wood-frame{padding:20px}.detail-art .mat{padding:15px}.detail-category{font:11px ui-monospace,Consolas,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--a);margin:10px 0 13px}.detail-copy h2{font-size:40px;line-height:1.1;margin-bottom:20px}.detail-summary{font-size:16px}.detail-stack{display:flex;flex-wrap:wrap;gap:7px;margin:20px 0}.detail-stack span{font-size:11px;border:1px solid #3b3bb526;border-radius:20px;padding:5px 11px;background:#ffffff65}.detail-limit{border-left:2px solid #b6bad3;padding:3px 0 3px 14px;font-size:12px;margin:22px 0}.detail-actions{display:flex;gap:10px;flex-wrap:wrap}.detail-actions .btn{font-size:12px}.local-demo{border:1px solid #3b3bb52a;background:#f9faffad;border-radius:12px;padding:18px;margin-top:20px}.local-demo h3{font-size:15px;margin:0 0 10px}.local-demo p{font-size:11px}.local-demo pre{white-space:pre-wrap;overflow-wrap:anywhere;background:#171b30;color:#d7ddf4;padding:14px;border-radius:8px;font-size:11px;line-height:1.7;margin:13px 0}.project-open:focus-visible,.project-close:focus-visible,a:focus-visible{outline:3px solid var(--a);outline-offset:5px}
.project-gallery{padding:100px 30px 90px;background:linear-gradient(180deg,#eef0fb80,#e9ecf8)}.project-heading{display:flex;justify-content:space-between;gap:35px;align-items:start}.project-heading h2{font-size:clamp(36px,4.5vw,60px);letter-spacing:-.05em;line-height:1.04;margin-bottom:18px}.project-heading h2 span{color:var(--a)}.project-heading p{max-width:500px;font-size:15px}.trial-marker{font:10px ui-monospace,monospace;border:1px solid #3b3bb530;border-radius:30px;padding:8px 12px;white-space:nowrap;color:var(--a)}.project-wall{display:grid;grid-template-columns:1fr 1fr;gap:45px 30px;padding:50px 0}.project-frame-card{min-width:0;position:relative}.project-frame-card:first-child{grid-column:1/-1}.project-index{font:11px ui-monospace,monospace;color:#737996;margin-bottom:10px}.project-open{width:100%;border:0;background:none;padding:0;cursor:zoom-in;text-align:left;display:block}.project-shell{padding:0}.project-surface{padding:0}.project-cover{height:300px;position:relative;overflow:hidden;border-radius:18px;isolation:isolate;transition:transform .4s,box-shadow .4s;box-shadow:0 12px 28px #25274912}.project-open:hover .project-cover{transform:translateY(-5px);box-shadow:0 20px 40px #25274926}.project-meta{display:flex;justify-content:space-between;gap:20px;margin-top:18px;align-items:center}.project-meta h3{font-size:23px;letter-spacing:-.035em}.project-meta p{font-size:12px;margin-top:7px}.project-meta>span{width:42px;height:42px;border:1px solid #3b3bb52b;display:grid;place-items:center;border-radius:50%;color:var(--a)}.project-footnote{font-size:11px;max-width:650px;text-align:center;border-top:1px solid var(--line);margin:auto;padding-top:25px}.schematic-label{position:absolute;right:20px;bottom:18px;font:8px ui-monospace,monospace;letter-spacing:.12em;opacity:.55}.design-caption{position:absolute;left:26px;bottom:25px;font-size:18px;letter-spacing:-.03em;font-weight:600;z-index:4}.design-log{background:#0c1722;color:#c9f5ef;border:1px solid #438d8c70;border-radius:8px}.trace-top{display:flex;gap:15px;align-items:center;padding:22px 26px;font:9px ui-monospace,monospace;letter-spacing:.12em;color:#79aaa9;border-bottom:1px solid #629f9d30}.trace-top i{height:5px;width:5px;background:#7bdfc9;border-radius:50%}.trace-lines{position:absolute;left:26px;top:76px;display:grid;gap:11px;width:60%;font:14px ui-monospace,monospace;color:#749496}.trace-lines .selected{background:#70dfc918;color:#b0f7e7;border-left:2px solid #7ce8c7;padding:9px 15px;animation:trace-glow 5s ease-in-out 2}.lens-ring{position:absolute;width:210px;height:210px;right:9%;top:35px;border-radius:50%;border:1px solid #80d1c050;box-shadow:0 0 0 20px #7fd9c50a,inset 0 0 55px #72d7c512}.lens-ring:before{content:'⌕';position:absolute;inset:0;display:grid;place-items:center;font-size:135px;font-weight:300;color:#a2e6dc}.design-resume{background:#eee3f7;color:#473461;border:1px solid #ccbbde;border-radius:36px 8px 36px 8px}.resume-grid{position:absolute;inset:0;background:radial-gradient(#af92c946 1px,transparent 1px);background-size:16px 16px}.paper{position:absolute;background:#fffdf9;box-shadow:0 12px 24px #68477c24;border:1px solid #d6c8d9;width:145px;height:180px;padding:18px;top:35px;border-radius:3px}.paper span{font:8px ui-monospace,monospace;letter-spacing:.1em}.paper strong{font-size:32px;display:block;margin:8px 0}.paper i{display:block;height:4px;background:#ded4e4;margin:9px 0}.paper i:nth-of-type(2){width:70%}.paper b{display:inline-block;font:8px ui-monospace,monospace;margin-top:12px;background:#e8e9d5;padding:5px}.paper.back{left:46%;transform:rotate(10deg)}.paper.front{left:20%;transform:rotate(-8deg);animation:paper-float 5s ease-in-out 2}.keyword{font:8px ui-monospace,monospace;background:#e7daf0;padding:7px;margin-top:13px}.design-secret{background:#111e19;color:#c9f6bc;border-radius:4px;border:1px solid #69a777}.scanner-grid{position:absolute;inset:0;background:linear-gradient(#6f9b7514 1px,transparent 1px),linear-gradient(90deg,#6f9b7514 1px,transparent 1px);background-size:24px 24px}.scan-sweep{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,#8bf66e12 49%,#a4ff7e90 50%,transparent 51%);transform:translateY(-45%);animation:sweep 4s linear 3}.scan-brackets{position:absolute;left:15%;right:15%;top:62px;border:1px solid #b5ec8b80;padding:22px 15px;text-align:center;background:#14271cba}.scan-brackets span,.scan-brackets small{display:block;font:9px ui-monospace,monospace;letter-spacing:.16em}.scan-brackets strong{display:block;font:30px ui-monospace,monospace;margin:11px 0;letter-spacing:.08em}.scan-corners{position:absolute;inset:20px;border-top:1px solid #9de18530;border-bottom:1px solid #9de18530;pointer-events:none}.design-auth{background:#f3e8dd;color:#6c3620;border:1px solid #dec4ac;border-radius:18px 18px 5px 5px}.auth-label{font:9px ui-monospace,monospace;letter-spacing:.14em;position:absolute;top:24px;left:26px}.event-bars{position:absolute;top:83px;left:26px;right:26px;height:90px;display:flex;gap:10px;align-items:end;border-bottom:1px solid #b6774e}.event-bars i{flex:1;background:#cf7a4e;height:18%;border-radius:3px 3px 0 0;transform-origin:bottom;animation:bars-in 1.2s ease-out}.event-bars i:nth-child(3n){height:70%;background:#a95336}.event-bars i:nth-child(4n){height:95%}.event-bars i:nth-child(2n){height:40%}.event-line{display:flex;gap:9px;position:absolute;top:190px;left:26px;right:26px;font:9px ui-monospace,monospace;align-items:center}.event-line span{border:1px solid #c6977c;padding:6px 11px;border-radius:20px}.event-line b{margin-left:auto;font-weight:400}.design-pcap{background:#112751;color:#b5d6ff;border:1px solid #6997db70;border-radius:20px;box-shadow:inset 0 0 70px #3572c52a}.packet-grid{position:absolute;inset:0;background:linear-gradient(#94baff0d 1px,transparent 1px),linear-gradient(90deg,#94baff0d 1px,transparent 1px);background-size:30px 30px}.packet-label{position:absolute;left:26px;top:24px;font:9px ui-monospace,monospace;letter-spacing:.13em}.network{position:absolute;left:28px;right:28px;top:85px;display:flex;align-items:center}.node{width:66px;height:66px;border:1px solid #91baff;border-radius:16px;display:grid;place-items:center;font:12px ui-monospace,monospace;background:#1d3b6e;box-shadow:0 0 30px #75abfa20}.node.dest{border-radius:50%}.flow{height:1px;background:#74a8f85e;flex:1;position:relative}.flow i{width:12px;height:6px;position:absolute;top:-3px;left:0;background:#9ad2ff;box-shadow:0 0 10px #9ad2ff80;animation:flow 3s linear 4}.flow i:nth-child(2){animation-delay:.8s}.flow i:nth-child(3){animation-delay:1.6s}.protocols{position:absolute;top:178px;left:28px;display:flex;gap:10px}.protocols span{font:9px ui-monospace,monospace;border:1px solid #779dd54f;padding:6px 14px;border-radius:4px}.detail-art .project-cover{height:340px;min-height:0;aspect-ratio:auto;padding:0}.detail-art .project-shell,.detail-art .project-surface{padding:0}.detail-art .lens-ring{right:20px;width:170px;height:170px;top:65px}.detail-art .lens-ring:before{font-size:100px}.detail-art .trace-lines{font-size:11px;width:78%}.detail-art .design-caption{font-size:17px}.detail-art .schematic-label{bottom:9px;font-size:7px}.detail-art .trace-top{font-size:8px;gap:10px}.detail-art .paper{top:60px}.detail-art .scan-brackets{top:80px}.detail-art .event-bars,.detail-art .network{top:100px}.detail-art .event-line,.detail-art .protocols{top:215px}.design-scope{background:#101b2e;color:#cfe4ff;border:1px solid #5f7fb870;border-radius:14px;box-shadow:inset 0 0 60px #2c4a7a2a}.scope-grid{position:absolute;inset:0;background:linear-gradient(#8fb8ff0d 1px,transparent 1px),linear-gradient(90deg,#8fb8ff0d 1px,transparent 1px);background-size:26px 26px}.scope-label{position:absolute;left:26px;top:24px;font:9px ui-monospace,monospace;letter-spacing:.13em;color:#8fb0d8}.port-rows{position:absolute;left:26px;top:60px;display:grid;gap:9px;font:12px ui-monospace,monospace;color:#7f97b8;width:62%}.port-rows span{padding:5px 12px}.port-rows .hit{color:#bfe0ff;background:#5f9dff14;border-left:2px solid #7fb0ff}.scope-ring{position:absolute;width:150px;height:150px;right:8%;top:65px;border-radius:50%;border:1px solid #7fb0ff55;box-shadow:0 0 0 16px #7fb0ff0a,inset 0 0 40px #7fb0ff14}.scope-ring:before{content:'\25CE';position:absolute;inset:0;display:grid;place-items:center;font-size:84px;color:#a9ccff}.design-gate{background:#221a10;color:#ffe6bb;border:1px solid #c9974f80;border-radius:10px 30px 10px 30px}.gate-grid{position:absolute;inset:0;background:radial-gradient(#e8b45f22 1px,transparent 1px);background-size:18px 18px}.gate-label{position:absolute;left:26px;top:24px;font:9px ui-monospace,monospace;letter-spacing:.14em;color:#cfa25e}.gate-card{position:absolute;left:15%;right:15%;top:62px;border:1px solid #e0b36a80;background:#2b2113cc;padding:20px 18px;text-align:center;border-radius:6px}.gate-card span{display:block;font:9px ui-monospace,monospace;letter-spacing:.16em;color:#d8b076}.gate-card i{display:block;height:4px;background:#5a4626;margin:9px 0}.gate-card i:nth-of-type(2){width:65%;margin-left:auto;margin-right:auto}.gate-card b{display:block;font:20px ui-monospace,monospace;margin:8px 0;letter-spacing:.1em}.gate-card strong{display:inline-block;font:11px ui-monospace,monospace;background:#e8b45f;color:#221a10;padding:6px 14px;border-radius:20px}.gate-attempts{position:absolute;top:216px;left:26px;right:26px;display:flex;gap:9px;font:9px ui-monospace,monospace}.gate-attempts span{border:1px solid #c9974f66;padding:6px 11px;border-radius:20px}.detail-art .gate-card{top:80px}.detail-art .port-rows{font-size:11px;width:78%}.detail-art .gate-attempts{top:225px}@keyframes trace-glow{50%{background:#70dfc935}}@keyframes paper-float{50%{transform:rotate(-5deg) translateY(-7px)}}@keyframes sweep{to{transform:translateY(45%)}}@keyframes flow{to{left:96%;opacity:.2}}@keyframes bars-in{from{transform:scaleY(.1)}}
@media(max-width:800px){.project-detail{grid-template-columns:1fr;max-width:550px;margin:0 auto;gap:25px}.detail-art{width:100%;max-width:450px;margin:auto}.project-heading{display:block}.trial-marker{display:inline-block;margin-top:18px}.lens-ring{right:5%}}
@media(max-width:520px){.project-gallery{padding:65px 23px 70px}.project-wall{grid-template-columns:1fr;gap:34px;padding-top:36px}.project-frame-card:first-child{grid-column:auto}.project-heading h2{font-size:39px}.project-cover{height:285px}.project-meta h3{font-size:21px}.project-meta p{font-size:11px}.project-heading p{font-size:14px}.trace-top{font-size:7px;gap:8px;padding:20px}.trace-lines{font-size:11px;left:20px;width:88%;z-index:2}.lens-ring{width:150px;height:150px;right:-15px;top:70px;opacity:.28}.lens-ring:before{font-size:100px}.design-caption{font-size:16px;left:20px;bottom:28px}.schematic-label{font-size:7px;bottom:10px}.paper{width:125px;height:175px;padding:15px}.paper.front{left:14%}.paper.back{left:43%}.scan-brackets{left:12%;right:12%}.scan-brackets strong{font-size:25px}.event-line{gap:5px;left:20px;right:20px}.event-line span{padding:6px 8px}.event-bars{gap:7px}.node{width:55px;height:55px}.network{left:22px;right:22px}.project-viewer{padding:65px 22px 32px}.project-detail{gap:24px}.detail-copy h2{font-size:31px}.detail-summary{font-size:14px}.detail-category{font-size:10px}.detail-limit{font-size:11px}.detail-art .project-cover{height:285px}.detail-art .lens-ring{top:60px;right:-15px;opacity:.28}.detail-art .trace-lines{font-size:11px;width:88%}.detail-art .design-caption{font-size:16px}.project-footnote{font-size:10px}.port-rows{font-size:11px;left:20px;width:88%}.scope-ring{width:120px;height:120px;right:-15px;opacity:.28}.scope-ring:before{font-size:70px}.gate-card{left:10%;right:10%;top:50px;padding:12px 10px}.gate-card b{font-size:16px;margin:5px 0}.gate-attempts{top:195px}.detail-art .gate-card{top:50px}.detail-art .gate-attempts{top:195px}}
@media(prefers-reduced-motion:reduce){.project-cover *{animation:none!important}.project-cover{transition:none!important}}