:root { color-scheme:light dark; --bg:#f7f8fa; --surface:#fff; --soft:#edf1f6; --text:#1b2432; --muted:#536174; --line:#dce2ea; --accent:#245bc2; --success:#176946; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color:var(--text); background:var(--bg); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; scroll-padding-top:100px; } body { margin:0; min-width:320px; line-height:1.6; } a { color:inherit; text-decoration:none; } button,input { font:inherit; } img { max-width:100%; display:block; } h1,h2,h3,p { margin-top:0; } h1,h2,h3 { line-height:1.12; } p { color:var(--muted); } :focus-visible { outline:3px solid var(--accent); outline-offset:5px; border-radius:4px; } ::selection { background:#c9dcfc; color:#15253c; }
.skip-link { position:fixed; top:-100px; left:20px; z-index:100; padding:12px 18px; background:var(--surface); border:2px solid var(--accent); } .skip-link:focus { top:16px; }
.navbar { max-width:1440px; margin:auto; min-height:96px; padding:20px clamp(24px,5vw,80px); display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid var(--line); }
.wordmark { font-size:1.65rem; font-weight:750; letter-spacing:-.07em; } .wordmark span { color:var(--accent); } .navbar nav { display:flex; align-items:center; gap:30px; font-size:.9rem; } .navbar nav a { min-height:44px; display:inline-flex; align-items:center; gap:18px; } .navbar nav a[aria-current] { color:var(--accent); font-weight:600; } .nav-contact { margin-left:22px; }
.section-container { max-width:1280px; margin-inline:auto; padding-inline:clamp(24px,5vw,64px); } .hero { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(260px,.8fr); gap:clamp(40px,7vw,110px); padding-block:88px 100px; align-items:center; }
.eyebrow { display:block; font-size:.75rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:20px; } .availability-dot { display:inline-block; width:7px; height:7px; background:var(--success); border-radius:50%; margin-right:8px; }
.hero h1,.page-intro h1 { font-size:clamp(2.9rem,5.7vw,5.2rem); font-weight:620; letter-spacing:-.06em; margin:0 0 26px; } .hero h1 span { color:var(--accent); } .hero-content > p { max-width:560px; font-size:1.12rem; line-height:1.7; margin-bottom:32px; } .hero-actions { display:flex; gap:12px; flex-wrap:wrap; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:28px; min-height:48px; padding:12px 20px; border:1px solid var(--line); border-radius:9px; font-size:.9rem; font-weight:550; background:var(--surface); } .button:hover { border-color:var(--accent); } .button.primary { background:var(--accent); color:#fff; border-color:var(--accent); } .button.primary:hover { background:#194699; } .text-link { color:var(--accent); display:inline-flex; align-items:center; min-height:44px; font-size:.9rem; }
.portrait { margin:0; align-self:center; } .portrait img { width:100%; height:auto; aspect-ratio:4/4.6; object-fit:cover; object-position:center 30%; border-radius:20px; background:var(--soft); } .portrait figcaption { margin-top:18px; display:flex; flex-direction:column; font-size:.8rem; } .portrait figcaption strong { font-weight:600; } .portrait figcaption span { color:var(--muted); margin-top:3px; font-size:.75rem; }
.work-section { padding-block:50px 72px; } .section-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:32px; } .section-heading .eyebrow { margin-bottom:12px; } .section-heading h2,.about-grid h2 { font-size:clamp(1.8rem,3vw,2.5rem); letter-spacing:-.045em; font-weight:600; margin-bottom:0; } .section-heading p { max-width:580px; margin:16px 0 0; }
.project-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; } .project-card { border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--surface); transition:border-color .15s; } .project-card:hover { border-color:var(--accent); } .project-art { height:225px; padding:24px; background:var(--soft); display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; } .project-art > span { font-size:.85rem; font-weight:550; } .project-art small { color:var(--muted); font-size:.75rem; } .project-copy { padding:24px; } .project-copy .eyebrow { font-size:.65rem; margin-bottom:12px; } .project-copy h3 { font-size:1.25rem; letter-spacing:-.025em; display:flex; justify-content:space-between; gap:16px; margin-bottom:14px; } .project-copy h3 span { color:var(--accent); font-weight:400; } .project-copy p { font-size:.9rem; margin-bottom:24px; } .project-tags { font-size:.7rem; color:var(--muted); }
.market-art { background:#eaf0fc; color:#284f8b; } .market-bars { display:flex; align-items:end; gap:9px; height:90px; padding:0 12px; } .market-bars i { background:#789ad7; flex:1; height:25%; border-radius:4px 4px 0 0; } .market-bars i:nth-child(2) { height:45%; } .market-bars i:nth-child(3) { height:32%; } .market-bars i:nth-child(4) { height:55%; } .market-bars i:nth-child(5) { height:44%; } .market-bars i:nth-child(6) { height:68%; } .market-bars i:nth-child(7) { height:62%; } .market-bars i:nth-child(8) { height:83%; } .market-bars i:nth-child(9) { height:100%; background:#315eac; } .shell-art { background:#1d2b30; color:#dcebe7; } .shell-art code { font-size:.85rem; line-height:2; } .shell-art em { font-style:normal; color:#a7d8ba; } .shell-art b { font-weight:400; color:#a7d8ba; } .route-art { background:#eeece5; color:#665b38; } .route-art svg { width:100%; margin:auto; }
.playground { padding-block:64px 96px; } .playground-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr); gap:24px; } #terminal-container { min-height:390px; max-height:570px; overflow:auto; background:#192229; color:#e5edf1; border-radius:16px; border:1px solid #35434d; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.8rem; } .terminal-chrome { display:flex; gap:18px; align-items:center; padding:15px 20px; border-bottom:1px solid #35434d; font-size:.7rem; color:#b4c2ce; } .terminal-dots { color:#92a8b8; letter-spacing:3px; } .terminal-inner { padding:22px; } .terminal-ascii { font-size:clamp(.48rem,1vw,.72rem); line-height:1.2; color:#a8c3d3; overflow-x:auto; } .terminal-reply { white-space:pre-wrap; line-height:1.7; margin-bottom:10px; overflow-wrap:anywhere; } .input-line,.terminal-line { display:flex; align-items:center; flex-wrap:wrap; gap:8px; } .prompt-wrapper { white-space:nowrap; } .shell-green { color:#9bd8b8; } .shell-blue { color:#9bc5f0; } #terminal-input { min-width:120px; flex:1; min-height:44px; background:transparent; border:0; color:#e5edf1; font-size:1rem; padding:4px; } #terminal-input::placeholder { color:#a5b4c1; } .terminal-line { margin-block:8px; }
.status-panel { border:1px solid var(--line); background:var(--surface); border-radius:16px; padding:26px; } .status-panel summary { min-height:44px; font-weight:600; cursor:pointer; } .status-panel dl { display:grid; grid-template-columns:1fr 1.3fr; gap:16px; font-size:.8rem; } .status-panel dt { color:var(--muted); } .status-panel dd { margin:0; text-align:right; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; } .status-panel p { font-size:.75rem; padding-top:16px; margin-bottom:0; border-top:1px solid var(--line); }
.site-footer { max-width:1280px; margin:auto; padding:28px clamp(24px,5vw,64px); border-top:1px solid var(--line); display:flex; flex-wrap:wrap; align-items:center; gap:24px; } .site-footer > span { color:var(--muted); font-size:.75rem; } .site-footer > div { margin-left:auto; display:flex; gap:22px; } .site-footer > div a { min-height:44px; display:flex; align-items:center; font-size:.8rem; }
.page-intro { padding-block:80px 48px; } .page-intro > p { font-size:1.15rem; max-width:740px; } .page-intro > .text-link { margin-bottom:30px; } .wide-link { margin-top:32px; display:flex; align-items:center; justify-content:space-between; gap:24px; border:1px solid var(--line); border-radius:16px; padding:32px; background:var(--surface); } .wide-link .eyebrow { margin-bottom:12px; } .wide-link h2 { font-size:1.5rem; margin-bottom:10px; } .wide-link p { margin:0; } .wide-link > span { font-size:1.8rem; color:var(--accent); }
.about-grid { padding-block:40px 100px; display:grid; grid-template-columns:1fr 1fr; gap:80px; } .about-grid h2 { margin-bottom:24px; } .about-grid p { line-height:1.8; } .experience-list article { border-top:1px solid var(--line); padding:24px 0; } .experience-list h3 { font-size:1rem; margin-bottom:8px; } .experience-list p { font-size:.9rem; margin:0; } .maintenance-panel { margin:0 0 100px; padding:40px; border:1px solid var(--line); border-radius:18px; background:var(--surface); }
.demo-layout { display:block; min-height:100vh; height:auto; background:var(--bg); color:var(--text); font-family:inherit; } .demo-layout .terminal-window { width:100%; height:500px; margin-bottom:80px; background:#192229; border:1px solid #35434d; border-radius:16px; box-shadow:none; color:#e5edf1; font-family:ui-monospace,monospace; } .demo-layout .terminal-header { background:#25343e; padding:16px 22px; } .demo-layout .terminal-body { min-height:0; line-height:1.6; } .demo-layout input[type=text] { min-height:44px; min-width:80px; width:100%; } .demo-layout .input-area { align-items:center; } .demo-layout .prompt { white-space:nowrap; color:#9bd8b8; font-size:.8rem; } .demo-layout .error-line { color:#ffaca5; } .demo-layout .suggestion-line { color:#9bd8b8; } .output-line { white-space:pre-wrap; overflow-wrap:anywhere; }
@media(prefers-color-scheme:dark) { :root { --bg:#11171d; --surface:#192229; --soft:#222e39; --text:#edf2f6; --muted:#afbdc9; --line:#33414e; --accent:#9abbfa; --success:#9bd8b8; } .button.primary { background:#3468cd; border-color:#3468cd; color:#fff; } .market-art { background:#202f49; color:#bfd2f2; } .market-art small { color:#bfd2f2; } .route-art { background:#343329; color:#dfd1a3; } }
@media(max-width:950px) { .hero { gap:36px; grid-template-columns:1.4fr 1fr; padding-block:64px; } .hero h1 { font-size:3.5rem; } .project-grid { grid-template-columns:1fr 1fr; } .project-card:last-child { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; } .project-card:last-child .project-art { height:100%; min-height:225px; } .playground-grid { grid-template-columns:1fr; } .about-grid { gap:40px; } }
@media(max-width:620px) { .navbar { min-height:80px; padding:16px 24px; flex-wrap:wrap; gap:8px; } .navbar nav { gap:22px; flex:1; justify-content:flex-end; font-size:.8rem; } .nav-contact { display:none!important; } .hero { grid-template-columns:1fr; padding-block:48px; gap:36px; } .hero h1 { font-size:clamp(2.7rem,10vw,3.8rem); } .hero .eyebrow { font-size:.65rem; letter-spacing:.04em; } .portrait { max-width:300px; } .portrait img { aspect-ratio:1; } .hero-actions .button { font-size:.8rem; padding:12px 15px; gap:15px; } .work-section { padding-block:30px 48px; } .project-grid { grid-template-columns:1fr; } .project-card:last-child { display:block; } .section-heading { align-items:start; } .section-heading > .text-link { flex-shrink:0; } .section-heading h2 { font-size:1.8rem; } .playground { padding-block:36px 60px; } .status-panel { padding:22px; } .site-footer { gap:12px; } .site-footer > div { margin-left:0; width:100%; } .page-intro { padding-block:48px 24px; } .about-grid { grid-template-columns:1fr; gap:40px; padding-bottom:60px; } .wide-link,.maintenance-panel { padding:24px; } .demo-layout .input-area { flex-wrap:wrap; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation:none!important; transition:none!important; } }
@media(prefers-contrast:more) { :root { --line:var(--muted); } }