/* V24 operational UI and viewport-driven motion. Original, MIT. */
.v24-system{width:min(1240px,calc(100% - 64px));margin:24px auto 0;padding:32px;border:1px solid #42615b;border-radius:18px;background:linear-gradient(130deg,#112320,#0d191f);color:#e8f5ef;text-align:left;position:relative;overflow:hidden}
.v24-system-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}.v24-system h3{font-size:clamp(24px,3vw,38px);line-height:1.15;letter-spacing:-.035em;margin:10px 0}.v24-system p{font-size:14px;line-height:1.6;margin:8px 0;color:#c0d4cc}.v24-eyebrow{font-size:10px;letter-spacing:.12em;color:#d4f5a6}.v24-actions{display:flex;gap:10px;flex-wrap:wrap}
.v24-system button,.v24-links button,.v24-nexus-links button{border:1px solid #527268;color:#e9f5ed;background:#1a302b;border-radius:8px;min-height:44px;padding:10px 14px;font:inherit;font-size:13px;cursor:pointer;white-space:normal}.v24-system button:hover,.v24-nexus-links button:hover{border-color:#ccf799;background:#294334}.v24-system button:disabled{cursor:default;opacity:.46}.v24-system .v24-primary{background:#d5f5a4;color:#12201a;font-weight:750;border-color:#d5f5a4}.v24-system :focus-visible,.v24-nexus-links :focus-visible{outline:3px solid #d3f6a5;outline-offset:4px}
.v24-system .v24-message{border-left:3px solid #c5ee97;background:#192e27;padding:12px 14px;min-height:48px;margin:22px 0;color:#f0f5ec}.v24-panel{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:12px 0}.v24-panel[hidden]{display:none!important}.v24-instructions h4{font-size:18px;margin:0 0 12px}.v24-system .v24-rule{font:12px/1.6 ui-monospace,monospace;color:#cee9b7;border-top:1px solid #324b41;padding-top:12px}.v24-system .v24-demo-note{font-size:12px;color:#a6b9b2}.v24-controls{display:grid;gap:14px;min-width:0}.v24-controls>label{display:grid;gap:5px;font-size:13px;color:#d8e9df}.v24-controls select{width:100%;min-height:44px;padding:8px 12px;background:#14231f;color:#ecf5ea;border:1px solid #557063;border-radius:7px;font:inherit}.v24-controls input[type=range]{width:100%;min-width:0;min-height:44px;accent-color:#c7ee9d;touch-action:pan-x}.v24-toggles{display:flex;gap:8px 18px;flex-wrap:wrap}.v24-toggles label{display:flex;align-items:center;gap:8px;min-height:44px;font-size:13px;cursor:pointer}.v24-toggles input{width:20px;height:20px;accent-color:#cdf2a5;flex-shrink:0}
.v24-stats{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin:0}.v24-stats>div{padding:14px 12px;border:1px solid #334f45;border-radius:8px;min-width:0;background:#11241e}.v24-stats dt{font-size:11px;color:#adc4b5;margin-bottom:6px}.v24-stats dd{font-size:16px;margin:0;overflow-wrap:anywhere;color:#f0f7e9;font-weight:650}.v24-progress{height:12px;background:#2d4038;border-radius:12px;overflow:hidden;margin-top:24px}.v24-progress span{display:block;height:100%;width:0;background:#d0ef99;transition:width .12s linear}.v24-bars{display:flex;gap:10px;height:130px;align-items:end;margin:20px 0 4px}.v24-bars>div{flex:1;background:linear-gradient(0deg,#357c80,#90e3c7);height:max(14%,var(--level,40%));border-radius:4px 4px 0 0;position:relative;transition:height .35s ease;min-width:0}.v24-bars>div[data-alert=true]{background:linear-gradient(0deg,#785535,#f9ce87)}.v24-bars span{display:block;text-align:center;font:12px ui-monospace,monospace;color:#04150f;padding-top:6px}.v24-bars small{position:absolute;bottom:-20px;left:0;width:100%;text-align:center;font-size:10px;color:#b9d1c3}.v24-system .v24-linked{display:flex;gap:10px;align-items:center;flex-wrap:wrap;border-top:1px solid #3a5248;margin:28px 0 14px;padding-top:18px;font-size:10px;letter-spacing:.04em}.v24-linked strong{font-size:12px;color:#e0efcf;letter-spacing:0;font-weight:550}.v24-links{display:flex;gap:8px;flex-wrap:wrap}.v24-links button[aria-pressed=true]{color:#ddf5a7;border-color:#b5d790}
.v24-nexus-links{position:absolute!important;left:16px;right:16px;bottom:14px;justify-content:center;display:flex;gap:6px;flex-wrap:wrap;position:relative;z-index:5;margin:12px 0 0}.v24-nexus-links button{font-size:10px;min-height:44px;background:#13221e}.v24-scroll{position:absolute;left:5%;right:5%;bottom:14px;z-index:8;display:flex;gap:12px;align-items:center;color:#cbe3c6;font:10px ui-monospace,monospace;pointer-events:auto}.v24-scroll label{display:flex;align-items:center;gap:10px;flex:1}.v24-scroll input{width:100%;min-width:30px;min-height:44px;accent-color:#cef4a3;touch-action:pan-x}.journey-cut{display:none!important}
.v24-in-view .exp-art{animation:v24Float 7s ease-in-out infinite}.v24-in-view .project-mockup{animation:v24Float 8s ease-in-out infinite}.v24-in-view .about-portrait img{animation:v24Portrait 12s ease-in-out infinite}.v24-in-view .contact-orbit{animation:v24Orbit 16s linear infinite}.v24-in-view .v17-flow-node{animation:v24Pulse 4s ease-in-out infinite}.v24-in-view .v17-flow-node:nth-of-type(2){animation-delay:1.2s}.v24-in-view .v17-flow-node:nth-of-type(3){animation-delay:2.4s}.v24-in-view .floor-guide{background-size:200% 100%;animation:v24Guide 4s linear infinite}
@keyframes v24Float{50%{transform:translateY(-6px)}}@keyframes v24Portrait{50%{transform:scale(1.025)}}@keyframes v24Orbit{to{transform:rotate(360deg)}}@keyframes v24Pulse{50%{opacity:.65}}@keyframes v24Guide{to{background-position:200% 0}}
@media(max-width:850px){.v24-system{width:calc(100% - 32px);padding:22px 16px;border-radius:12px}.v24-system-head{display:block}.v24-system-head>.v24-actions{margin-top:18px}.v24-panel{grid-template-columns:1fr;gap:20px}.v24-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.v24-stats dd{font-size:14px}.v24-toggles{display:grid;grid-template-columns:1fr}.v24-scroll{left:16px;right:16px;bottom:8px;font-size:9px}.v24-scroll label{gap:6px}.v24-scroll label>span{max-width:64px}.v24-nexus-links{justify-content:center}.v24-nexus-links button{flex:1;min-width:70px}}
@media(max-width:370px){.v24-system .v24-actions{display:grid;grid-template-columns:1fr;width:100%}.v24-scroll output{max-width:65px}.v24-stats{gap:8px}.v24-system h3{font-size:25px}}
@media(prefers-reduced-motion:reduce){.v24-in-view *{animation:none!important}.v24-bars>div,.v24-progress span{transition:none}.v24-motion{transform:none!important}}

.v24-in-view .exp-top,.v24-in-view .project-top,.v24-in-view .contact-main h2{animation:v24Light 5s ease-in-out infinite}@keyframes v24Light{50%{text-shadow:0 0 18px #aee49a55}}
@media(prefers-reduced-motion:reduce){.v24-in-view *{animation:none!important}}