/* Source-based portfolio detail and schematic visualization styles.
   Palette: solid black + restrained yellow, no gradients. */
:root { --background:#090909; --yellow:#f0d331; }
.feature h1{font-size:clamp(27px,2.6vw,36px);letter-spacing:-.045em}
.detail-title{font-size:clamp(30px,3vw,42px);letter-spacing:-.05em}
.feature-description{font-size:13px;max-width:620px}
.feature .showcase{grid-template-columns:minmax(0,1.95fr) minmax(125px,.45fr);height:clamp(330px,52vh,570px)}
.feature .motion-frame{background:#0d0f0e;border-color:#353a34}
.feature .snapshot{background:#0f100f;border-color:#323731}
.feature .snapshot.one{background:#171a17}
.feature .snapshot.two{background:#171816}
.feature .snapshot-mark{font:500 13px/1.5 var(--display);letter-spacing:0}
.visual-preview{position:relative;width:100%;height:100%;display:flex;flex-direction:column;padding:20px 20px 57px;overflow:hidden}
.visual-grid{position:absolute;inset:0;pointer-events:none;opacity:.38;background-image:linear-gradient(#282b282b 1px,transparent 1px),linear-gradient(90deg,#282b282b 1px,transparent 1px);background-size:35px 35px}
.visual-head,.visual-footer{position:relative;z-index:2;display:flex;justify-content:space-between;gap:16px;color:#878d81;font:9px var(--mono);letter-spacing:.13em}
.visual-head span:last-child{color:#d9cb67}
.visual-footer{margin-top:auto;display:block}
.visual-footer>span{display:block;margin-bottom:10px}
.visual-steps{display:flex;align-items:center;flex-wrap:wrap;gap:7px;color:#b7bdb2;font:9px/1.5 var(--mono);letter-spacing:0}
.visual-steps b{font-weight:500;color:var(--yellow)}
.hero-illustration{width:100%;min-height:200px;height:100%;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:30px 20px;background:transparent;color:#e3e7e0}
.visual-preview>.hero-illustration{flex:1;min-height:0}
.illustration-meta{position:absolute;top:12px;left:15px;font:9px var(--mono);letter-spacing:.09em;color:#858c82;z-index:3}
.illustration-relay{display:flex;flex-direction:column;gap:24px}
.relay-system{display:flex;align-items:center;justify-content:center;gap:0;width:100%}
.relay-system>div{border:1px solid #394139;background:#151a16;padding:22px 15px;display:flex;flex-direction:column;gap:9px;min-width:0;max-width:170px;flex:1;text-align:center}
.relay-system .relay-core{border-color:#9e934b;background:#232315;box-shadow:0 0 0 1px #c7b44b16}
.relay-system b{font:600 clamp(10px,1.3vw,15px) var(--display);letter-spacing:.01em;white-space:nowrap}
.relay-system small,.relay-system em{color:#aeb7ab;font:9px var(--mono);font-style:normal}
.relay-system .relay-line{height:1px;width:clamp(15px,3.4vw,45px);background:var(--yellow);flex-shrink:0;position:relative}
.relay-system .relay-line:after{content:'';position:absolute;right:0;top:-3px;border-left:5px solid var(--yellow);border-top:3.5px solid transparent;border-bottom:3.5px solid transparent}
.relay-bottom{display:flex;justify-content:center;gap:15px;flex-wrap:wrap}
.relay-bottom span{border:1px solid #3a3f32;padding:8px 11px;color:#8c9986;font:9px var(--mono)}
.illustration-pdf{padding-top:43px}
.duplex-rows{max-width:670px;width:100%;display:flex;flex-direction:column;align-items:center;gap:10px}
.duplex-input{display:flex;align-items:center;gap:7px}
.duplex-input b{font:10px var(--mono);width:65px;color:#a2a9a0}
.duplex-input span,.duplex-output span{display:grid;place-items:center;width:39px;height:48px;background:#1a1e1b;border:1px solid #5d6454;color:#e6e9e1;font:12px var(--mono)}
.duplex-output{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.duplex-output span{border-color:#bba541;background:#2a291c;color:var(--yellow)}
.duplex-merge{display:flex;align-items:center;gap:13px;color:var(--yellow);font:17px var(--mono)}
.duplex-merge span{color:#b6b9ae;font-size:9px}
.illustration-events{padding-top:35px}
.events-phones{display:flex;align-items:center;gap:26px}
.phone-window{width:178px;height:265px;border:3px solid #40464b;border-radius:20px;background:#121923;padding:25px 14px 15px;display:flex;flex-direction:column;gap:11px;box-shadow:8px 11px 0 #202225;transform:rotate(-3deg)}
.phone-window>span{font:8px var(--mono);color:#c0c4d7}
.phone-window>strong{font:600 15px var(--display);color:white}
.event-line{height:4px;width:100%;background:#4e5764}
.event-line.short{width:60%}
.event-box{height:105px;background:#293345;border:1px solid #505f75;padding:12px;display:flex;flex-direction:column;justify-content:space-around}
.event-box small,.event-box i{font:8px var(--mono);color:#a0acb5;font-style:normal}
.event-box b{font:600 13px var(--display)}
.phone-flow{display:flex;flex-direction:column;align-items:center;gap:8px;color:#c7d1c6;font:10px var(--mono)}
.phone-flow span:nth-child(even){color:var(--yellow)}
.illustration-video{display:flex;flex-direction:column;gap:8px}
.video-stage{max-width:500px;width:85%;min-height:115px;background:#151817;border:1px solid #485048;display:flex;align-items:center;justify-content:center;flex-direction:column}
.video-stage>span{font:9px var(--mono);color:#888e89}
.video-number{font:700 55px var(--display);letter-spacing:-.08em}
.video-number span{color:var(--yellow)}
.video-stage>b{font:9px var(--mono);letter-spacing:.2em}
.timeline-track{display:flex;gap:5px;width:85%;max-width:500px}
.timeline-track i{height:28px;flex:1;background:#2e3630;border:1px solid #5b6358}
.timeline-track i:nth-child(3n){background:#6a6641}
.waveform{display:flex;align-items:center;height:45px;width:85%;max-width:500px;gap:5px}
.waveform i{height:20%;flex:1;background:var(--yellow);opacity:.5}
.illustration-aws{display:flex;flex-direction:column;gap:24px}
.aws-services{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.aws-services div{padding:14px 13px;border:1px solid #5a5743;background:#191b17;font:10px var(--mono);white-space:nowrap}
.aws-services span{color:var(--yellow)}
.aws-warning{font:9px/1.7 var(--mono);color:#aaa78a;text-align:center}
.illustration-game{display:flex;flex-direction:column;gap:18px}
.game-tiles{display:grid;grid-template-columns:repeat(15,16px);gap:2px}
.game-tiles span{width:16px;height:16px;background:#171c1d}
.game-tiles .wall{border:1px solid #526d89;background:#26303c}
.game-tiles .coin{position:relative}.game-tiles .coin:after{content:'';background:#eccf45;width:4px;height:4px;position:absolute;left:6px;top:6px;border-radius:50%}
.game-tiles .player{background:#eccf45;border-radius:50%}.game-tiles .enemy{background:#ad6666;border-radius:6px 6px 0 0}
.game-foot{font:9px var(--mono);color:#a9b1a9}
.illustration-ocr{display:flex;flex-direction:column}
.ocr-document{width:60%;max-width:340px;height:75%;max-height:240px;background:#191d1b;border:1px solid #666e64;position:relative;padding:22px}
.ocr-document .ocr-lines{width:100%;height:70%;background:repeating-linear-gradient(#555e51 0px,#555e51 2px,transparent 2px,transparent 19px);opacity:.8}
.ocr-document>span{position:absolute;bottom:12px;left:12px;font:9px var(--mono);color:#b7c7ab}
.ocr-scan{position:absolute;left:10px;right:10px;top:22%;height:2px;background:var(--yellow);box-shadow:0 0 8px #f0d33155;animation:ocr-scan 3.5s ease-in-out infinite alternate}
.illustration-notes{display:flex;flex-direction:column}
.notes-ui{width:min(75%,450px);height:min(75%,210px);display:grid;grid-template-columns:30% 1fr;background:#171a17;border:1px solid #50554c}
.notes-col{border-right:1px solid #4c554c;padding:12px;display:flex;flex-direction:column;gap:15px}
.notes-col span{font:9px var(--mono)}.notes-col i,.notes-editor i{display:block;height:5px;background:#586052;width:90%}
.notes-editor{padding:14px;display:flex;flex-direction:column;gap:17px}
.notes-editor strong{font:600 14px var(--display)}.notes-editor i:nth-last-child(1){width:48%}
.illustration-paint{display:flex;flex-direction:column}
.paint-preview{display:flex;width:min(90%,500px);height:70%;min-height:150px;border:1px solid #666;background:#1b1e1c}
.paint-swatch{width:54px;border-right:1px solid #56564b;display:flex;flex-direction:column;gap:7px;padding:8px}
.paint-swatch span{height:30px;background:#8d8f85}.paint-swatch span:nth-child(2){background:#dec657}.paint-swatch span:nth-child(3){background:#84a7b9}.paint-swatch span:nth-child(4){background:#b78b95}
.paint-preview svg{flex:1;max-width:100%}
.media-bottom{pointer-events:none}
.pause-button{pointer-events:auto}
.feature.is-playing .relay-core{animation:relay-breathe 3s ease-in-out infinite}
.feature.is-playing .timeline-track i:nth-child(3n){animation:timeline-glint 3s ease-in-out infinite}
.feature.is-playing .waveform i{animation:equalizer 1.3s ease-in-out infinite alternate;animation-delay:calc(var(--i, 1)*.1s)}
.feature.is-playing .illustration-ocr .ocr-scan{animation-play-state:running}
.feature:not(.is-playing) .ocr-scan{animation-play-state:paused}
@keyframes relay-breathe{50%{border-color:var(--yellow);box-shadow:0 0 0 7px #e8ce4910}}
@keyframes timeline-glint{50%{border-color:var(--yellow)}}
@keyframes equalizer{50%{transform:scaleY(.65)}}
@keyframes ocr-scan{from{top:22%}to{top:74%}}
.story-detail{max-width:1100px}
.story-head{display:flex;gap:20px;justify-content:space-between;align-items:end;margin-bottom:28px}
.story-head .detail-title{margin:13px 0}
.story-head .detail-subtitle{margin:0 0 14px;max-width:720px;font-size:15px}
.story-status{display:flex;flex-wrap:wrap;gap:9px;color:#a3aba0;font:9px var(--mono);letter-spacing:.04em}
.story-status span{border-left:2px solid #c0a831;padding-left:9px}
.source-link{border:1px solid #77724d;color:var(--yellow);padding:12px 15px;font:10px var(--mono);white-space:nowrap}
.source-link:hover{background:#222014}
.story-visual{height:clamp(320px,48vh,480px);background:#0e110f;border:1px solid #3c433b;position:relative;overflow:hidden}
.story-visual .hero-illustration{height:100%;padding:32px}
.story-visual-caption{position:absolute;bottom:12px;left:15px;font:9px var(--mono);color:#8f988a}
.story-section{padding:47px 0;border-bottom:1px solid #30342e}
.story-section h2{font:600 clamp(19px,2vw,27px)/1.3 var(--display);letter-spacing:-.045em;color:#edece7;margin:14px 0 19px}
.story-section p{font:400 14px/1.86 var(--body);color:#b9beb5;max-width:850px;margin:14px 0}
.section-kicker{color:var(--yellow);font:10px var(--mono);letter-spacing:.12em;text-transform:uppercase}
.highlight-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:#373a33;margin-top:30px;border:1px solid #373a33}
.highlight{background:#131512;padding:22px;display:flex;gap:15px;min-height:82px;align-items:start}
.highlight small{color:var(--yellow);font:10px var(--mono);padding-top:2px}
.highlight span{font:500 13px/1.6 var(--body);color:#dedfd8}
.flow-section .section-explainer{margin-bottom:29px}
.flow-diagram{display:flex;align-items:stretch;gap:8px;width:100%;margin:25px 0}
.flow-clickable{flex:1;min-width:0;background:#111411;border:1px solid #393e36;color:#d2d7cd;text-align:left;display:flex;flex-direction:column;align-items:start;gap:15px;padding:20px 12px;transition:border-color .22s,background .22s}
.flow-clickable:hover{border-color:#ad9e4a}
.flow-clickable.selected{border-color:var(--yellow);background:#272617}
.flow-number{color:var(--yellow);font:10px var(--mono)}
.flow-clickable strong{font:600 12px/1.35 var(--display)}
.flow-clickable small{font:10px/1.45 var(--mono);color:#999e93}
.flow-arrow{flex-shrink:0;align-self:center;color:var(--yellow);font:17px var(--mono)}
.flow-explanation{min-height:113px;display:flex;justify-content:space-between;gap:18px;align-items:center;border:1px solid #444739;background:#161913;padding:22px 25px}
.flow-explanation small{color:var(--yellow);font:10px var(--mono)}
.flow-explanation p{margin:9px 0 0;font-size:13px;line-height:1.6}
.flow-live-mark{font:9px var(--mono);color:#a4ad9d;white-space:nowrap}
.flow-live-mark i{display:inline-block;width:7px;height:7px;background:var(--yellow);border-radius:50%;margin-right:6px}
.support-strip{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
.support-strip span{font:10px/1.5 var(--mono);padding:9px 10px;border:1px solid #383d35;color:#abb4a8}
.technical-two-col{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:24px}
.technical-two-col h3{font:600 13px var(--display);color:var(--yellow)}
.technical-two-col ul{padding-left:18px}
.technical-two-col li{font:13px/1.76 var(--body);color:#b7beb3;margin:7px 0}
.source-list{list-style:square}
.stack-strip{display:flex;flex-wrap:wrap;gap:9px;margin-top:27px}
.stack-strip span{font:11px var(--mono);padding:8px 11px;border:1px solid #4d5145;color:#d5d9cf}
.project-art{border:1px solid #3e4338;padding:20px;background:#131613}
.project-art img{display:block;margin:0 auto;max-width:100%;height:auto;max-height:460px;object-fit:contain}
.project-art p{font-size:11px}
.story-limit{border:1px solid #4a4631;margin:35px 0 30px;padding:24px}
.story-limit p{margin-bottom:0}
.detail-footer{padding:20px 0}
.detail-external{display:inline-block;border:1px solid var(--yellow);padding:12px 15px;color:var(--yellow);font:11px var(--mono)}
.detail-external:hover{background:#292615}
@media(max-width:1120px){
 .flow-diagram{gap:5px}.flow-clickable{padding:14px 8px;gap:12px}
 .flow-clickable strong{font-size:11px}.flow-clickable small{font-size:8px}
 .relay-system>div{padding:15px 6px}.relay-system small,.relay-system em{font-size:7px}
}
@media(max-width:800px){
 .feature .showcase{grid-template-columns:minmax(0,1fr);grid-template-rows:1fr 72px;height:clamp(310px,47vh,420px)}
 .feature .side-images{grid-template-columns:1fr 1fr;grid-template-rows:1fr}
 .visual-preview{padding:15px 12px 54px}.hero-illustration{min-height:160px;padding:24px 12px}
 .visual-footer{display:none}
 .flow-diagram{overflow-x:auto;padding-bottom:12px;scrollbar-color:#6b6445 transparent}
 .flow-clickable{min-width:115px}.flow-arrow{font-size:14px}
 .story-visual{height:310px}
 .highlight{padding:16px}
 .technical-two-col{gap:14px}
 .phone-flow{display:none}
}
@media(max-width:650px){
 .feature h1{font-size:24px}.feature .showcase{height:clamp(285px,44vh,355px);grid-template-rows:1fr 55px}
 .visual-preview{padding:12px 8px 35px}
 .visual-head{font-size:7px}.illustration-meta{font-size:7px}
 .hero-illustration{padding:18px 6px;min-height:140px}
 .relay-system>div{padding:12px 5px;gap:5px}
 .relay-system b{font-size:7px}.relay-system small,.relay-system em{font-size:6px}
 .relay-system .relay-line{width:9px}.relay-bottom{gap:3px}.relay-bottom span{font-size:6px;padding:4px}
 .visual-footer{display:none}
 .illustration-pair span{font-size:6px}
 .duplex-input{gap:3px}.duplex-input b{font-size:7px;width:40px}.duplex-input span,.duplex-output span{width:24px;height:31px;font-size:8px}
 .duplex-output{gap:3px}.duplex-merge{font-size:12px}.duplex-merge span{font-size:6px}
 .phone-window{width:110px;height:174px;padding:20px 7px 7px}.phone-window>strong{font-size:10px}.event-box{height:60px;padding:6px}.event-box b{font-size:8px}
 .video-stage{min-height:70px}.video-number{font-size:31px}.video-stage>span,.video-stage>b{font-size:6px}.timeline-track i{height:16px}
 .aws-services{gap:3px}.aws-services div{font-size:6px;padding:8px 5px}.aws-warning{font-size:7px}
 .game-tiles{grid-template-columns:repeat(15,10px);gap:1px}.game-tiles span{width:10px;height:10px}.game-tiles .coin:after{left:3px;top:3px}
 .game-foot{font-size:7px}.illustration-ocr .ocr-document{width:75%}
 .story-head{align-items:start;flex-direction:column}
 .story-head .detail-title{font-size:27px}
 .story-head .detail-subtitle{font-size:12px}
 .story-visual{height:225px}.story-visual-caption{font-size:7px}
 .story-section{padding:27px 0}
 .story-section h2{font-size:18px}.story-section p{font-size:12px;line-height:1.65}
 .highlight-grid{grid-template-columns:1fr}.highlight{padding:12px;min-height:50px}
 .highlight span{font-size:11px}
 .flow-clickable{min-width:98px}.flow-clickable strong{font-size:9px}
 .flow-explanation{padding:14px;display:block}.flow-explanation p{font-size:11px}.flow-live-mark{font-size:7px;margin-top:9px}
 .support-strip span{font-size:8px}
 .technical-two-col{grid-template-columns:1fr}
 .technical-two-col li{font-size:11px}
 .stack-strip span{font-size:8px}
}
@media(prefers-reduced-motion:reduce){
}