:root{--surface:#fff;--surface-warm:#fafaf8;--surface-subtle:#f5f4f0;--ink:#141210;--ink-2:#3b3730;--ink-3:#6b6558;--ink-4:#9c9588;--ink-5:#c8c2b6;--primary:#5a8268;--primary-hover:#496b55;--primary-subtle:#5a826814;--primary-light:#e3efe7;--secondary:#b5612a;--danger:#c2607a;--sand:#c8a050;--border:#14121012;--border-strong:#1412101f;--radius-s:6px;--radius-m:10px;--radius-l:16px;--shadow-s:0 1px 3px #1412100a;--shadow-m:0 4px 16px #1412100f;--shadow-l:0 16px 48px #1412101a;--desk:#eae7df;--desk-bg:radial-gradient(1100px 620px at 16% 8%, #5a826838, transparent 68%), linear-gradient(160deg, #f7f5f0, #efe9df);--grain-opacity:.5;--font:"Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;--mono:ui-monospace, "SF Mono", Menlo, monospace;--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{background:var(--desk);background-image:var(--desk-bg);color:var(--ink);font:15px / 1.6 var(--font);letter-spacing:-.01em;-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:break-word;background-attachment:fixed;padding:0 16px}button,input,textarea{font:inherit;color:inherit;letter-spacing:inherit}h1,h2,h3,p{margin:0}h1,h2,h3{text-wrap:balance}p{text-wrap:pretty}.app{grid-template-rows:auto 1fr;gap:16px;max-width:1080px;min-height:100dvh;margin:0 auto;padding-bottom:24px;display:grid}main{align-items:start;min-width:0;display:grid}.top{flex-wrap:wrap;align-items:center;gap:10px 16px;min-height:66px;padding-block:16px 4px;display:flex}.brand{letter-spacing:-.03em;color:inherit;align-items:center;gap:9px;margin-right:auto;font-size:16px;font-weight:800;text-decoration:none;display:flex}.brand i{border-radius:var(--radius-m);background:var(--primary);color:#fff;place-items:center;width:30px;height:30px;display:grid}.brand i svg{width:17px;height:17px}.tabs{background:color-mix(in srgb, var(--surface) 70%, transparent);border:1px solid var(--border);border-radius:999px;gap:2px;padding:3px;display:flex}.tab{color:var(--ink-3);cursor:pointer;white-space:nowrap;background:0 0;border:0;border-radius:999px;padding:6px 14px;font-size:13px;font-weight:600}.tab small{color:var(--ink-4);margin-left:3px;font-size:11px}.tab.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-s)}.status{color:var(--ink-3);justify-content:flex-end;align-items:center;gap:8px;min-height:32px;font-size:12.5px;display:flex}@media (width>=601px){.status{min-width:180px}}@media (width<=600px){.tabs{order:3;justify-content:center;width:100%}}.card{background:color-mix(in srgb, var(--surface) 86%, transparent);-webkit-backdrop-filter:blur(6px);border:1px solid var(--border);border-radius:var(--radius-l);box-shadow:var(--shadow-m);gap:14px;min-width:0;padding:20px;display:grid}.card.tight{gap:12px;padding:18px}.eyebrow{color:#3d6650;font-size:12px;font-weight:700}.sub{color:var(--ink-3);font-size:14px}.tiny{color:var(--ink-3);font-size:12px}.err{color:var(--danger);font-size:13px;font-weight:600}.err-slot{min-height:1.6em}.h3{font-size:14px;font-weight:700}.btn{--c:var(--ink-2);isolation:isolate;border-radius:var(--radius-m);cursor:pointer;white-space:nowrap;height:40px;color:var(--c);background:radial-gradient(130% 150% at center, color-mix(in srgb, var(--c) 10%, #fff), color-mix(in srgb, var(--surface) 20%, transparent) 78%);box-shadow:0 1px 6px #3c372d12, inset 0 0 0 1px var(--border);border:0;justify-content:center;align-items:center;gap:6px;padding:0 16px;font-size:14px;font-weight:600;transition:transform .15s cubic-bezier(.34,1.56,.64,1);display:inline-flex;position:relative;overflow:hidden}.btn:after{content:"";z-index:-1;background-image:var(--grain);mix-blend-mode:screen;opacity:var(--grain-opacity);pointer-events:none;background-size:70px;position:absolute;inset:0}.btn:active:not(:disabled){transform:scale(.96)}.btn.solid{--c:var(--primary);color:#fff;background:var(--c);box-shadow:0 1px 2px #1412101f, 0 6px 16px color-mix(in srgb, var(--c) 28%, transparent)}.btn.solid:after{opacity:.12}.btn.solid:hover{--c:var(--primary-hover)}.btn.rust{--c:var(--secondary)}.btn.lg{border-radius:var(--radius-l);height:52px;font-size:16px;font-weight:700}.btn.block{width:100%}.btn.ghost{box-shadow:none;color:var(--ink-3);background:0 0;height:auto;padding:4px 2px;font-size:13px}.btn.ghost:after{display:none}.btn.ghost:hover{color:var(--ink)}.btn.sm{height:32px}.btn.ghost.back{justify-self:start}.btn.retry{height:30px;padding:0 12px;font-size:12px}@media (pointer:coarse){.btn.ghost,.tab,.fold,.brand{min-height:44px}.btn.ghost{padding:0 8px}.btn.retry{height:40px;padding:0 14px}}.btn.icon{border-radius:50%;flex:none;width:44px;height:44px;padding:0}.btn:disabled{opacity:.45;cursor:default}.btn:focus-visible,.tab:focus-visible,input:focus-visible,textarea:focus-visible,.cb-row:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.btn svg{width:18px;height:18px}input,textarea{background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-m);width:100%;padding:11px 13px;font-size:15px}input::placeholder,textarea::placeholder{color:var(--ink-4)}.row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.row.nowrap{flex-wrap:nowrap;min-width:0}.row.spread{justify-content:space-between}.stack{gap:12px;display:grid}.stack.tight{gap:4px}.av{color:#fff;background:var(--c,var(--ink-4));border-radius:50%;flex:none;place-items:center;width:30px;height:30px;font-size:12px;font-weight:700;display:inline-grid}.av.sm{width:22px;height:22px;font-size:10px}.av.lg{width:36px;height:36px;font-size:14px}.faces{display:flex}.faces .av{border:2px solid var(--desk);box-sizing:content-box;margin-left:-7px}.faces .av:first-child{margin-left:0}.dot{background:var(--ink-5);border-radius:50%;flex:none;width:8px;height:8px}.dot.on{background:var(--primary);box-shadow:0 0 0 3px var(--primary-subtle)}.shell{grid-template-columns:minmax(0,1fr) 300px;align-self:stretch;align-items:start;gap:20px;display:grid}.side{gap:14px;display:grid;position:sticky;top:16px}@media (width<=959px){.shell{grid-template-columns:minmax(0,1fr)}.side{position:static}.side.play{display:none}}.hero{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:56px;padding:48px 0 24px;display:grid}@media (width<=859px){.hero{grid-template-columns:minmax(0,1fr);gap:36px;padding:20px 0 8px}}.hero-copy{gap:18px;min-width:0;display:grid}.hero h1{letter-spacing:-.035em;font-size:clamp(30px,4.6vw,44px);font-weight:800;line-height:1.18}.hero-side{gap:22px;min-width:0;display:grid}.howto{gap:10px;padding:0 4px;display:grid}.steps{counter-reset:s;gap:8px;margin:0;padding:0;list-style:none;display:grid}.steps li{counter-increment:s;color:var(--ink-3);align-items:baseline;gap:10px;font-size:14px;display:flex}.steps li:before{content:counter(s);background:var(--primary-light);width:20px;height:20px;color:var(--primary);border-radius:50%;flex:none;place-items:center;font-size:11px;font-weight:700;display:inline-grid;transform:translateY(-1px)}.steps b{color:var(--ink);font-weight:700}.entry{background:var(--surface);border:1px solid var(--border-strong);box-shadow:var(--shadow-s);border-radius:18px;gap:6px;padding:6px;transition:border-color .2s,box-shadow .2s;display:flex}.entry:focus-within{border-color:color-mix(in srgb, var(--primary) 55%, transparent);box-shadow:0 0 0 4px var(--primary-subtle)}.entry input{background:0 0;border:0;min-width:0;height:48px;padding:0 12px;font-size:16px}.entry input:focus-visible{outline:none}.entry .btn{border-radius:13px;flex:none;height:48px;padding:0 22px;font-size:15px;font-weight:700}.entry .dice{color:var(--ink-3);padding:0 10px}.entry .dice svg{width:22px;height:22px}.alt-entry{color:var(--ink-3);flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;display:flex}.alt-entry span{margin-right:2px}.alt-entry input{width:120px;height:36px;font:600 13px var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:0 10px}.alt-entry .btn{height:36px;padding:0 14px;font-size:13px}@media (pointer:coarse){.alt-entry input,.alt-entry .btn{height:44px}}@media (width<=340px){.entry{flex-direction:column}.entry .btn{width:100%}}@media (width<=480px){.entry .btn{padding:0 16px}.alt-entry{grid-template-columns:minmax(0,1fr) auto;display:grid}.alt-entry span{grid-column:1/-1}.alt-entry input{width:100%}}.preview{background:color-mix(in srgb, var(--surface) 72%, transparent);border:1px solid var(--border);box-shadow:var(--shadow-m);border-radius:var(--radius-l);gap:10px;padding:20px;display:grid}.custbar{top:env(safe-area-inset-top,0px);z-index:5;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-l);box-shadow:var(--shadow-m);gap:10px;padding:12px 14px;display:grid;position:sticky}.cb-row{text-align:left;cursor:pointer;background:0 0;border:0;align-items:center;gap:12px;width:100%;padding:0;display:flex}.cb-row.static{cursor:default}.face{background:color-mix(in srgb, var(--mood) 16%, var(--surface));width:42px;height:42px;color:var(--mood);border-radius:14px;flex:none;place-items:center;transition:background .4s,color .4s;display:grid}.face svg{stroke-width:1.8px;width:24px;height:24px}.face.sm{border-radius:10px;width:30px;height:30px}.face.sm svg{width:17px;height:17px}.face.shake{animation:.45s shake}@keyframes shake{20%{transform:translate(-4px)rotate(-5deg)}40%{transform:translate(4px)rotate(4deg)}60%{transform:translate(-3px)}80%{transform:translate(2px)}}.cb-main{flex:1;gap:4px;min-width:0;display:grid}.cb-name{text-overflow:ellipsis;white-space:nowrap;min-width:0;font-size:15px;font-weight:700;overflow:hidden}.cb-sub{color:var(--ink-3);text-overflow:ellipsis;white-space:nowrap;font-size:12px;overflow:hidden}.clock{font:700 18px var(--mono);font-variant-numeric:tabular-nums}.clock.low{color:var(--danger)}.clock.paused{color:var(--ink-4)}.clock.idle{color:var(--ink-5)}.meter{background:#ece9e2;border-radius:3px;height:5px;overflow:hidden}.meter i{background:var(--mood);border-radius:3px;height:100%;transition:width .7s cubic-bezier(.34,1.56,.64,1),background .4s;display:block}.chev{color:var(--ink-4);transition:transform .2s;display:grid}.chev svg{width:16px;height:16px}.custbar.open .chev{transform:rotate(180deg)}.brief{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-l);box-shadow:var(--shadow-s);gap:12px;padding:18px 20px;display:grid}.role-mini{color:var(--ink-2);border-top:1px solid var(--border);align-items:center;gap:8px;min-width:0;padding-top:9px;font-size:12.5px;font-weight:600;display:flex}.role-mini span:last-child{text-overflow:ellipsis;white-space:nowrap;color:var(--ink-3);font-weight:500;overflow:hidden}.role-mini b{color:var(--ink)}.custbar.open .role-mini span:last-child{white-space:normal}.cb-more{border-top:1px solid var(--border);color:var(--ink-2);gap:8px;padding-top:10px;font-size:13.5px;line-height:1.55;display:grid}@media (width>=960px){.role-mini span:last-child{white-space:normal}}.situation{color:var(--ink);letter-spacing:-.015em;font-size:16px;font-weight:500;line-height:1.65}.cb-more .situation{font-size:15px}.want{border-radius:var(--radius-m);background:color-mix(in srgb, var(--secondary) 8%, var(--surface));color:var(--ink-2);grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:8px;padding:10px 12px;font-size:14px;line-height:1.55;display:grid}.tags{flex-wrap:wrap;gap:5px;display:flex}.tag{background:var(--surface-subtle);color:var(--ink-3);border-radius:999px;padding:2px 9px;font-size:12px;font-weight:600}.label{background:var(--primary-light);color:#3d6650;border-radius:999px;flex:none;padding:1px 7px;font-size:11px;font-weight:700}.label.cust{background:color-mix(in srgb, var(--secondary) 13%, transparent);color:#9a5021}.chatcol{grid-template-rows:auto 1fr auto;align-self:stretch;gap:4px;min-width:0;display:grid}.thread{align-content:start;gap:10px;min-height:160px;padding:16px 4px;display:grid;position:relative}.pill{color:var(--ink-3);background:color-mix(in srgb, var(--surface) 70%, transparent);border:1px solid var(--border);text-align:center;border-radius:999px;justify-self:center;align-items:center;gap:6px;max-width:100%;margin-top:4px;padding:4px 12px;font-size:12px;display:inline-flex}.pill.danger{color:var(--danger)}.pill b{color:var(--ink-2)}.pill .plus{color:var(--primary);font-weight:700}.fold{color:var(--ink-3);cursor:pointer;background:0 0;border:0;justify-self:center;padding:2px 8px;font-size:12px;font-weight:600}.fold:hover{color:var(--ink-2)}.mc{align-items:flex-end;gap:8px;max-width:84%;display:flex}.mc .body,.mp{gap:4px;min-width:0;display:grid}.mp{justify-self:end;justify-items:end;max-width:84%}.bubble{overflow-wrap:anywhere;border-radius:18px;padding:9px 14px;font-size:15px;line-height:1.6}.mc .bubble{background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-s);border-bottom-left-radius:6px}.mp .bubble{background:var(--primary-hover);color:#fff;border-bottom-right-radius:6px}.bubble.failed{opacity:.55}.mp .who{color:var(--ink-3);font-size:11.5px;font-weight:600}.meta{color:var(--ink-3);flex-wrap:wrap;align-items:center;gap:6px;font-size:12px;display:flex}.meta .act{font-style:italic}.meta .thought{color:#9a5021}.chip{background:var(--surface-subtle);color:var(--ink-3);font-variant-numeric:tabular-nums;border-radius:999px;padding:2px 9px;font-size:12px;font-weight:700}.chip.good{background:var(--primary-light);color:#3d6650}.chip.bad{background:color-mix(in srgb, var(--danger) 12%, transparent);color:var(--danger)}.typing{gap:4px;padding:13px 16px;display:inline-flex}.typing span{background:var(--ink-4);border-radius:50%;width:6px;height:6px;animation:1s infinite dot}.typing span:nth-child(2){animation-delay:.15s}.typing span:nth-child(3){animation-delay:.3s}@keyframes dot{50%{opacity:.5;transform:translateY(-4px)}}.floaty{pointer-events:none;font-size:24px;animation:1.8s ease-out forwards floaty;position:absolute;bottom:0}@keyframes floaty{to{opacity:0;transform:translateY(-180px)scale(1.3)}}.review{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-l);box-shadow:var(--shadow-s);gap:12px;margin-top:6px;padding:16px;display:grid}.review .hd{letter-spacing:-.02em;font-size:16px;font-weight:700}.rv{border-top:1px solid var(--border);grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:4px 10px;padding-top:12px;display:grid}.rv .stars{color:var(--sand);letter-spacing:1px;font-size:13px}.rv p{color:var(--ink-2);grid-column:2/4;font-size:14px;line-height:1.55}.sc{font:700 15px var(--mono);font-variant-numeric:tabular-nums}.sc.score{text-align:right;min-width:28px;font-size:13px}.dock{z-index:5;padding:8px 0 calc(12px + env(safe-area-inset-bottom,0px));background:linear-gradient(#0000,#efe9df 40%);position:sticky;bottom:0}.dock .panel{background:color-mix(in srgb, var(--surface) 94%, transparent);-webkit-backdrop-filter:blur(10px);border:1px solid var(--border);box-shadow:var(--shadow-m);border-radius:22px;gap:4px;padding:6px;display:grid}.compose{align-items:center;gap:6px;display:flex}.compose textarea,.compose input{resize:none;height:44px;min-height:44px;box-shadow:none;scrollbar-width:none;background:0 0;border:0;padding:11px 12px;overflow:hidden}.compose textarea:focus-visible,.compose input:focus-visible{outline:none}.hint{color:var(--ink-3);flex-wrap:wrap;align-items:center;gap:8px;padding:2px 10px 4px;font-size:12.5px;display:flex}.hint>span{flex:1;min-width:0}.reacts{align-items:center;gap:6px;padding:4px 6px;display:flex}.reacts>span{color:var(--ink-3);flex:1;min-width:0;font-size:13px}.reacts .btn{border-radius:12px;width:44px;height:44px;padding:0;font-size:18px}.list{display:grid}.li{border-radius:var(--radius-m);border:0;border-top:1px solid var(--border);text-align:left;background:0 0;align-items:center;gap:10px;width:100%;min-width:0;padding:10px 8px;display:flex}.li:first-child{border-top:0}.li.now+.li,.li+.li.now{border-top-color:#0000}button.li{cursor:pointer}button.li:hover{background:var(--surface-subtle)}.li .txt{flex:1;min-width:0;line-height:1.4;display:grid}.li .txt b{text-overflow:ellipsis;white-space:nowrap;font-size:14px;overflow:hidden}.li .txt span{color:var(--ink-3);text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;overflow:hidden}.li .no{font:700 14px var(--mono);color:var(--ink-4);text-align:center;width:20px}.li.now{background:var(--primary-subtle);border-radius:var(--radius-m)}.badge{background:var(--surface-subtle);color:var(--ink-3);white-space:nowrap;border-radius:999px;padding:2px 8px;font-size:11px;font-weight:700}.badge.ok{background:var(--primary-light);color:#3d6650}.badge.host{background:color-mix(in srgb, var(--sand) 20%, transparent);color:#7d6223}.lobbycol{grid-template-rows:auto;align-self:start}.lobby{gap:18px}.lobby-title{letter-spacing:-.03em;font-size:22px}.empty-title{font-size:18px}.invitebox{background:var(--surface-subtle);border-radius:var(--radius-l);gap:10px;padding:14px;display:grid}.startrow{align-items:center;gap:8px;display:flex}.startrow input{height:52px}.startrow .btn{flex:none}@media (width<=600px){.startrow{flex-direction:column;align-items:stretch}}.skel-line{border-radius:6px;height:12px;display:block}.skel-block{border-radius:var(--radius-l)}.skel-line,.skel-block,.skelbox,.meter .skelbar{background:linear-gradient(90deg, var(--surface-subtle), var(--border-strong), var(--surface-subtle));background-size:200% 100%;animation:1.4s linear infinite shimmer}.code{font:700 13px var(--mono);letter-spacing:.12em;background:var(--surface-subtle);border-radius:var(--radius-s);padding:3px 10px}.linkbox{gap:6px;display:flex}.linkbox input{font:12.5px var(--mono);background:var(--surface-subtle);min-width:0;padding:9px 10px}@keyframes shimmer{to{background-position:-200% 0}}.toasts{left:50%;top:calc(env(safe-area-inset-top,0px) + 16px);z-index:50;pointer-events:none;gap:8px;width:max-content;max-width:calc(100% - 32px);display:grid;position:fixed;transform:translate(-50%)}.toast{background:var(--ink);color:#fff;box-shadow:var(--shadow-l);border-radius:999px;padding:9px 16px;font-size:13px;font-weight:600;animation:.4s cubic-bezier(.34,1.56,.64,1) both toastIn}@keyframes toastIn{0%{opacity:0;transform:translateY(-8px)scale(.94)}}.narrow{gap:14px;width:100%;max-width:720px;margin:0 auto;display:grid}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}.elapsed{font:600 12px var(--mono);font-variant-numeric:tabular-nums;color:var(--ink-4);white-space:nowrap}.elapsed.slow{color:var(--ink-2)}.elapsed.stuck{color:var(--danger)}.mc>.elapsed{align-self:center}