:root{--paper:#f1e7d3;--paper-2:#e7dbc2;--paper-3:#fbf6ea;--ink:#1f1a14;--ink-2:#5b4f40;--rule:#1f1a1429;--rule-2:#1f1a1452;--signal:#b0322a;--ok:#3f6b4a;--demo-bg:#e9dec7;--font:"IBM Plex Sans KR", system-ui, sans-serif;--mono:"IBM Plex Mono", ui-monospace, monospace;--gutter:clamp(16px, 4vw, 48px);--max:1240px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (prefers-color-scheme:dark){:root{--paper:#16130e;--paper-2:#1f1b15;--paper-3:#1b1812;--ink:#ece6d8;--ink-2:#c3bcac;--rule:#ece6d824;--rule-2:#ece6d847;--signal:#e0634b;--ok:#7fb08a;--demo-bg:#221d16;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:72px}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}body{background:var(--paper);color:var(--ink);font:400 16px/1.7 var(--font);-webkit-font-smoothing:antialiased;margin:0;overflow-x:hidden}img{max-width:100%;display:block}a{color:inherit}button{font:inherit}#stage{pointer-events:none;z-index:1;width:100vw;height:100vh;position:fixed;inset:0}.top,main,footer{z-index:2;position:relative}.top{z-index:5;padding:10px var(--gutter);background:color-mix(in srgb, var(--paper) 88%, transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule);align-items:center;gap:20px;display:flex;position:sticky;top:0}.brand img{width:auto;height:30px}@media (prefers-color-scheme:dark){.brand img{filter:invert(.92)hue-rotate(180deg)}}#nav{scrollbar-width:none;gap:4px;margin-left:auto;display:flex;overflow-x:auto}#nav::-webkit-scrollbar{display:none}#nav a{white-space:nowrap;color:var(--ink-2);border-radius:2px;padding:6px 10px;font-size:14px;text-decoration:none}#nav a:hover,#nav a.on{color:var(--ink);background:var(--paper-2)}.wrap{max-width:var(--max);padding:0 var(--gutter);margin:0 auto}.hero{align-items:center;min-height:min(92vh,900px);display:grid;position:relative}.hero .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:32px;width:100%;display:grid}.kicker{font:600 13px/1 var(--mono);letter-spacing:.12em;color:var(--signal);margin:0 0 18px}.hero h1{letter-spacing:-.02em;margin:0 0 22px;font-size:clamp(34px,5.4vw,64px);font-weight:600;line-height:1.12}.hero p.sub{color:var(--ink-2);max-width:34em;margin:0 0 30px;font-size:clamp(16px,1.6vw,18px)}.who{font:400 14px/1.6 var(--mono);color:var(--ink-2);margin-top:26px}.hero .view{aspect-ratio:1}.ink-btn{cursor:pointer;background:var(--signal);color:#fbf6ea;letter-spacing:.02em;box-shadow:0 0 0 1px var(--signal), inset 0 0 0 3px #fbf6ea4d;border:0;align-items:center;gap:10px;padding:14px 26px;font-weight:600;text-decoration:none;transition:transform .15s;display:inline-flex;transform:rotate(-.6deg)}.ink-btn:hover{transform:rotate(0)translateY(-1px)}.ghost-btn{cursor:pointer;color:var(--ink);border:1.5px solid var(--ink);background:0 0;padding:10px 18px;font-weight:600}.ghost-btn:hover{background:var(--paper-2)}section.proj{border-top:1px solid var(--rule);padding:clamp(64px,9vw,120px) 0}.sec-head{align-items:baseline;gap:16px;margin-bottom:8px;display:flex}.sec-no{font:600 14px var(--mono);color:var(--signal)}.proj h2{letter-spacing:-.015em;margin:0;font-size:clamp(26px,3.4vw,40px);font-weight:600;line-height:1.2}.one-liner{color:var(--ink-2);max-width:52em;margin:14px 0 34px;font-size:clamp(16px,1.5vw,19px)}.proj-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:start;gap:clamp(24px,4vw,56px);display:grid}.proj-grid.flip>.demo{order:-1}.body p{margin:0 0 16px}.facts{border-top:1.5px solid var(--ink);grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin:28px 0;display:grid}.fact{border-bottom:1px solid var(--rule);padding:14px 14px 16px 0}.fact:nth-child(odd){border-right:1px solid var(--rule)}.fact:nth-child(2n){padding-left:14px}.fact b{font:600 clamp(20px, 2.2vw, 26px)/1.2 var(--font);letter-spacing:-.01em;display:block}.fact span{color:var(--ink-2);margin-top:4px;font-size:13.5px;line-height:1.5;display:block}.stack{flex-wrap:wrap;gap:6px;margin:0 0 18px;padding:0;list-style:none;display:flex}.stack li{font:400 12.5px var(--mono);border:1px solid var(--rule-2);padding:3px 8px}.links a{border-bottom:1.5px solid var(--signal);align-items:center;gap:8px;margin-right:18px;padding-bottom:2px;font-weight:600;text-decoration:none;display:inline-flex}.links a:after{content:"↗";color:var(--signal)}.demo{position:sticky;top:84px}.demo-card{border:1.5px solid var(--ink);background:0 0}.demo-head{border-bottom:1px solid var(--rule-2);background:var(--paper-3);justify-content:space-between;align-items:baseline;gap:12px;padding:12px 16px;display:flex}.demo-head b{font-size:15px}.demo-head small{font:400 11px var(--mono);color:var(--ink-2);letter-spacing:.08em;white-space:nowrap}.view{aspect-ratio:4/3;touch-action:pan-y;-webkit-user-select:none;user-select:none;position:relative;overflow:hidden}.view.tall{aspect-ratio:1}.view.drag{touch-action:none;cursor:crosshair}.view .lbl{font:600 12px/1.2 var(--font);white-space:nowrap;pointer-events:none;background:color-mix(in srgb, var(--paper-3) 86%, transparent);border:1px solid var(--rule-2);padding:3px 7px;position:absolute;top:0;left:0;transform:translate(-50%,-50%)}.view .lbl.accent{color:var(--signal);border-color:var(--signal)}.view .lbl.btn{pointer-events:auto;cursor:pointer}.view .hud{pointer-events:none;flex-wrap:wrap;gap:6px;display:flex;position:absolute;top:10px;left:10px;right:10px}.view .hud span{font:400 12px var(--mono);background:color-mix(in srgb, var(--paper-3) 90%, transparent);border:1px solid var(--rule);padding:3px 7px}.view .hud span.warn{color:var(--signal);border-color:var(--signal);font-weight:600}.view .hud span.ok{color:var(--ok);border-color:var(--ok)}.view .fallback{text-align:center;color:var(--ink-2);place-items:center;padding:24px;font-size:14px;display:none;position:absolute;inset:0}.no-3d .view .fallback{display:grid}.demo-ctrl{border-top:1px solid var(--rule-2);background:var(--paper-3);flex-wrap:wrap;align-items:center;gap:8px;padding:12px 16px;display:flex}.demo-ctrl .ink-btn{padding:10px 18px;font-size:14px;transform:none}.demo-ctrl .status{font:400 12.5px/1.5 var(--mono);color:var(--ink-2);flex:200px;min-width:0}.demo-hint{color:var(--ink-2);margin:0;padding:10px 16px 0;font-size:13.5px}.demo-cap{color:var(--ink-2);margin:10px 2px 0;font-size:12.5px;line-height:1.6}.demo-cap:before{content:"※ ";color:var(--signal)}.log{font:400 12px/1.7 var(--mono);color:var(--ink-2);background:var(--paper-3);min-height:5.3em;margin:0;padding:0 16px 12px;list-style:none}.log li.warn{color:var(--signal)}.extras{gap:18px;margin-top:clamp(32px,5vw,56px);display:grid}.gallery{scroll-snap-type:x mandatory;grid-auto-columns:minmax(260px,1fr);grid-auto-flow:column;gap:14px;padding-bottom:8px;display:grid;overflow-x:auto}.gallery figure{scroll-snap-align:start;margin:0}.gallery a{border:1px solid var(--rule-2);display:block}.gallery img{aspect-ratio:16/10;object-fit:cover;object-position:top;width:100%}.gallery figcaption{color:var(--ink-2);margin-top:6px;font-size:12.5px}details.diagram{border:1px solid var(--rule-2);background:var(--paper-3)}details.diagram summary{cursor:pointer;justify-content:space-between;padding:12px 16px;font-weight:600;list-style:none;display:flex}details.diagram summary:after{content:"+";font:600 18px var(--mono);color:var(--signal)}details.diagram[open] summary:after{content:"−"}details.diagram img{width:100%;max-width:860px;margin:0 auto;padding:0 12px 12px}@media (prefers-color-scheme:dark){details.diagram img{filter:invert(.9)hue-rotate(180deg)contrast(.95)}}.more-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:16px;margin-top:30px;display:grid}.card{border:1.5px solid var(--ink);background:var(--paper-3);flex-direction:column;gap:12px;padding:20px;display:flex}.card h3{margin:0;font-size:18px;line-height:1.4}.card p{color:var(--ink-2);flex:1;margin:0;font-size:14.5px}.card .stack{margin:0}.contact{text-align:left}.contact .mail{font:600 clamp(24px, 4vw, 44px)/1.2 var(--font);border-bottom:3px solid var(--signal);text-decoration:none}footer{border-top:1px solid var(--rule);font:400 12.5px var(--mono);color:var(--ink-2);padding:28px 0 40px}@media (width<=900px){.hero{min-height:auto;padding:36px 0 24px}.hero .wrap{grid-template-columns:1fr}.hero .view{aspect-ratio:1/.85}.proj-grid{grid-template-columns:1fr}.proj-grid>.demo,.proj-grid.flip>.demo{order:-1}.demo{position:static}.view{aspect-ratio:1}.facts{grid-template-columns:1fr 1fr}}@media (width<=480px){.facts{grid-template-columns:1fr}.fact:nth-child(odd){border-right:0}.fact:nth-child(2n){padding-left:0}.gallery{grid-auto-columns:82%}}
