*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0a0a0a;--bg-hover:#121212;--fg:#ededed;--fg-dim:#888;--fg-muted:#666;--fg-dark:#555;--border:#222;--border-hover:#333;--border-bright:#444;--accent:#a0b0c0;--steam-online:#57cbde;--steam-ingame:#0f6;--steam-offline:#666;--sans:"Inter", "Helvetica Neue", sans-serif;--mono:"JetBrains Mono", "Fira Code", monospace;--serif:"Noto Serif TC", "Georgia", serif;--u:8px}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px}body{background:var(--bg);color:var(--fg);font-family:var(--sans);font-weight:400;line-height:1.6;overflow-x:hidden}a{color:inherit;text-decoration:none}::selection{background:var(--accent);color:var(--bg)}.noise{z-index:9999;pointer-events:none;opacity:.018;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-repeat:repeat;background-size:200px 200px;position:fixed;inset:0}.grid-bg{z-index:-1;pointer-events:none;position:fixed;inset:0;overflow:hidden}.grid-bg__v{background-image:repeating-linear-gradient(to right, var(--border) 0px, var(--border) 1px, transparent 1px, transparent calc(var(--u) * 16));opacity:0;transform-origin:top;position:absolute;inset:0;transform:scaleY(0)}.grid-bg__h{background-image:repeating-linear-gradient(to bottom, var(--border) 0px, var(--border) 1px, transparent 1px, transparent calc(var(--u) * 16));opacity:0;transform-origin:0;position:absolute;inset:0;transform:scaleX(0)}.status-bar{z-index:200;height:28px;padding:0 calc(var(--u) * 4);background:var(--bg);border-bottom:1px solid var(--border);font-family:var(--mono);color:var(--fg-dark);letter-spacing:.06em;opacity:0;justify-content:space-between;align-items:center;font-size:10px;display:flex;position:fixed;top:0;left:0;right:0;transform:translateY(-28px)}.status-bar__left{align-items:center;display:flex}.hero{min-height:100vh;padding:calc(var(--u) * 16) calc(var(--u) * 4) calc(var(--u) * 6);flex-direction:column;justify-content:center;display:flex;position:relative}.hero__title-wrap{margin-bottom:calc(var(--u) * 4);z-index:1;position:relative}.hero__title{font-family:var(--serif);letter-spacing:.04em;color:var(--fg);opacity:0;font-size:clamp(5rem,14vw,10rem);font-weight:900;line-height:1;transform:translateY(30px)}.hero__bottom{opacity:0;z-index:1;justify-content:space-between;align-items:flex-end;display:flex;position:relative;transform:translateY(10px)}.hero__sub{font-family:var(--mono);color:var(--fg-dim);letter-spacing:.02em;font-size:.8rem}.hero__right{align-items:flex-end;gap:calc(var(--u) * 2);flex-direction:column;display:flex}.hero__meta{gap:calc(var(--u) * 1.5);display:flex}.hero__tag{font-family:var(--mono);color:var(--fg-dim);padding:calc(var(--u) * .5) calc(var(--u) * 1.5);border:1px solid var(--border);border-radius:0;font-size:.6rem}.hero__status{align-items:center;gap:calc(var(--u) * .8);display:flex}.hero__status-dot{background:var(--accent);border-radius:50%;width:6px;height:6px;animation:2s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:1}50%{opacity:.3}}.hero__status-text{font-family:var(--mono);letter-spacing:.06em;color:var(--fg-muted);font-size:.55rem}.bento{background:var(--border);margin:0 calc(var(--u) * 4);border-top:1px solid var(--border);border-bottom:1px solid var(--border);grid-template-rows:auto auto;grid-template-columns:1fr 1fr;gap:1px;display:grid}.bento__cell{background:var(--bg);padding:calc(var(--u) * 5) calc(var(--u) * 4);opacity:0;transition:background .3s;position:relative;transform:translateY(10px)}.bento__cell:hover,.bento__cell--work.is-hovered{background:var(--bg-hover)}.bento__cell--work.is-hovered:before{content:"";background-image:repeating-linear-gradient(to right, var(--border-hover) 0px, var(--border-hover) 1px, transparent 1px, transparent calc(var(--u) * 4)), repeating-linear-gradient(to bottom, var(--border-hover) 0px, var(--border-hover) 1px, transparent 1px, transparent calc(var(--u) * 4));opacity:.3;pointer-events:none;z-index:0;position:absolute;inset:0}.bento__cell--work.is-hovered .bento__content{z-index:1;position:relative}.bento__cell--about{grid-area:1/1/3}.bento__cell--work{grid-area:1/2}.bento__cell--contact{grid-area:2/2}.bento__label{font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:calc(var(--u) * 4);font-size:.55rem}.bento__num{color:var(--fg-muted)}.bento__content{max-width:480px}.bento__text{letter-spacing:.02em;color:var(--fg);margin-bottom:calc(var(--u) * 2);font-size:1rem;line-height:1.75}.bento__text--dim{color:var(--fg-dim);margin-bottom:calc(var(--u) * 4)}.bento__kv{gap:calc(var(--u) * 2);border-top:1px solid var(--border);padding-top:calc(var(--u) * 3);flex-direction:column;display:flex}.bento__kv-row{gap:calc(var(--u) * 3);display:flex}.bento__kv-key{font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);min-width:5rem;font-size:.6rem}.bento__kv-val{font-family:var(--mono);color:var(--fg-dim);font-size:.75rem}.work__list{flex-direction:column;display:flex}.work__item{padding:calc(var(--u) * 2.5) 0;border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .3s;display:flex}.work__item:first-child{border-top:1px solid var(--border)}.work__item:hover{transform:translate(8px)}.work__list.is-hovering .work__item{opacity:.4}.work__list.is-hovering .work__item:hover{opacity:1}.work__item-left{align-items:center;gap:calc(var(--u) * 2.5);display:flex}.work__num{font-family:var(--mono);color:var(--fg-muted);letter-spacing:.06em;min-width:1.5rem;font-size:.55rem}.work__name{letter-spacing:.01em;font-size:.95rem;font-weight:500}.work__item-right{align-items:center;gap:calc(var(--u) * 2);display:flex}.work__tag{font-family:var(--mono);color:var(--fg-dim);letter-spacing:.04em;font-size:.6rem}.work__arrow{font-family:var(--mono);color:var(--border);opacity:0;font-size:.7rem;transition:opacity .2s,transform .3s cubic-bezier(.16,1,.3,1),color .2s;transform:translate(-4px,4px)}.work__item:hover .work__arrow{opacity:1;color:var(--accent);transform:translate(3px,-3px)}.contact__email{font-family:var(--mono);color:var(--fg);letter-spacing:.02em;margin-bottom:calc(var(--u) * 3);font-size:1rem;display:inline-block;position:relative}.contact__email:after{content:"";background:var(--accent);transform-origin:100%;width:100%;height:1px;transition:transform .3s cubic-bezier(.16,1,.3,1);position:absolute;bottom:-2px;left:0;transform:scaleX(0)}.contact__email:hover:after{transform-origin:0;transform:scaleX(1)}.contact__steam{align-items:center;gap:calc(var(--u) * 1);margin-bottom:calc(var(--u) * 3);padding-bottom:calc(var(--u) * 3);border-bottom:1px solid var(--border);display:flex}.contact__steam-dot{background:var(--steam-offline);border-radius:50%;flex-shrink:0;width:5px;height:5px;transition:background .3s}.contact__steam-dot.is-online{background:var(--steam-online);animation:2s ease-in-out infinite pulse}.contact__steam-dot.is-ingame{background:var(--steam-ingame);animation:2s ease-in-out infinite pulse}.contact__steam-text{font-family:var(--mono);color:var(--fg-muted);letter-spacing:.04em;font-size:.65rem}.contact__steam-text.is-online{color:var(--fg-dim)}.contact__steam-text.is-ingame{color:var(--steam-ingame)}.contact__links{gap:calc(var(--u) * 2.5);display:flex}.contact__link{font-family:var(--mono);letter-spacing:.06em;color:var(--fg-dim);font-size:.65rem;transition:color .2s}.contact__link:hover{color:var(--fg)}.footer{padding:calc(var(--u) * 3) calc(var(--u) * 4);font-family:var(--mono);color:var(--fg-dim);letter-spacing:.08em;opacity:0;justify-content:space-between;font-size:.55rem;display:flex;transform:translateY(10px)}@media (width<=768px){.status-bar{padding:0 calc(var(--u) * 2);font-size:9px}.hero{padding:calc(var(--u) * 14) calc(var(--u) * 2) calc(var(--u) * 4)}.hero__bottom{align-items:flex-start;gap:calc(var(--u) * 3);flex-direction:column}.hero__right{align-items:flex-start}.bento{margin:0 calc(var(--u) * 2);grid-template-columns:1fr}.bento__cell--about,.bento__cell--work,.bento__cell--contact{grid-area:auto/1}.bento__cell{padding:calc(var(--u) * 4) calc(var(--u) * 2)}.footer{padding:calc(var(--u) * 2)}}@media (width<=480px){.hero__title{font-size:clamp(3rem,18vw,5rem)}.contact__links{gap:calc(var(--u) * 1.5);flex-direction:column}}