@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;800&display=swap');

:root { --bg:#080808; --surface:#101010; --text:#e8e8e8; --muted:#969696; --line:#282828; --red:#ef3348; }
* { box-sizing:border-box; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
html, body { width:100%; height:100%; margin:0; overflow:hidden; }html { background:#070506; color-scheme:dark; }html.light { background:#e7e8ea; color-scheme:light; }
body { background:radial-gradient(circle at 50% 35%,#21080e 0,#0d0608 52%,#070506 100%); color:var(--text); font:400 16px/1.5 Inter,Arial,sans-serif; transition:background .3s,color .3s; touch-action:pan-y pinch-zoom; }
.site-loader { position:fixed; inset:0; z-index:100; display:grid; place-items:center; background:var(--bg); transition:opacity .45s ease,visibility .45s ease; }.site-loader span { display:grid; place-items:center; width:42px; height:42px; border:1px solid var(--red); color:var(--red); font-weight:800; animation:loaderPulse 1s ease-in-out infinite alternate; }body.loaded .site-loader { opacity:0; visibility:hidden; }@keyframes loaderPulse { to { transform:scale(1.12); box-shadow:0 0 22px #ef334444; } }
body.light { --bg:#f3f4f5; --surface:#fff; --text:#1a191c; --muted:#5e5d62; --line:#bfc0c5; --red:#b91f39; background:linear-gradient(#1a191c03 1px,transparent 1px),linear-gradient(90deg,#1a191c03 1px,transparent 1px),linear-gradient(145deg,#fafafb 0,#f3f4f5 58%,#ebecef 100%); background-size:32px 32px,32px 32px,100% 100%; }
body.theme-changing,body.theme-changing * { transition:background-color .42s ease,background-image .42s ease,color .42s ease,border-color .42s ease,box-shadow .42s ease !important; }
header { position:fixed; top:0; left:0; right:0; z-index:10; height:76px; display:flex; align-items:center; justify-content:space-between; padding:0 42px; }
.header-controls { display:flex; align-items:center; gap:10px; }
.brand { position:relative; color:var(--text); font-weight:800; letter-spacing:.18em; text-decoration:none; transition:color .25s; }
.brand::after { content:""; position:absolute; left:0; bottom:-8px; width:0; height:1px; background:var(--red); transition:width .25s; }
.brand:hover { color:var(--red); }.brand:hover::after { width:100%; }
.theme-button,.sound-button { display:flex; align-items:center; justify-content:center; gap:6px; min-height:30px; border:1px solid #ffffff12; border-radius:4px; background:#ffffff05; color:var(--muted); padding:7px 8px; font:500 13px/1 Inter,Arial,sans-serif; cursor:pointer; transition:color .25s,border-color .25s,background .25s; }.control-icon { width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.8; }.theme-icon { overflow:visible; }.theme-sun,.theme-moon,.sound-waves,.sound-off { transform-origin:center; transition:opacity .28s ease,transform .35s cubic-bezier(.22,1,.36,1); }.theme-moon,.sound-off { opacity:0; transform:scale(.55) rotate(-28deg); }.theme-button[aria-pressed="true"] .theme-sun,.sound-button[aria-pressed="false"] .sound-waves { opacity:0; transform:scale(.55) rotate(28deg); }.theme-button[aria-pressed="true"] .theme-moon,.sound-button[aria-pressed="false"] .sound-off { opacity:1; transform:scale(1) rotate(0); }.theme-button span,.sound-button span { font-size:8px; font-weight:600; letter-spacing:.1em; line-height:1; }
.theme-button:hover,.sound-button:hover { border-color:var(--red); color:var(--text); }.sound-button[aria-pressed="true"] { color:var(--red); }.theme-button:focus-visible,.sound-button:focus-visible,.open-link:focus-visible,.top-progress button:focus-visible,.project-controls button:focus-visible { outline:1px solid var(--red); outline-offset:3px; }
.top-progress { position:fixed; top:18px; left:50%; z-index:12; display:flex; gap:5px; width:min(200px,40vw); transform:translateX(-50%); transition:opacity .2s; }
.navigation-tip { position:fixed; bottom:28px; left:50%; z-index:4; margin:0; color:var(--text); font-size:9px; font-weight:500; letter-spacing:.11em; opacity:0; pointer-events:none; transform:translate(-50%,8px); transition:opacity .3s ease,transform .3s ease; white-space:nowrap; }.show-navigation-tip:not(.on-work) .navigation-tip { opacity:.68; transform:translate(-50%,0); }
.top-progress button, .project-controls button { height:2px; flex:1; border:0; padding:0; background:var(--line); cursor:pointer; transition:background .25s,flex .25s; }
.top-progress button.active, .project-controls button.active { background:var(--red); box-shadow:0 0 8px #ef334466; }.top-progress button.active { flex:1.35; }
.top-progress button, .project-controls button { position:relative; }.top-progress button::after, .project-controls button::after { content:attr(aria-label); position:absolute; top:9px; left:50%; width:max-content; max-width:180px; padding:4px 6px; transform:translateX(-50%); background:var(--surface, #101010); color:var(--text); font:500 9px Inter,Arial,sans-serif; letter-spacing:.04em; opacity:0; pointer-events:none; transition:opacity .2s; }.top-progress button:hover::after, .project-controls button:hover::after { opacity:1; }
.top-progress button::after { content:attr(data-tooltip); top:11px; padding:5px 7px; border:1px solid var(--line); border-radius:3px; font-size:8px; letter-spacing:.12em; text-transform:uppercase; }.top-progress button:hover::after { opacity:1; }
.top-progress { height:28px; align-items:center; }.top-progress button { height:28px; background:transparent!important; }.top-progress button::before { content:""; position:absolute; top:50%; left:0; width:100%; height:2px; background:var(--line); }.top-progress button.active { box-shadow:none; }.top-progress button.active::before { background:var(--red); box-shadow:0 0 8px #ef334466; }.top-progress button::after { top:29px; }
.screen { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:90px 10vw; opacity:0; transform:translateY(22px); visibility:hidden; pointer-events:none; transition:opacity .42s cubic-bezier(.22,1,.36,1),transform .42s cubic-bezier(.22,1,.36,1),visibility 0s linear .42s; }
.screen.active { opacity:1; transform:none; visibility:visible; pointer-events:auto; transition-delay:0s; }
.hero { text-align:center; }.hero-content { display:flex; flex-direction:column; align-items:center; }.hero-content::before { content:"N"; display:grid; place-items:center; width:28px; height:28px; margin-bottom:22px; border:1px solid var(--red); color:var(--red); font-size:12px; font-weight:800; }
.hero h1 { margin:0; font-size:clamp(4.5rem,13vw,11rem); line-height:.9; font-weight:800; letter-spacing:.18em; }
.hero p { margin:22px 0 28px; color:var(--muted); letter-spacing:.05em; }.hero p::before { content:""; display:block; width:26px; height:1px; margin:0 auto 14px; background:var(--red); }.hero span { color:var(--muted); font-size:10px; letter-spacing:.15em; }
.work-wrap { position:relative; width:min(980px,100%); height:min(520px,68vh); display:flex; align-items:center; transform:translateY(-5vh); }
.project-row { position:relative; width:100%; min-height:320px; }
.project { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; max-width:760px; padding-left:30px; border-left:1px solid var(--line); opacity:0; transform:translateX(28px); pointer-events:none; transition:opacity .32s ease,transform .32s cubic-bezier(.22,1,.36,1); }.project::before { content:""; position:absolute; left:-1px; top:50%; width:1px; height:52px; transform:translateY(-50%); background:var(--red); box-shadow:0 0 12px #ef334455; }
.project.active { opacity:1; transform:none; pointer-events:auto; }
.project h2 { margin:0 0 14px; font-size:clamp(2.8rem,6vw,5.4rem); font-weight:600; letter-spacing:-.065em; line-height:1; overflow-wrap:anywhere; }
.project.is-long h2 { font-size:clamp(2.35rem,4.8vw,4.35rem); letter-spacing:-.055em; }
.project p { max-width:620px; margin:0; padding-bottom:18px; border-bottom:1px solid var(--line); color:var(--muted); font-size:1.08rem; overflow-wrap:anywhere; }
.open-link { display:flex; align-items:center; justify-content:space-between; width:min(340px,100%); margin-top:14px; padding:10px 12px; border:1px solid #ef334533; background:#ef33450d; color:var(--red); font-size:11px; font-weight:600; letter-spacing:.14em; text-decoration:none; text-transform:uppercase; transition:background .25s,border-color .25s,color .25s; }
.open-link:hover { border-color:#ef334599; background:#ef334526; color:var(--text); }.open-link i { position:relative; display:block; width:12px; height:12px; }
.open-link i::before { content:""; position:absolute; right:0; top:0; width:8px; height:8px; border-top:1px solid currentColor; border-right:1px solid currentColor; }.open-link i::after { content:""; position:absolute; right:1px; top:3px; width:12px; height:1px; background:currentColor; transform:rotate(-45deg); transform-origin:right center; }.open-link:hover i { transform:translate(3px,-3px); transition:transform .25s; }
.project-controls { position:fixed; top:18px; left:50%; z-index:13; display:flex; gap:6px; width:min(250px,45vw); opacity:0; visibility:hidden; pointer-events:none; transform:translateX(-50%); transition:opacity .2s; }.on-work .top-progress { opacity:0; visibility:hidden; pointer-events:none; }.on-work .project-controls { opacity:1; visibility:visible; pointer-events:auto; }.project-controls button.active { flex:1.6; }
.cursor-glow { position:fixed; z-index:0; width:180px; height:180px; border-radius:50%; pointer-events:none; transform:translate(-50%,-50%); background:radial-gradient(circle,#ef334522,transparent 70%); }.screen { z-index:1; }
body.light header { background:#f3f4f5dd; border-bottom:1px solid #d8d9dd; backdrop-filter:blur(14px); }body.light .site-loader { background:#f3f4f5; }body.light .cursor-glow { background:radial-gradient(circle,#b91f3926,transparent 70%); }body.light .hero h1 { color:#a51d35; }body.light .hero-content::before { background:#ffffff40; }body.light .top-progress button::before,body.light .project-controls button { background:#9fa0a5; }body.light .top-progress button.active::before,body.light .project-controls button.active { background:var(--red); box-shadow:0 0 7px #b91f3940; }body.light .top-progress button::after,body.light .project-controls button::after { background:#fff; border:1px solid #d8d9dd; }body.light .project h2 { color:#1d1b1f; font-weight:500; }body.light .project p { color:#56555a; }body.light .open-link { border-color:#b91f3955; background:#fff9; }body.light .open-link:hover { border-color:var(--red); background:var(--red); color:#fff; }body.light .theme-button,body.light .sound-button { background:#fff9; border-color:#b6b7bc; }body.light .theme-button:hover,body.light .sound-button:hover { background:#fff; border-color:var(--red); }
.project-controls { height:28px; align-items:center; }.project-controls button { height:28px; background:transparent!important; }.project-controls button::before { content:""; position:absolute; top:50%; left:0; width:100%; height:2px; background:var(--line); }.project-controls button::after { top:32px; }.project-controls button.active { box-shadow:none; }.project-controls button.active::before { background:var(--red); box-shadow:0 0 8px #ef334466; }body.light .project-controls button::before { background:#9fa0a5; }body.light .project-controls button.active { box-shadow:none; }body.light .project-controls button.active::before { background:var(--red); box-shadow:0 0 7px #b91f3940; }
.project-row.edge-next .project.active { animation:edgeNext .22s ease; }.project-row.edge-prev .project.active { animation:edgePrev .22s ease; }@keyframes edgeNext { 50% { transform:translateX(-12px); } }@keyframes edgePrev { 50% { transform:translateX(12px); } }
@media (max-width:600px) { header { height:64px; padding:0 22px; }.header-controls { gap:6px; }.brand { font-size:13px; }.theme-button span,.sound-button span { display:none; }.theme-button,.sound-button { width:36px; min-height:36px; padding:7px; }.top-progress, .project-controls { top:76px; width:calc(100vw - 48px); }.navigation-tip { bottom:max(18px,env(safe-area-inset-bottom)); max-width:calc(100vw - 40px); color:transparent; font-size:0; text-align:center; white-space:normal; opacity:.68; transform:translate(-50%,0); }.navigation-tip::after { content:attr(data-mobile-tip); color:var(--text); font-size:8px; font-weight:500; letter-spacing:.13em; }.on-work .navigation-tip { opacity:0; }.screen { min-height:100dvh; padding:106px 24px max(34px,env(safe-area-inset-bottom)); }.hero-content::before { width:24px; height:24px; margin-bottom:18px; font-size:10px; }.hero h1 { font-size:clamp(3rem,15vw,5rem); letter-spacing:.1em; }.hero p { font-size:.9rem; }.work-wrap { height:calc(100dvh - 150px); width:100%; transform:translateY(-2dvh); }.project-row { min-height:0; }.project { padding:0 0 28px; border-left:0; }.project::before { display:none; }.project h2,.project.is-long h2 { font-size:clamp(2rem,10vw,3rem); }.project.is-long h2 { font-size:clamp(1.75rem,8.5vw,2.5rem); }.project p { padding-bottom:16px; font-size:.95rem; line-height:1.55; }.open-link { width:100%; margin-top:14px; font-size:10px; }.cursor-glow { display:none; } }
@media (max-width:600px) and (max-height:650px) { .screen { padding-top:92px; }.hero-content::before { margin-bottom:12px; }.hero p { margin:16px 0 20px; }.work-wrap { height:calc(100dvh - 112px); transform:none; }.project h2,.project.is-long h2 { margin-bottom:10px; font-size:clamp(1.7rem,8vw,2.3rem); }.project p { font-size:.88rem; line-height:1.4; }.open-link { margin-top:14px; padding:8px 10px; } }
@media (max-width:600px) { .top-progress button::after,.project-controls button::after { display:none; } }
@media (min-width:1000px) { .work-wrap { height:min(470px,62vh); transform:translateY(-4vh); } }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { scroll-behavior:auto !important; transition:none !important; } }