:root{--bg:#EDF0F1;--canvas:#F5F7F7;--dot:#D3DADC;--surface:#FFFFFF;--s1:#F6F8F8;--s2:#EBEFF0;--s3:#E0E6E7;--s4:#D6DDDF;--line:#D2DADC;--line-strong:#A9B6BA;--text:#131D21;--text-2:#475459;--text-3:#78858A;--accent:#0A7A74;--accent-weak:rgba(10,122,116,.1);--accent-line:rgba(10,122,116,.45);--add:#23875A;--add-weak:rgba(35,135,90,.1);--mod:#B26F06;--mod-weak:rgba(178,111,6,.11);--del:#C83E44;--del-weak:rgba(200,62,68,.09);--ai:#6E4FD0;--ai-weak:rgba(110,79,208,.1);--shadow:0 1px 2px rgba(20,32,36,.06),0 4px 14px rgba(20,32,36,.06);--sans:"IBM Plex Sans KR",-apple-system,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;--mono:"IBM Plex Mono","IBM Plex Sans KR",ui-monospace,"SF Mono",Menlo,Consolas,monospace}body{background:var(--bg);color:var(--text);font:400 15px/1.65 var(--sans)}.mono{font-family:var(--mono)}.wrap{max-width:1120px;margin:0 auto;padding:0 16px}@media(min-width:760px){.wrap{padding:0 32px}}.top{position:sticky;top:0;z-index:5;height:48px;background:var(--surface);border-bottom:1px solid var(--line)}.top .wrap{height:100%;display:flex;align-items:center;gap:10px}.top .home{font:600 13px/1 var(--sans);color:var(--text-3);text-decoration:none;letter-spacing:-.01em}.top .home:hover{color:var(--text)}.top .sep{color:var(--line-strong)}.brand{display:flex;align-items:center;gap:8px;font:600 14px/1 var(--mono);letter-spacing:-.01em}.spacer{flex:1}.tag{font:500 11.5px/1 var(--mono);padding:5px 8px;border-radius:4px;color:var(--accent);background:var(--accent-weak);white-space:nowrap}.hero{background:var(--canvas);background-image:radial-gradient(var(--dot) 1px,transparent 1.2px);background-size:20px 20px;border-bottom:1px solid var(--line)}.hero .wrap{padding-top:48px;padding-bottom:48px}@media(min-width:900px){.hero .wrap{padding-top:80px;padding-bottom:72px}}.eyebrow{font:500 11px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin:0 0 14px}.hero h1{font-weight:600;font-size:clamp(28px,7vw,48px);line-height:1.25;letter-spacing:-.025em;margin:0 0 18px;max-width:16em}.hero h1 em{font-style:normal;color:var(--accent)}.hero .lead{font-size:clamp(15px,3.8vw,17px);color:var(--text-2);max-width:36em;margin:0 0 28px}.install{max-width:560px;background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);overflow:hidden}.install .bar{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-bottom:1px solid var(--line);background:var(--s1);font:500 11px/1 var(--mono);color:var(--text-3);letter-spacing:.04em}.install pre{margin:0;padding:14px 16px;overflow-x:auto;font:400 14px/1.8 var(--mono)}.install .p{color:var(--text-3);user-select:none}.install .ph{color:var(--mod);background:var(--mod-weak);border-radius:3px;padding:1px 4px}.install .c{color:var(--text-3)}.copy{font:500 11px/1 var(--mono);border:1px solid var(--line);background:var(--surface);color:var(--text-3);padding:4px 8px;border-radius:4px}.links{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}.lnk{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:6px;border:1px solid var(--line);background:var(--surface);font:500 13px/1 var(--sans);color:var(--text-2);text-decoration:none}.lnk .when{font:500 11px/1 var(--mono);color:var(--text-3)}.req{font-size:13px;color:var(--text-3);margin-top:12px}section.blk{padding:56px 0 8px}.blk h2{font-size:clamp(22px,5vw,28px);font-weight:600;letter-spacing:-.02em;margin:0 0 8px}.blk .sub{color:var(--text-2);margin:0 0 22px;max-width:40em}.blk h2:last-of-type:not(:has(+.sub)),.loop-blk h2{margin-bottom:20px}.pts{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden}@media(min-width:760px){.pts{grid-template-columns:repeat(3,1fr)}}.pt{background:var(--surface);padding:20px 20px 22px}.pt .n{font:500 11px/1 var(--mono);color:var(--accent);margin-bottom:10px}.pt h3{font-size:16px;font-weight:600;margin:0 0 6px;letter-spacing:-.01em}.pt p{margin:0;font-size:14px;color:var(--text-2)}.pt code{font:400 12.5px var(--mono);background:var(--s2);padding:1px 5px;border-radius:3px;color:var(--text)}.cmds{background:var(--surface);border:1px solid var(--line);border-radius:8px;overflow:hidden}.cmd{display:grid;grid-template-columns:minmax(0,190px) 1fr;gap:12px;padding:10px 16px;border-top:1px solid var(--line);font-size:14px}.cmd:first-child{border-top:0}.cmd code{font:500 13px var(--mono);color:var(--text)}.cmd span{color:var(--text-2)}@media(max-width:520px){.cmd{grid-template-columns:1fr;gap:2px}}.note{margin:16px 0 0;font-size:13.5px;color:var(--text-3)}footer.site{margin-top:72px;background:var(--surface);border-top:1px solid var(--line)}footer.site .wrap{padding-top:28px;padding-bottom:44px;display:grid;gap:12px;font-size:14px;color:var(--text-2)}footer.site a{color:var(--accent);font-weight:500}footer.site .bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font:400 12px var(--mono);color:var(--text-3)}footer.site .bottom a{color:var(--text-3);font-weight:400}.hero-grid{display:grid;gap:32px;align-items:center}.hero-grid>*,.scene>*,.cs-grid>*{min-width:0}@media(min-width:1000px){.hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 56px;align-items:end}.hero-grid .hero-clip{grid-column:1 / -1;margin-top:28px!important}.hero-grid .hero-side{padding-bottom:6px}}.hero .kicker{font:500 13px/1.4 var(--sans);color:var(--text-2);margin:0 0 12px;display:flex;gap:8px;align-items:center}.hero .kicker:before{content:"";width:18px;height:1.5px;background:var(--accent)}.clip{background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);overflow:hidden}.clip video{display:block;width:100%;height:auto;aspect-ratio:1280 / 800;background:var(--canvas)}.clip .cap{display:flex;justify-content:space-between;gap:10px;padding:8px 12px;border-top:1px solid var(--line);font:500 11px/1.4 var(--mono);color:var(--text-3)}.clip .cap b{color:var(--text-2);font-weight:500}.scenes{display:grid;gap:56px}.scene{display:grid;gap:20px;align-items:center}@media(min-width:1000px){.scene{grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);gap:44px}.scene:nth-child(2n){grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr)}.scene:nth-child(2n) .txt{order:2}}.scene .no{font:600 12px/1 var(--mono);color:var(--accent);background:var(--accent-weak);border-radius:4px;padding:5px 7px;display:inline-block;margin-bottom:12px}.scene h3{font-size:clamp(20px,4.6vw,24px);font-weight:600;letter-spacing:-.02em;line-height:1.35;margin:0 0 10px}.scene p{margin:0 0 10px;color:var(--text-2)}.scene .ui{font:400 12.5px/1.6 var(--mono);color:var(--text-3)}.scene .ui code{color:var(--text);background:var(--s2);padding:1px 5px;border-radius:3px}.wo{background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);overflow:hidden}.wo .bar{display:flex;justify-content:space-between;gap:8px;padding:8px 12px;border-bottom:1px solid var(--line);background:var(--s1);font:500 11.5px/1.3 var(--mono);color:var(--text-2)}.wo pre{margin:0;padding:14px 16px;overflow-x:auto;font:400 12.5px/1.75 var(--mono);color:var(--text-2);max-height:460px;position:relative}.wo .h{color:var(--text);font-weight:600}.wo .a{color:var(--add)}.wo .d{color:var(--del)}.wo .m{color:var(--mod)}.wo .p2{color:var(--ai)}.wo .more{padding:10px 16px;border-top:1px solid var(--line);font-size:13px;color:var(--text-3)}.depth{display:grid;gap:12px}@media(min-width:1000px){.depth{grid-template-columns:minmax(0,1fr) 260px;gap:16px;align-items:stretch}}.rail{list-style:none;margin:0;padding:0;display:grid;gap:6px;grid-template-columns:repeat(2,minmax(0,1fr))}@media(min-width:1000px){.rail{grid-template-columns:1fr;align-content:center}}.rail button{width:100%;height:100%;text-align:left;display:grid;gap:4px;align-content:start;padding:10px 12px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--text-2);font:inherit;cursor:pointer;transition:border-color .25s,background .25s}.rail button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.rail .lv{font:600 12px/1.2 var(--sans);color:var(--text-3)}.rail .lv b{font-family:var(--mono);font-weight:600}.rail .q{font-size:14px;line-height:1.45;font-weight:600;color:var(--text)}.rail .ex{font:400 12.5px/1.45 var(--sans);color:var(--text-3)}.rail button.on{border-color:var(--accent);background:var(--accent-weak)}.rail button.on .lv{color:var(--accent)}@media(max-width:999px){.rail .ex{display:none}.rail .q{font-size:13px}.hero-grid .hero-clip{order:2}.hero-grid .hero-side{order:3}}.loop-blk{padding:56px 0 8px}.loop-blk h2{font-size:clamp(22px,5vw,28px);font-weight:600;letter-spacing:-.02em;margin:0 0 8px}.loop-blk .sub{color:var(--text-2);margin:0 0 22px;max-width:40em}.loop{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden;counter-reset:s}@media(min-width:760px){.loop{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(min-width:1000px){.loop{grid-template-columns:repeat(4,minmax(0,1fr))}}.loop li{background:var(--surface);padding:18px 18px 20px;counter-increment:s;min-width:0}.loop li:before{content:counter(s);font:500 11px/1 var(--mono);color:var(--text-3);margin-right:8px}.loop .who{font:600 11px/1 var(--mono);padding:4px 6px;border-radius:4px}.loop .who.ai{color:var(--ai);background:var(--ai-weak)}.loop .who.me{color:var(--accent);background:var(--accent-weak)}.loop h3{font-size:16px;font-weight:600;letter-spacing:-.01em;margin:12px 0 6px}.loop p{margin:0;font-size:14px;color:var(--text-2)}.loop code{font:400 12.5px var(--mono);background:var(--s2);padding:1px 5px;border-radius:3px;color:var(--text)}