/* V111: code as a living visual, with an explicit motion control. */
.dev-lab-page{--paper:#121217;--ink:#f5f4eb;--soft:#aaa9b7;--line:#34343f;--acid:#d6ff4b;--pink:#ff81c4;background:var(--paper);color:var(--ink)}
.dev-lab-page header{border-color:var(--line)}.dev-lab-page header nav a[aria-current]{color:var(--acid);border-color:var(--acid)}.dev-lab-page a:focus-visible,.dev-lab-page button:focus-visible{outline-color:var(--acid)}
.dev-lab-page .collection-intro{padding:26px 0 10px}.dev-lab-page .collection-intro .back{margin-bottom:15px;color:#b3b1c0}.dev-lab-page .title-row{align-items:center;gap:12px}.dev-lab-page .title-row h1{font:500 15px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.02em;text-transform:uppercase}.dev-lab-page .count{padding:3px 7px;margin:0;border-color:#5b5b68;color:var(--acid);font:11px/1.5 ui-monospace,monospace;border-radius:4px}.dev-lab-page .collection-intro>p{display:none}
.idea-lab{position:relative;display:grid;grid-template-columns:1fr 1.1fr;gap:4%;min-height:530px;align-items:center;padding:44px 0 64px;isolation:isolate}
.lab-copy{min-width:0;position:relative;z-index:2}.lab-kicker{display:flex;align-items:center;gap:9px;font:10px/1.6 ui-monospace,monospace;letter-spacing:1.8px;margin-bottom:24px;color:#aeadba}.signal-dot{width:7px;height:7px;border-radius:50%;background:var(--acid);box-shadow:0 0 0 4px #d6ff4b15}.lab-copy h2,.lab-shout{font-size:clamp(56px,5.6vw,89px);letter-spacing:-.075em;font-weight:850;line-height:.98;margin:0;white-space:nowrap}.lab-shout{color:var(--acid);margin-top:8px;display:inline-block;transform:rotate(-3deg);transform-origin:left center}.lab-description{max-width:430px;color:#bebbc9;font-size:16px;line-height:1.75;margin:30px 0 24px}.lab-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.idea-trigger{display:flex;align-items:center;justify-content:center;gap:14px;min-height:54px;padding:0 20px;border:1px solid var(--acid);background:var(--acid);color:#16171a;box-shadow:4px 4px 0 #6d8132;font:800 12px/1.5 ui-monospace,'Apple SD Gothic Neo',sans-serif;letter-spacing:.4px;cursor:pointer;transition:transform .14s,box-shadow .14s}.idea-trigger:hover{transform:translate(-1px,-2px);box-shadow:5px 6px 0 #6d8132}.idea-trigger:active{transform:translate(3px,3px);box-shadow:1px 1px 0 #6d8132}.idea-trigger>span:first-child{font-size:23px}.trigger-arrow{font-size:20px}.lab-motion{min-height:44px;border:0;border-bottom:1px solid #5a5667;padding:8px 0;background:none;color:#b6b2c3;font-size:11px;cursor:pointer}.lab-motion:hover{color:white}.lab-hint{font:10px/1.6 ui-monospace,'Apple SD Gothic Neo',sans-serif;margin-top:15px;color:#92909f}
.lab-stage{height:435px;position:relative;min-width:0;perspective:1000px}.lab-stage:before{content:'';position:absolute;inset:-10px -10px 10px;background-image:linear-gradient(#d6ff4b09 1px,transparent 1px),linear-gradient(90deg,#d6ff4b09 1px,transparent 1px);background-size:28px 28px;mask-image:radial-gradient(ellipse,black 15%,transparent 73%);-webkit-mask-image:radial-gradient(ellipse,black 15%,transparent 73%);z-index:-1;pointer-events:none}.code-window{position:absolute;top:43px;left:0;width:92%;border:1px solid #585667;background:#20202a;box-shadow:12px 15px 0 #0003;transform:rotate(-3deg);animation:code-float 8s ease-in-out infinite}.window-bar{display:flex;align-items:center;gap:10px;padding:13px 15px;border-bottom:1px solid #3c3b49;font:9px/1.5 ui-monospace,monospace;color:#aba7bb}.window-dots{display:flex;gap:5px}.window-dots i{width:5px;height:5px;border-radius:50%;background:#797487}.window-dots i:first-child{background:var(--pink)}.window-tag{margin-left:auto;font-size:7px;letter-spacing:.6px;white-space:nowrap;color:#8b879b}.code-content{padding:23px 15px 28px}.code-line{display:flex;gap:18px;font:clamp(9px,1vw,13px)/2.2 ui-monospace,SFMono-Regular,Consolas,monospace;min-height:22px;white-space:pre}.code-line>span{color:#656074;font-size:10px}.code-line code{font:inherit;color:#d1ccdf;min-width:0}.code-line b{color:#c5a7ff;font-weight:400}.code-line em{color:var(--acid);font-style:normal}.code-line strong{color:#80d9eb;font-weight:400}.code-line i{font-style:normal;color:#78728c}.window-bottom{min-height:44px;display:flex;align-items:center;gap:10px;padding:10px 15px;border-top:1px solid #3c3b49;color:#b8c78f;font:9px/1.5 ui-monospace,'Apple SD Gothic Neo',sans-serif}.terminal-cursor{color:var(--acid);font-size:19px}.code-mark{margin-left:auto;white-space:nowrap;color:#6a657b}.lab-output{min-height:1.5em}
.result-window{position:absolute;right:-2%;bottom:14px;width:46%;max-width:250px;min-width:175px;background:var(--acid);color:#1b2116;border:1px solid #a6c638;box-shadow:7px 9px 0 #0005;transform:rotate(6deg);animation:result-float 7s ease-in-out infinite}.result-top{display:flex;justify-content:space-between;padding:11px 14px;border-bottom:1px solid #1d28172b;font:8px/1.5 ui-monospace,monospace;letter-spacing:1px}.result-body{padding:18px;display:flex;flex-direction:column;gap:7px}.result-icon{font:700 30px/1 ui-monospace,monospace;letter-spacing:-3px;margin-bottom:8px}.result-title{font-size:23px;letter-spacing:-1px;line-height:1.1}.result-copy{font-size:10px;line-height:1.5;min-height:30px;max-width:150px}.result-bars{display:flex;gap:4px;margin-top:9px;align-items:end;height:27px}.result-bars i{width:17%;background:#1b2116;border-radius:2px 2px 0 0;transform-origin:bottom;animation:build-bars 2.4s ease-in-out infinite}.result-bars i:nth-child(1){height:11px;animation-delay:-.3s}.result-bars i:nth-child(2){height:20px;animation-delay:-.8s}.result-bars i:nth-child(3){height:16px;animation-delay:-1.2s}.result-bars i:nth-child(4){height:26px;animation-delay:-1.8s}
.idea-sticker{position:absolute;font:900 12px/1.4 ui-monospace,'Apple SD Gothic Neo',sans-serif;padding:10px 14px;z-index:2;box-shadow:3px 4px 0 #0004;white-space:nowrap}.sticker-one{right:4%;top:0;background:var(--pink);color:#3a132b;transform:rotate(8deg);animation:sticker-nudge 6s ease-in-out infinite}.sticker-two{left:7%;bottom:17px;background:#ece7dc;color:#27232e;transform:rotate(-7deg);font-size:10px}.sketch-caption{position:absolute;left:2%;bottom:-17px;max-width:50%;color:#8e889e;font:8px/1.5 ui-monospace,'Apple SD Gothic Neo',sans-serif}.code-burst{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:hidden}.code-burst span{position:absolute;left:52%;top:48%;font:800 24px/1 ui-monospace,monospace;opacity:0;color:var(--acid)}.code-burst span:nth-child(2n){color:var(--pink)}.code-burst span:nth-child(1){--dx:-150px;--dy:-170px;--turn:-25deg}.code-burst span:nth-child(2){--dx:130px;--dy:-180px;--turn:30deg}.code-burst span:nth-child(3){--dx:180px;--dy:30px;--turn:20deg}.code-burst span:nth-child(4){--dx:-200px;--dy:10px;--turn:-15deg}.code-burst span:nth-child(5){--dx:-70px;--dy:160px;--turn:25deg}.code-burst span:nth-child(6){--dx:110px;--dy:135px;--turn:-20deg}.idea-lab.is-running .code-burst span{animation:code-pop 1.1s cubic-bezier(.15,.6,.25,1) both}.idea-lab.is-running .code-burst span:nth-child(2n){animation-delay:.08s}.idea-lab.is-running .code-line{animation:line-build .5s ease-out both}.idea-lab.is-running .code-line:nth-child(2){animation-delay:.08s}.idea-lab.is-running .code-line:nth-child(4){animation-delay:.12s}.idea-lab.is-running .code-line:nth-child(5){animation-delay:.18s}.idea-lab.is-running .code-line:nth-child(6){animation-delay:.25s}.idea-lab.is-running .code-line:nth-child(7){animation-delay:.32s}.idea-lab.is-running .code-line:nth-child(8){animation-delay:.4s}
.build-tape{overflow:hidden;border-top:1px solid #494735;border-bottom:1px solid #494735;color:var(--acid);transform:rotate(-1.2deg);margin:12px 0 46px;padding:13px 0;background:#1f2219;max-width:100%}.build-tape>div{white-space:nowrap;width:max-content;font:700 12px/1.5 ui-monospace,monospace;letter-spacing:3px;animation:build-tape 38s linear infinite}.lab-section-label{display:flex;justify-content:space-between;gap:16px;align-items:center;font:10px/1.6 ui-monospace,'Apple SD Gothic Neo',sans-serif;margin-bottom:24px;letter-spacing:1px}.lab-section-label>span:first-child{color:var(--acid)}.lab-section-label>span:last-child{color:#9993a9;letter-spacing:0}
.dev-lab-page .project-card{border:1px solid var(--line);padding:12px 12px 20px;background:#1a1922;transition:transform .2s,border-color .2s;position:relative}.dev-lab-page .project-card:hover{border-color:#b5d94a;transform:translateY(-5px)}.dev-lab-page .project-card h2,.dev-lab-page .project-card p,.dev-lab-page .card-meta,.dev-lab-page .stage{margin-left:8px;margin-right:8px}.dev-lab-page .project-card h2{font-weight:650;margin-top:13px;color:#f3f2e9}.dev-lab-page .project-card p{color:#bbb6c8}.dev-lab-page .card-meta{color:#9e94b1}.dev-lab-page .stage{color:#d1dbb5;border-top-color:#3c3748}.dev-lab-page .pagination a[aria-current]{background:var(--acid);border-color:var(--acid);color:#171a11}.dev-lab-page .type-art.motion{background:#32283e;color:#f1dfb8}.dev-lab-page footer{color:#b5b0c2}
.b2b-notice{display:grid;grid-template-columns:46px 1fr;gap:20px;padding:25px 28px;margin:0 0 35px;background:#e8eadf;border:1px solid #cbd0bd;border-left:3px solid #68784d}.b2b-icon{display:grid;place-items:center;width:44px;height:44px;background:#f7f7f0;border:1px solid #d0d4c2;color:#46563b}.notice-kicker{font:9px/1.5 ui-monospace,'Apple SD Gothic Neo',sans-serif;letter-spacing:1.3px;color:#5b694c;margin-bottom:9px}.b2b-notice h2{font-weight:650;font-size:20px;line-height:1.4;letter-spacing:-.035em;margin:0 0 9px;text-wrap:balance}.b2b-notice p{font-size:13px;line-height:1.8;margin:0;max-width:780px;color:#56604c}
@keyframes code-float{0%,100%{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(-2deg) translateY(-7px)}}@keyframes result-float{0%,100%{transform:rotate(6deg) translateY(0)}50%{transform:rotate(4deg) translateY(-6px)}}@keyframes sticker-nudge{0%,75%,100%{transform:rotate(8deg)}82%{transform:rotate(2deg)}90%{transform:rotate(10deg)}}@keyframes build-bars{0%,100%{transform:scaleY(.65)}50%{transform:scaleY(1)}}@keyframes build-tape{to{transform:translateX(-33.3333%)}}@keyframes code-pop{0%{opacity:0;transform:translate(0,0) scale(.3)}12%{opacity:1}75%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--turn)) scale(.8)}}@keyframes line-build{from{opacity:.25;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}
.dev-lab-page[data-lab-motion=paused] .idea-lab *,.dev-lab-page[data-lab-motion=paused] .build-tape>div{animation-play-state:paused!important}.dev-lab-page[data-lab-motion=paused] .code-burst{display:none}.idea-lab[data-on-screen=false] *{animation-play-state:paused!important}
html[lang=ko] .lab-copy h2,html[lang=ko] .lab-shout{font-size:clamp(48px,4.4vw,72px);line-height:1.13;letter-spacing:-.065em}html[lang=ko] .lab-description{max-width:415px;font-size:15px}
@media(min-width:1800px){.idea-lab{min-height:660px;gap:7%;padding:55px 0 75px}.lab-copy h2,.lab-shout{font-size:clamp(90px,4vw,148px)}html[lang=ko] .lab-copy h2,html[lang=ko] .lab-shout{font-size:clamp(75px,3.5vw,128px)}.lab-stage{height:540px;max-width:950px}.lab-description,html[lang=ko] .lab-description{font-size:20px;max-width:620px}.code-line{font-size:clamp(14px,.65vw,22px)}.code-content{padding:30px}.result-window{max-width:310px}.result-body{padding:26px}.result-title{font-size:31px}.result-copy{font-size:13px;max-width:230px}.window-bar,.window-bottom{font-size:12px}.lab-kicker,.lab-section-label,.build-tape>div{font-size:14px}.sketch-caption{font-size:11px}.b2b-notice h2{font-size:28px}.b2b-notice p{font-size:18px;max-width:1200px}}
@media(max-width:1000px) and (min-width:701px){.idea-lab{grid-template-columns:.9fr 1.1fr;gap:3%}.lab-copy h2,.lab-shout{font-size:57px}html[lang=ko] .lab-copy h2,html[lang=ko] .lab-shout{font-size:44px}.lab-stage{height:390px}.code-content{padding:18px 10px}.code-line{font-size:9px;gap:9px}.window-tag{display:none}.result-window{min-width:150px}.result-title{font-size:20px}.lab-description{font-size:14px}.result-body{padding:15px}}
@media(max-width:700px){.idea-lab{grid-template-columns:1fr;gap:12px;padding:25px 0 38px;min-height:0}.lab-copy h2,.lab-shout{font-size:clamp(55px,11.5vw,79px)}html[lang=ko] .lab-copy h2,html[lang=ko] .lab-shout{font-size:clamp(44px,9.6vw,65px)}.lab-kicker{margin-bottom:19px;font-size:9px}.lab-description,html[lang=ko] .lab-description{font-size:14px;line-height:1.8;margin:24px 0;max-width:530px}.lab-stage{height:380px;margin-top:22px;width:100%;max-width:540px;justify-self:center}.code-window{width:93%;top:35px;left:1%}.code-line{font-size:clamp(9px,2.4vw,12px);gap:12px;line-height:2.2;min-height:21px}.code-content{padding:21px 12px}.window-tag{font-size:6px}.window-bar{font-size:8px;padding:12px}.result-window{min-width:155px;width:44%;bottom:7px;right:1%}.result-body{padding:15px}.result-title{font-size:22px}.result-copy{font-size:9px}.result-icon{font-size:27px}.result-top{padding:9px 12px}.result-bars{height:20px;margin-top:5px}.sticker-one{right:3%;top:-3px;padding:8px 12px;font-size:11px}.sticker-two{bottom:10px;left:4%;padding:9px 11px;font-size:9px}.sketch-caption{left:3%;bottom:-16px;font-size:7px}.build-tape{margin-top:0;margin-bottom:34px;padding:10px 0}.build-tape>div{font-size:10px;letter-spacing:2px}.lab-section-label{font-size:9px;letter-spacing:.5px}.lab-section-label>span:last-child{font-size:8px}.dev-lab-page .project-grid{gap:24px}.dev-lab-page .project-card{padding:10px 10px 18px}.dev-lab-page .project-card p{font-size:13px}.b2b-notice{padding:20px 18px;gap:14px;grid-template-columns:34px 1fr;margin-bottom:27px}.b2b-icon{width:34px;height:38px}.b2b-icon svg{width:23px;height:23px}.b2b-notice h2{font-size:18px;line-height:1.5}.b2b-notice p{font-size:12px;line-height:1.8}.notice-kicker{font-size:8px;letter-spacing:.5px}}
@media(max-width:360px){.window-tag{display:none}.lab-stage{height:360px}.result-window{min-width:142px;width:48%}.result-title{font-size:20px}.result-body{padding:12px}.code-content{padding:19px 9px}.code-line{gap:8px;font-size:8.5px}.window-bottom{font-size:8px}.lab-actions{gap:13px}.idea-trigger{padding:0 15px;font-size:11px}.b2b-notice{grid-template-columns:1fr;gap:12px}.b2b-icon{display:none}}
@media(prefers-reduced-motion:reduce){.idea-lab *,.build-tape>div{animation:none!important;transition:none!important}.code-burst{display:none}}
/* Code writes itself in a slow loop; paused and reduced-motion states show it all. */
.code-line code{display:block;animation:code-write 10s steps(28,end) infinite}
.code-line:nth-child(2) code{animation-delay:.22s}.code-line:nth-child(3) code{animation-delay:.3s}.code-line:nth-child(4) code{animation-delay:.45s}.code-line:nth-child(5) code{animation-delay:.65s}.code-line:nth-child(6) code{animation-delay:.85s}.code-line:nth-child(7) code{animation-delay:1.05s}.code-line:nth-child(8) code{animation-delay:1.25s}
@keyframes code-write{0%{clip-path:inset(0 100% 0 0)}9%,100%{clip-path:inset(0 0 0 0)}}
.dev-lab-page[data-lab-motion=paused] .code-line code{animation:none!important;clip-path:none!important}
@media(prefers-reduced-motion:reduce){.code-line code{animation:none!important;clip-path:none!important}}