@import"https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600;700&family=Noto+Sans+KR:wght@500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap";*,*:before,*:after{box-sizing:border-box}html{font-family:Inter,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.5;background:#eee9df;color:#191816;text-rendering:optimizeLegibility;scroll-behavior:smooth}body{margin:0;min-width:320px;background:#eee9df;color:#191816}button,input,textarea,select{font:inherit}a{color:inherit}img,picture,video,canvas{display:block;max-width:100%}main{overflow:clip}section{border-bottom:1px solid rgba(25,24,22,.14)}.keyboard-hero{height:420vh;padding:0;border:0;background:#eee9df}.keyboard-stage{position:sticky;top:0;height:100vh;min-height:620px;overflow:hidden;background:#eee9df}.keyboard-scrub{position:absolute;inset:0;overflow:hidden;background:#eee9df}.keyboard-scrub-frame{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center;will-change:transform,opacity;-webkit-user-select:none;user-select:none}.keyboard-ui-header{position:absolute;z-index:8;top:0;left:0;right:0;display:flex;justify-content:space-between;padding:22px 28px;border-bottom:1px solid rgba(25,24,22,.22);background:linear-gradient(to bottom,#eee9dfb8,#eee9df00);font-size:12px;letter-spacing:.08em;pointer-events:none}.keyboard-interaction-layer{position:absolute;z-index:7;inset:0;transition:opacity .25s ease}.interaction-guide{position:absolute;z-index:9;left:50%;bottom:92px;transform:translate(-50%);display:flex;align-items:center;gap:9px;padding:10px 14px;border:1px solid rgba(25,24,22,.24);background:#eee9dfd1;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 10px 28px #3f302514;font-size:12px;white-space:nowrap;pointer-events:none}.interaction-guide kbd{display:inline-grid;place-items:center;min-width:30px;height:30px;padding:0 8px;border:1px solid rgba(25,24,22,.9);border-bottom-width:3px;border-radius:5px;background:#dd6043;color:#fff8ef;font-weight:800}.project-shortcut-links{position:absolute;z-index:9;right:24px;bottom:22px;display:flex;gap:10px}.project-shortcut-link{--project-color: #dd6043;--project-soft: rgba(221, 96, 67, .12);display:inline-flex;align-items:center;gap:9px;min-height:42px;padding:8px 13px 8px 9px;border:1px solid color-mix(in srgb,var(--project-color) 30%,transparent);border-radius:10px;background:#f5f0e7e0;color:#191816;cursor:pointer;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 8px 22px #3e2d2312;transition:.18s ease}.project-shortcut-link:nth-child(1){--project-color: #c72f63;--project-soft: rgba(199, 47, 99, .12)}.project-shortcut-link:nth-child(2){--project-color: #315f8d;--project-soft: rgba(49, 95, 141, .12)}.project-shortcut-link:nth-child(3){--project-color: #c89438;--project-soft: rgba(200, 148, 56, .13)}.project-shortcut-link:hover,.project-shortcut-link:focus-visible{transform:translateY(-3px);border-color:var(--project-color);background:color-mix(in srgb,var(--project-color) 8%,#f7f1e7);outline:none}.project-shortcut-link.is-active{transform:translateY(1px);background:var(--project-soft);border-color:var(--project-color)}.shortcut-key{display:inline-grid;place-items:center;width:27px;height:27px;border-radius:6px;background:var(--project-color);color:#fff;font-size:11px;font-weight:800}.project-shortcut-link>span:nth-child(2){font-size:10px;font-weight:700;letter-spacing:.07em;color:color-mix(in srgb,var(--project-color) 82%,#191816)}.selected-works{position:relative;background:#f1ece3}.works-label,.section-kicker{padding:28px clamp(24px,7vw,110px) 0;font-size:11px;font-weight:800;letter-spacing:.18em}.work-panel{min-height:78vh;padding:clamp(50px,8vw,110px) clamp(24px,8vw,130px);display:grid;grid-template-columns:minmax(280px,.8fr) minmax(420px,1.35fr);align-items:center;gap:clamp(30px,7vw,120px);overflow:hidden}.work-panel:nth-of-type(3){grid-template-columns:minmax(420px,1.35fr) minmax(280px,.8fr)}.work-panel:nth-of-type(3) .work-copy{order:2}.work-panel:nth-of-type(3) .work-visual{order:1}.work-copy{position:relative;z-index:2;max-width:480px}.work-copy h2{margin:0;font-size:clamp(56px,7vw,118px);line-height:.9;letter-spacing:-.055em}.work-subtitle{margin:20px 0 28px;text-transform:uppercase;font-size:13px;font-weight:750;letter-spacing:.16em}.work-description{max-width:380px;margin:0 0 34px;color:#57514a;font-size:clamp(14px,1.15vw,17px);line-height:1.9}.work-copy a{display:inline-flex;padding:12px 18px;border:1px solid currentColor;border-radius:7px;text-decoration:none;font-size:11px;font-weight:800;letter-spacing:.1em;transition:transform .2s ease,background .2s ease}.work-copy a:hover{transform:translateY(-3px);background:#fff6}.work-plivy{color:#c72f63;background:radial-gradient(circle at 75% 55%,rgba(199,47,99,.12),transparent 35%),#f2ede4}.work-oasis{color:#b77b18;background:radial-gradient(circle at 25% 50%,rgba(183,123,24,.12),transparent 36%),#ece5da}.work-djstar{min-height:88vh;color:#55a0ff;background:radial-gradient(circle at 70% 45%,rgba(49,95,141,.25),transparent 35%),linear-gradient(120deg,#07111d,#0a1726 60%,#03080e)}.work-djstar .work-description{color:#b9c6d5}.work-visual{position:relative;min-height:520px;display:grid;place-items:center}.iphone-mockup{position:relative;width:min(350px,65%);aspect-ratio:.49;padding:10px;border:3px solid #28231f;border-radius:54px;background:linear-gradient(145deg,#df8ba7,#f3c6d2 40%,#8c4b60);box-shadow:0 45px 80px #50263340;transform:rotate(7deg)}.iphone-screen{height:100%;padding:42px 20px 20px;border-radius:43px;background:#f7f0e9;color:#1b1918;display:flex;flex-direction:column;gap:14px}.iphone-island{position:absolute;z-index:2;top:20px;left:50%;width:92px;height:24px;transform:translate(-50%);border-radius:20px;background:#111}.iphone-screen>strong{color:#c72f63;letter-spacing:.08em}.iphone-screen>span{font-size:12px}.now-playing{margin-top:14px;padding:18px;border-radius:18px;background:#fffaf6;box-shadow:0 12px 30px #4a332d14;display:grid;gap:7px}.now-playing small{color:#c72f63}.player-line{height:2px;margin-top:12px;background:linear-gradient(90deg,#c72f63 45%,#ddd 45%)}.player-controls{text-align:center;color:#c72f63;font-size:18px}.playlist-row{padding:14px 4px;border-bottom:1px solid #ddd2c9;font-size:11px;font-weight:750}.vinyl-scene{position:relative;width:min(720px,95%);height:520px}.record-sleeve{position:absolute;z-index:2;left:5%;top:10%;width:55%;aspect-ratio:1;padding:40px;background:linear-gradient(145deg,#d8c6a7,#a28c6b);color:#211b14;box-shadow:0 30px 60px #2f221347;transform:rotate(-4deg);font-family:Georgia,serif}.record-sleeve b{display:block;font-size:48px;font-style:italic}.record-sleeve span{font-size:13px;letter-spacing:.15em}.vinyl-disc{position:absolute;right:4%;top:2%;width:68%;aspect-ratio:1;border-radius:50%;background:repeating-radial-gradient(circle,#151515 0 3px,#242424 4px 6px);box-shadow:0 28px 55px #00000059;animation:vinylSpin 16s linear infinite}.vinyl-label{position:absolute;inset:36%;display:grid;place-items:center;border-radius:50%;background:#c89438;color:#17120b;font:italic 700 26px Georgia,serif}@keyframes vinylSpin{to{transform:rotate(360deg)}}.observatory-console{width:min(850px,100%);padding:22px;border-radius:28px;background:linear-gradient(145deg,#444b4e,#151a1e 55%,#07090b);box-shadow:0 40px 80px #0000008c;transform:perspective(1200px) rotateY(-6deg)}.observatory-screen{position:relative;min-height:430px;padding:30px;overflow:hidden;border:2px solid #111;border-radius:18px;background:radial-gradient(circle at 60% 50%,#132b47,#06111f 48%,#02060b);box-shadow:inset 0 0 60px #2375d033}.console-brand{font-size:11px;letter-spacing:.16em}.observatory-screen strong{position:absolute;left:30px;bottom:48px;font-size:34px}.observatory-screen small{position:absolute;left:30px;bottom:30px;letter-spacing:.12em}.saturn{position:absolute;left:56%;top:48%;width:170px;height:170px;transform:translate(-50%,-50%)}.saturn i{position:absolute;inset:24px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe2a8,#c68a42 55%,#684725);box-shadow:0 0 45px #ffbc642e}.saturn span{position:absolute;left:-28px;right:-28px;top:72px;height:30px;border:8px solid #b98b52;border-radius:50%;transform:rotate(-12deg)}.console-controls{display:flex;gap:12px;justify-content:flex-end;padding:15px 10px 0}.console-controls i{width:14px;height:14px;border-radius:50%;background:#cf7a34;box-shadow:0 0 12px #cf7a3466}.about-section,.skills-section,.contact-section{padding:clamp(48px,6vw,90px) clamp(24px,8vw,130px);background:#f1ece3}.about-section .section-kicker,.skills-section .section-kicker{padding:0 0 30px}.about-grid{display:grid;grid-template-columns:180px 1fr minmax(230px,.65fr);gap:clamp(25px,5vw,80px);align-items:center}.profile-placeholder{aspect-ratio:.8;display:grid;place-items:center;border:1px solid rgba(25,24,22,.15);background:linear-gradient(145deg,#ded7cc,#f6f1e9);color:#8a8177;font-size:10px;letter-spacing:.15em}.about-copy h2{margin:0;font-size:clamp(32px,4vw,60px)}.about-role{color:#c72f63;font-size:12px;font-weight:800;letter-spacing:.08em}.about-copy>p:last-child{max-width:600px;color:#5c554e;line-height:1.9}.profile-meta{margin:0}.profile-meta div{display:grid;grid-template-columns:90px 1fr;padding:9px 0;border-bottom:1px solid rgba(25,24,22,.1)}.profile-meta dt{font-size:9px;font-weight:800;letter-spacing:.1em}.profile-meta dd{margin:0;font-size:12px}.skill-keys{display:flex;flex-wrap:wrap;gap:13px}.skill-key{min-width:92px;padding:24px 16px 18px;border:1px solid #d8d0c5;border-bottom-width:4px;border-radius:9px;background:#eee7dc;box-shadow:0 9px 18px #43342617;text-align:center;font-size:11px;font-weight:750;transition:.2s ease}.skill-key:hover{transform:translateY(-5px);background:#f7f1e8}.contact-section{display:grid;grid-template-columns:1fr 1fr;gap:50px;padding-bottom:28px}.contact-title{font-size:clamp(44px,6vw,90px);font-weight:850;line-height:.88;letter-spacing:-.055em}.contact-title span{color:#c72f63}.contact-copy{align-self:center;color:#5c554e}.contact-copy a{display:inline-block;margin-top:18px;font-size:12px;font-weight:800;letter-spacing:.12em;text-decoration:none;border-bottom:1px solid}.contact-section footer{grid-column:1/-1;display:flex;justify-content:space-between;margin-top:50px;padding-top:20px;border-top:1px solid rgba(25,24,22,.12);font-size:9px;letter-spacing:.14em}@media(max-width:900px){.interaction-guide{bottom:112px}.project-shortcut-links{left:50%;right:auto;transform:translate(-50%);width:max-content}.work-panel,.work-panel:nth-of-type(3){grid-template-columns:1fr;min-height:auto}.work-panel:nth-of-type(3) .work-copy,.work-panel:nth-of-type(3) .work-visual{order:initial}.work-visual{min-height:460px}.about-grid{grid-template-columns:140px 1fr}.profile-meta{grid-column:1/-1}.contact-section{grid-template-columns:1fr}}@media(max-width:700px){.keyboard-hero{height:320vh}.keyboard-stage{min-height:520px}.keyboard-ui-header{padding:16px}.interaction-guide{bottom:126px;max-width:calc(100% - 28px);white-space:normal;justify-content:center;flex-wrap:wrap;text-align:center}.project-shortcut-links{bottom:20px;flex-direction:column;width:calc(100% - 32px)}.project-shortcut-link{justify-content:flex-start;width:100%}.work-panel{padding:70px 22px}.work-copy h2{font-size:54px}.work-visual{min-height:390px}.iphone-mockup{width:230px}.vinyl-scene{height:360px}.record-sleeve{padding:24px}.record-sleeve b{font-size:32px}.observatory-screen{min-height:300px}.saturn{transform:translate(-50%,-50%) scale(.72)}.about-grid{grid-template-columns:1fr}.profile-placeholder{width:140px}.contact-section footer{flex-direction:column;gap:10px}}.project-button-group{display:flex;align-items:center;gap:10px;flex-wrap:nowrap}.project-button-group .project-view-button{width:auto;min-width:0;padding-left:22px;padding-right:22px;white-space:nowrap}.skill-progress-list{width:100%;max-width:950px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:64px;row-gap:30px;margin-top:32px}.skill-progress-item{width:100%}.skill-progress-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.skill-progress-name{font-size:13px;font-weight:600;letter-spacing:.03em;color:#191919}.skill-progress-percent{font-size:12px;font-weight:600;color:#1919198c}.skill-progress-track{position:relative;width:100%;height:8px;overflow:hidden;border:1px solid rgba(25,25,25,.12);border-radius:999px;background:#1919190f}.skill-progress-bar{height:100%;border-radius:inherit;background:#191919;transition:width .8s ease}@media(max-width:768px){.skill-progress-list{grid-template-columns:1fr;gap:24px}}.keyboard-photo-plane{pointer-events:none}.keyboard-photo-background,.keyboard-photo-keys{position:absolute;inset:0;width:100%;height:100%}.keyboard-photo-background{object-fit:cover;object-position:center;-webkit-user-select:none;user-select:none}.keyboard-photo-keys{overflow:hidden;pointer-events:none}.photo-key{pointer-events:none}.keyboard-photo-keys.is-ready .photo-key{pointer-events:visiblePainted;cursor:pointer}.photo-key-well{fill:#5a3328;opacity:0;transition:opacity 70ms ease}.photo-key-cap{transform:translateY(0);transition:transform 90ms ease-out,filter 90ms ease-out}.photo-key-cap image{pointer-events:none}.photo-key-hit{fill:transparent;stroke:none}.photo-key.is-pressed .photo-key-well{opacity:1}.photo-key.is-pressed .photo-key-cap{transform:translate(1px,4px);filter:brightness(.88)}.keyboard-sound-toggle{position:absolute;z-index:10;top:24px;right:24px;display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 16px;border:1px solid rgba(70,58,44,.2);border-radius:999px;background:#faf7f1e0;color:#473e35;box-shadow:0 4px 16px #31271a14;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font:600 12px/1.2 IBM Plex Mono,monospace;letter-spacing:.06em;cursor:pointer}.sound-indicator{width:7px;height:7px;border-radius:50%;background:#8a8178}.keyboard-sound-toggle[aria-pressed=true] .sound-indicator{background:#c7523f;box-shadow:0 0 0 4px #c7523f1f}.keyboard-feedback-guide.is-ready .guide-project{pointer-events:auto}.keyboard-feedback-guide .guide-project{border:0;padding:5px 7px;min-height:44px;border-radius:8px;background:transparent;font:inherit;cursor:pointer;text-decoration:none}.keyboard-feedback-guide .guide-project:hover{background:transparent}.keyboard-feedback-guide .guide-project kbd{display:inline-flex;align-items:center;justify-content:center;transition:transform 80ms ease,box-shadow 80ms ease}.keyboard-sound-toggle:focus-visible,.keyboard-feedback-guide .guide-project:focus-visible{outline:2px solid #8d392e;outline-offset:4px}@media(max-width:700px){.keyboard-sound-toggle{top:16px;right:16px}.keyboard-feedback-guide>strong{max-width:270px;white-space:normal;line-height:1.6}}@media(prefers-reduced-motion:reduce){.photo-key-cap,.photo-key-well,.keyboard-feedback-guide .guide-project kbd{transition:none}.photo-key.is-pressed .photo-key-cap,.keyboard-feedback-guide .guide-project.is-active kbd{transform:none}}.keyboard-photo-keys .photo-key-cap,.keyboard-photo-keys .photo-key.is-pressed .photo-key-cap{transform:none;filter:none;transition:none}.keyboard-photo-keys .photo-key-well{display:none}.keyboard-interaction-layer{z-index:50}.about-me-button{position:absolute;left:50%;bottom:32px;transform:translate(-50%);z-index:999;pointer-events:auto;min-width:160px;padding:12px 24px;border:1px solid rgba(30,30,30,.35);border-radius:999px;background:#f5f2ebeb;color:#222;font:inherit;font-size:11px;font-weight:600;letter-spacing:.12em;cursor:pointer;box-shadow:0 6px 24px #00000026;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background .2s ease,transform .2s ease,box-shadow .2s ease}.about-me-button:hover{background:#fff;transform:translate(-50%) translateY(-2px);box-shadow:0 8px 28px #0003}.about-me-button:active{transform:translate(-50%) translateY(1px)}.about-me-button:disabled{opacity:0;pointer-events:none}.visual-observatory{position:relative;min-height:610px;display:flex;align-items:center;justify-content:center;overflow:visible;perspective:1400px}.djstar-photo-mockup{position:relative;width:min(980px,66vw);height:min(590px,43vw);aspect-ratio:auto;border-radius:24px;overflow:hidden;isolation:isolate;transform-style:preserve-3d;transform-origin:50% 60%;background:#06111d;box-shadow:0 48px 115px #00000080,0 0 100px #316fa626}.djstar-cockpit-photo{position:absolute;z-index:1;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:center 46%;transform:none}.djstar-window-display{position:absolute!important;z-index:20!important;left:10.2%;top:5.2%;width:79.6%;height:49.8%;display:block!important;visibility:visible!important;opacity:1!important;overflow:hidden;background:transparent;clip-path:polygon(9% 7%,91% 7%,97% 15%,99% 76%,95% 90%,88% 96%,12% 96%,5% 90%,1% 76%,3% 16%);pointer-events:none;transform:translateZ(2px)}.djstar-window-display img{position:absolute!important;z-index:21!important;left:0!important;top:0!important;width:100%!important;height:100%!important;display:block!important;visibility:visible!important;opacity:.9!important;object-fit:cover!important;object-position:center center!important;filter:contrast(1.02) brightness(.72) saturate(.88);transform:scale(1.04)!important;transform-origin:center}.djstar-window-display:before{content:none}.djstar-window-display:after{content:"";position:absolute;z-index:22;inset:0;background:radial-gradient(ellipse at center,transparent 58%,rgba(0,0,0,.07) 78%,rgba(0,0,0,.24) 100%),repeating-linear-gradient(0deg,rgba(255,255,255,.007) 0 1px,transparent 1px 4px);pointer-events:none}.djstar-photo-mockup:before{content:"";position:absolute;z-index:30;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.025),transparent 25%,transparent 68%,rgba(59,137,205,.025));pointer-events:none}.djstar-photo-mockup:after{content:"";position:absolute;z-index:31;inset:0;border:1px solid rgba(128,178,218,.13);border-radius:inherit;box-shadow:inset 0 0 45px #0000001a;pointer-events:none}.djstar-photo-glass{position:absolute;z-index:25;inset:0;background:radial-gradient(circle at 62% 45%,transparent 0 42%,rgba(0,0,0,.015) 80%);pointer-events:none}.work-djstar .work-copy{position:relative;z-index:3}.work-djstar .work-visual{overflow:visible}@media(max-width:1200px){.visual-observatory{min-height:560px}.djstar-photo-mockup{width:min(850px,64vw);height:min(520px,42vw)}}@media(max-width:1000px){.visual-observatory{min-height:520px}.djstar-photo-mockup{width:min(760px,76vw);height:min(500px,50vw)}}@media(max-width:700px){.visual-observatory{min-height:470px}.djstar-photo-mockup{width:min(560px,94vw);height:min(420px,70vw);border-radius:20px}}.visual-vinyl{position:relative;justify-items:start;perspective:1500px}.visual-vinyl:before{content:"";position:absolute;width:72%;height:16%;left:45%;bottom:5%;transform:translate(-50%);border-radius:50%;background:#46311929;filter:blur(28px)}.vinyl-scene{position:relative;width:min(760px,100%);height:540px;transform:perspective(1400px) rotateX(1deg) rotateY(1deg);transform-origin:center;transition:transform .5s cubic-bezier(.2,.8,.2,1)}.visual-vinyl:hover .vinyl-scene{transform:perspective(1400px) rotateX(0) rotateY(0) translateY(-5px)}.record-sleeve{position:absolute;z-index:4;left:3%;top:12%;width:54%;aspect-ratio:1/1;padding:0;border:0;background:#111;box-shadow:0 28px 58px #3e2d1940;transform:rotate(-2deg);overflow:hidden}.record-sleeve img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:center center;transform:scale(1.02)}.vinyl-disc{position:absolute;z-index:2;right:4%;top:14%;width:57%;aspect-ratio:1/1;border-radius:50%;background:radial-gradient(circle at center,#c58b1f 0 10%,#d7a338 10.4% 16%,#121212 16.5% 18%,transparent 18.4%),repeating-radial-gradient(circle,#0b0b0b 0 2px,#191919 3px 5px,#090909 6px 7px);box-shadow:0 30px 56px #00000057,inset -14px -18px 26px #0000004d;transform:rotate(3deg)}.vinyl-disc:before{content:"";position:absolute;inset:2.5%;border-radius:50%;background:linear-gradient(112deg,transparent 34%,rgba(255,255,255,.07) 47%,transparent 60%);pointer-events:none}.vinyl-disc:after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:50%;background:#111;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #ffffff1a}.vinyl-label{position:absolute;inset:41%;display:grid;place-items:center;border:none;border-radius:50%;background:transparent;font-family:Georgia,Times New Roman,serif;font-size:19px;font-style:italic;font-weight:700;color:#2b2115;transform:rotate(10deg)}@media(max-width:900px){.vinyl-scene{width:min(680px,100%);height:490px}.record-sleeve{width:56%}.vinyl-disc{width:59%;right:2%}}@media(max-width:700px){.vinyl-scene{height:410px}.record-sleeve{left:1%;top:14%;width:60%}.vinyl-disc{right:-1%;top:17%;width:62%}}.visual-vinyl .vinyl-disc{isolation:isolate;container-type:inline-size;border:1px solid #272727;background:radial-gradient(circle closest-side,#181818 0 34%,transparent 35% 48%,rgba(0,0,0,.25) 48.5% 49.2%,transparent 49.8% 65%,rgba(0,0,0,.22) 65.5% 66.2%,transparent 66.8% 81%,rgba(0,0,0,.25) 81.5% 82.2%,transparent 82.8% 97%,#111 98% 100%),repeating-radial-gradient(circle closest-side,#171717 0 1.2px,#202020 1.5px,#181818 1.9px 2.8px);box-shadow:0 24px 38px #1c161047,inset 0 0 0 3px #171717,inset 0 0 0 5px #303030;animation:none;transform:none}.visual-vinyl .vinyl-disc:before{inset:1%;z-index:1;border-radius:50%;background:conic-gradient(from -35deg,transparent 0deg,rgba(255,255,255,.025) 25deg,rgba(220,228,235,.19) 65deg,rgba(255,255,255,.035) 105deg,transparent 140deg 185deg,rgba(220,228,235,.1) 245deg,transparent 310deg 360deg)}.visual-vinyl .vinyl-disc:after{z-index:3;width:7px;height:7px;background:#171512;box-shadow:inset 1px 1px 2px #000,0 0 0 2px #c5b99e;pointer-events:none}.visual-vinyl .vinyl-label{inset:34%;z-index:2;display:block;overflow:hidden;border:1px solid #c7b998;border-radius:50%;background:radial-gradient(circle,transparent 0 17%,rgba(113,91,53,.18) 17.5% 18.5%,transparent 19%),linear-gradient(135deg,#f4eedc,#d9cbaa);box-shadow:0 0 0 4px #111,0 0 0 5px #343434,inset 0 0 14px #6049251f;color:#24231f;font-family:Arial,Helvetica,sans-serif;font-style:normal;text-align:center;transform:none;animation:portfolio-label-spin 28s linear infinite}.visual-vinyl .vinyl-label-top,.visual-vinyl .vinyl-label-bottom{position:absolute;left:0;width:100%;font-size:clamp(7px,2.1cqw,10px);font-weight:700;line-height:1;letter-spacing:.06em;white-space:nowrap}.visual-vinyl .vinyl-label-top{top:16%}.visual-vinyl .vinyl-label-logo{position:absolute;top:22%;left:14%;width:72%;height:22%;display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0;padding:0;border:1px solid #24231f;background:#24231f;color:#f2ead7;font-family:Arial,Helvetica,sans-serif;font-size:clamp(15px,6cqw,28px);font-weight:900;font-style:italic;line-height:1;letter-spacing:-.06em}.visual-vinyl .vinyl-label-bottom{bottom:19%;font-size:clamp(6px,1.9cqw,9px);letter-spacing:.03em}@keyframes portfolio-label-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.visual-vinyl .vinyl-label{animation:none}}.now-playing:before{content:none!important;display:none!important}.plivy-album-art{width:100%;aspect-ratio:1/1;display:block;object-fit:cover;border-radius:13px;margin:0 0 10px;box-shadow:0 10px 24px #5b305f29}.now-playing{overflow:hidden}body{font-family:Noto Sans KR,sans-serif}.work-copy h2,.contact-title,.about-copy h2{font-family:Space Grotesk,sans-serif;font-weight:700}.work-subtitle,.works-label,.section-kicker,.work-copy a,.skill-key,.transition-inner{font-family:IBM Plex Mono,monospace}.keyboard-ui-header,.interaction-guide,.project-shortcut-link{font-family:Inter,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}.work-subtitle{font-size:clamp(16px,1.35vw,21px);font-weight:700;letter-spacing:.12em;color:currentColor}.work-description{max-width:460px;font-size:clamp(18px,1.42vw,22px);font-weight:700;line-height:1.82;letter-spacing:-.015em;color:#302c28}.work-djstar .work-description{color:#e3ebf3}.work-copy a{font-size:12px;font-weight:700}.work-oasis{grid-template-columns:minmax(420px,1.12fr) minmax(340px,.88fr);column-gap:clamp(80px,10vw,180px)}.work-oasis .work-visual{grid-column:1;grid-row:1;transform:translate(clamp(45px,5vw,95px))}.work-oasis .work-copy{grid-column:2;grid-row:1;justify-self:start;transform:translate(clamp(20px,2.5vw,50px))}.work-djstar{grid-template-columns:minmax(300px,.72fr) minmax(520px,1.45fr);column-gap:clamp(50px,7vw,120px)}.work-djstar .work-copy{grid-column:1;grid-row:1}.work-djstar .work-visual{grid-column:2;grid-row:1}.visual-iphone:before{content:"";position:absolute;width:56%;height:12%;left:50%;bottom:7%;transform:translate(-50%);border-radius:50%;background:#6e3d4c2e;filter:blur(24px)}.iphone-mockup{width:min(370px,68%);padding:9px;border:1px solid rgba(30,24,22,.9);border-radius:58px;background:linear-gradient(145deg,rgba(255,255,255,.7),rgba(255,255,255,.06) 25%,transparent 26%),linear-gradient(155deg,#db8baa,#f3c8d5 38%,#7e445a);box-shadow:0 55px 90px #4b273247,0 18px 30px #4b273229,inset 0 0 0 1px #ffffff61;transform:perspective(1300px) rotateY(-10deg) rotateX(4deg) rotate(5deg);transition:transform .45s cubic-bezier(.2,.8,.2,1)}.visual-iphone:hover .iphone-mockup{transform:perspective(1300px) rotateY(-4deg) rotateX(1deg) rotate(2deg) translateY(-8px)}.iphone-mockup:before,.iphone-mockup:after{content:"";position:absolute;left:-4px;width:3px;border-radius:3px 0 0 3px;background:#6f3d50}.iphone-mockup:before{top:126px;height:72px}.iphone-mockup:after{top:214px;height:46px}.iphone-screen{position:relative;overflow:hidden;padding:48px 22px 24px;border-radius:49px;background:radial-gradient(circle at 75% 12%,rgba(199,47,99,.12),transparent 22%),linear-gradient(180deg,#fffaf6,#f6eee9);box-shadow:inset 0 0 0 1px #0000000d}.iphone-screen:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,rgba(255,255,255,.22),transparent 24%,transparent 72%,rgba(255,255,255,.08))}.iphone-island{top:19px;width:96px;height:25px;border:1px solid rgba(255,255,255,.08)}.now-playing{position:relative;overflow:hidden;margin-top:18px;padding:20px;border:1px solid rgba(199,47,99,.08);border-radius:22px;background:#ffffffd1;box-shadow:0 16px 35px #4e303617}.now-playing:before{display:none}.visual-vinyl{justify-items:start;perspective:1500px}.visual-vinyl:before{content:"";position:absolute;width:78%;height:18%;left:45%;bottom:2%;transform:translate(-50%);border-radius:50%;background:#46311933;filter:blur(30px)}.vinyl-scene{width:min(760px,100%);height:560px;transform:perspective(1400px) rotateX(4deg) rotateY(5deg);transform-origin:center;transition:transform .55s cubic-bezier(.2,.8,.2,1)}.visual-vinyl:hover .vinyl-scene{transform:perspective(1400px) rotateX(1deg) rotateY(1deg) translateY(-7px)}.visual-observatory{min-height:620px;perspective:1600px}.experience-transition{position:relative;min-height:72vh;display:grid;place-items:center;overflow:hidden;isolation:isolate}.transition-oasis{color:#8d5f16;background:radial-gradient(circle at 50% 54%,rgba(200,148,56,.18),transparent 34%),linear-gradient(180deg,#f2ede4,#ece5da)}.transition-djstar{min-height:92vh;color:#dcecff;background:radial-gradient(circle at 50% 55%,rgba(58,113,172,.22),transparent 32%),linear-gradient(180deg,#ece5da,#182333 52%,#07111d)}.transition-inner{position:relative;z-index:2;width:min(760px,calc(100% - 48px));display:grid;justify-items:center;gap:18px;text-align:center;will-change:transform,opacity}.transition-inner>span{font-size:11px;font-weight:700;letter-spacing:.22em;opacity:.68}.transition-inner strong{font-family:Space Grotesk,sans-serif;font-size:clamp(36px,6vw,88px);line-height:.95;letter-spacing:-.045em}.transition-inner small{margin-top:4px;font-size:10px;font-weight:700;letter-spacing:.16em;opacity:.62}.transition-line{width:min(390px,58vw);height:1px;background:currentColor;transform-origin:center;opacity:.38}.transition-oasis .transition-inner{gap:20px}.transition-oasis .transition-inner strong{font-size:clamp(38px,5.4vw,76px)}.transition-djstar .transition-inner strong{font-size:clamp(34px,5.2vw,72px);max-width:760px}.transition-djstar:before,.transition-djstar:after,.star-field{content:"";position:absolute;inset:0;pointer-events:none}.transition-djstar:before{z-index:0;opacity:.42;background-image:radial-gradient(circle,rgba(255,255,255,.9) 0 1px,transparent 1.4px),radial-gradient(circle,rgba(160,207,255,.85) 0 1px,transparent 1.5px);background-size:94px 94px,157px 157px;background-position:0 0,43px 71px;-webkit-mask-image:linear-gradient(to bottom,transparent 5%,#000 52%,#000);mask-image:linear-gradient(to bottom,transparent 5%,#000 52%,#000)}.transition-djstar:after{z-index:1;background:radial-gradient(circle at 50% 68%,rgba(76,143,219,.14),transparent 22%)}.star-field{z-index:0;opacity:.55;background-image:radial-gradient(circle,rgba(255,255,255,.7) 0 1px,transparent 1.3px);background-size:63px 63px;background-position:19px 25px;transform:rotate(8deg)}.keyboard-ui-header,.project-shortcut-links{display:none}.keyboard-only-guide{bottom:64px;display:grid;grid-template-columns:repeat(3,max-content);justify-content:center;align-items:center;column-gap:14px;row-gap:9px;padding:13px 16px;border-color:#19181629;background:#f5f0e7c7;box-shadow:0 8px 24px #30271e12;color:#4f4942;font-size:10px;letter-spacing:.02em}.keyboard-only-guide>strong{grid-column:1/-1;margin:0;color:#39342f;font-size:11px;font-weight:650;text-align:center}.guide-project{display:inline-flex;align-items:center;gap:6px;color:#625b53}.keyboard-only-guide kbd{min-width:27px;height:27px;padding:0 7px;border:0;border-radius:6px;background:#d85e45;color:#fff;font-size:10px;box-shadow:inset 0 -2px #00000021}.guide-project.is-active kbd{transform:translateY(2px);box-shadow:none}.guide-plivy kbd{background:#c72f63}.guide-djstar kbd{background:#315f8d}.guide-oasis kbd{background:#c89438}.about-grid{grid-template-columns:minmax(300px,370px) minmax(420px,1fr) minmax(260px,.55fr);gap:clamp(42px,5vw,88px);align-items:center}.profile-photo{width:100%;max-width:370px;aspect-ratio:.82;overflow:hidden;background:#ddd6cc}.profile-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 58%}.about-copy>p:last-child{color:#746d65;font-weight:500;line-height:1.95}.profile-meta dd{color:#625c55}.profile-meta a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(25,24,22,.22);transition:color .2s,border-color .2s}.profile-meta a:hover{color:#c72f63;border-color:#c72f63}.contact-title{font-size:clamp(44px,6vw,88px);line-height:.9;letter-spacing:-.055em}.contact-title span:first-child{color:#181716}.contact-title span:last-child{color:#5f5a55}.contact-copy{color:#6d665f}.contact-email{display:inline-block;margin-top:18px;padding-bottom:4px;border-bottom:1px solid rgba(25,24,22,.35);font-family:IBM Plex Mono,monospace;font-size:12px;font-weight:700;letter-spacing:.05em;color:#3f3a35;text-decoration:none;transition:color .2s,border-color .2s}.contact-email:hover{color:#c72f63;border-color:#c72f63}@media(max-width:1100px){.about-grid{grid-template-columns:minmax(240px,300px) 1fr}.profile-meta{grid-column:2}.profile-photo{max-width:300px}}@media(max-width:700px){.keyboard-only-guide{bottom:28px;max-width:calc(100% - 28px);grid-template-columns:repeat(3,max-content);column-gap:9px;row-gap:8px;padding:12px 13px}.keyboard-only-guide>strong{grid-column:1/-1;margin:0;text-align:center}.about-grid{grid-template-columns:1fr}.profile-photo{max-width:300px}.profile-meta{grid-column:auto}}.work-plivy{--cta-start: #c72f63;--cta-end: #92204e;--cta-glow: rgba(199, 47, 99, .35)}.work-oasis{--cta-start: #ffe0a0;--cta-end: #d69b36;--cta-glow: rgba(183, 123, 24, .35)}.work-djstar{--cta-start: #2464ce;--cta-end: #4436b3;--cta-glow: rgba(70, 126, 255, .45)}.work-copy .project-view-button{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 30px;border:1px solid rgba(255,255,255,.45);border-radius:12px;background:linear-gradient(125deg,var(--cta-start),var(--cta-end));color:#fff;font-size:14px;font-weight:700;letter-spacing:.12em;text-decoration:none;box-shadow:0 8px 24px var(--cta-glow),inset 0 1px #ffffff59;transition:transform .25s ease,box-shadow .25s ease}.work-oasis .project-view-button{color:#322007}.project-view-button span{position:relative;z-index:1}.project-view-button:before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.4) 50%,transparent 80%);transform:translate(-140%) skew(-15deg);transition:transform .65s ease;pointer-events:none}.work-copy .project-view-button:hover,.work-copy .project-view-button:focus-visible{background:linear-gradient(125deg,var(--cta-start),var(--cta-end));transform:translateY(-3px) scale(1.03);box-shadow:0 12px 32px var(--cta-glow),inset 0 1px #ffffff80}.project-view-button:hover:before,.project-view-button:focus-visible:before{transform:translate(140%) skew(-15deg)}.work-copy .project-view-button:focus-visible{outline:3px solid currentColor;outline-offset:5px}.work-copy .project-view-button:active{transform:translateY(0) scale(.98)}@media(prefers-reduced-motion:reduce){.work-copy .project-view-button,.project-view-button:before{transition:none}.work-copy .project-view-button:hover,.work-copy .project-view-button:focus-visible,.work-copy .project-view-button:active{transform:none}}.experience-transition .transition-inner small.scroll-cue{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:700;letter-spacing:.14em;opacity:1;animation:portfolio-cue-glow 2.2s ease-in-out infinite}.transition-oasis .transition-inner small.scroll-cue{color:#926016}.transition-djstar .transition-inner small.scroll-cue{color:#a8d4ff}.experience-transition .transition-inner .scroll-cue-arrow{display:inline-block;margin:0;font-size:18px;line-height:1;letter-spacing:0;color:inherit;opacity:1;animation:portfolio-cue-arrow 2.2s ease-in-out infinite}@keyframes portfolio-cue-glow{0%,to{opacity:.75;text-shadow:0 0 0 transparent}50%{opacity:1;text-shadow:0 0 10px currentColor}}@keyframes portfolio-cue-arrow{0%,to{transform:translateY(0)}50%{transform:translateY(4px)}}@media(prefers-reduced-motion:reduce){.experience-transition .transition-inner small.scroll-cue,.experience-transition .transition-inner .scroll-cue-arrow{animation:none;opacity:1;transform:none;text-shadow:none}}.about-grid{grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:clamp(50px,8vw,150px);align-items:center}.profile-meta{grid-column:auto}@media(max-width:900px){.about-grid{grid-template-columns:1fr;gap:36px}.profile-meta{grid-column:auto;width:100%;max-width:520px}}.profile-meta .email-actions{display:flex;align-items:center;gap:12px}.copy-email-button{display:inline-flex;align-items:center;gap:5px;padding:4px 7px;border:1px solid rgba(25,24,22,.18);border-radius:5px;background:transparent;color:#6b645d;font-size:8px;font-weight:800;letter-spacing:.08em;cursor:pointer;transition:color .2s ease,border-color .2s ease,background .2s ease}.copy-email-button svg{fill:none;stroke:currentColor;stroke-width:1.7}.copy-email-button:hover,.copy-email-button.is-copied{border-color:#c72f63;background:#c72f6312;color:#c72f63}.quick-nav-button{position:fixed;top:24px;left:24px;z-index:9999;padding:12px 20px;border:1px solid rgba(30,30,30,.15);border-radius:999px;background:#f5f2ebeb;color:#222;font:inherit;font-size:11px;font-weight:600;letter-spacing:.12em;cursor:pointer;box-shadow:0 6px 24px #00000014;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background .2s ease,transform .2s ease,box-shadow .2s ease}.quick-nav-button{position:fixed;inset:auto 32px 32px auto;z-index:9999;padding:12px 20px;border:1px solid rgba(30,30,30,.15);border-radius:999px;background:#f5f2ebeb;color:#222;font:inherit;font-size:11px;font-weight:600;letter-spacing:.12em;cursor:pointer;box-shadow:0 6px 24px #00000014;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background .2s ease,transform .2s ease,box-shadow .2s ease}.quick-nav-button:active{transform:translateY(0)}