:root{font-family:Inter,"Segoe UI",system-ui,sans-serif;color:#1d1a2b;background:#f5f3f8;--ink:#1d1a2b;--muted:#696273;--line:#e2dde8;--surface:#fff;--accent:#6045d8;--accent-dark:#4d35bd;--focus:#246bce;--green:#157555;--green-bg:#e3f5ec;--red:#ae2940;--shadow:0 20px 55px rgba(37,27,57,.1)}
*{box-sizing:border-box}body{margin:0;min-width:320px;background:radial-gradient(circle at 85% 0,rgba(96,69,216,.08),transparent 28rem),#f5f3f8;color:var(--ink)}button,input,select,textarea{font:inherit}a{color:inherit}.app-shell{min-height:100vh}.topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:72px;padding:0 clamp(1rem,4vw,3rem);background:rgba(255,255,255,.9);border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}.brand{display:inline-flex;align-items:center;gap:.7rem;font-weight:750;text-decoration:none}.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:var(--accent);color:#fff;box-shadow:0 7px 16px rgba(96,69,216,.25)}.page-content{width:min(1240px,100%);margin:0 auto;padding:clamp(1.25rem,4vw,3.5rem)}
h1,h2,h3,p{margin-top:0}h1{max-width:820px;margin-bottom:.65rem;font-size:clamp(2rem,5vw,4.6rem);line-height:1.02;letter-spacing:-.045em}h2{margin-bottom:.5rem;font-size:clamp(1.15rem,2vw,1.45rem);letter-spacing:-.02em}h3{margin-bottom:.25rem;font-size:1rem}.eyebrow{margin-bottom:.5rem;color:var(--accent);font-size:.76rem;font-weight:800;letter-spacing:.095em;text-transform:uppercase}.lead{max-width:720px;margin-bottom:1.5rem;color:var(--muted);font-size:clamp(1.05rem,2vw,1.25rem);line-height:1.55}.lead.compact{font-size:1rem}.button{display:inline-flex;min-height:44px;align-items:center;justify-content:center;gap:.5rem;padding:.67rem 1rem;border:1px solid var(--line);border-radius:11px;background:var(--surface);color:var(--ink);font-weight:700;text-decoration:none;cursor:pointer;transition:transform .15s,background .15s,border-color .15s}.button:hover{border-color:#c9c1d4;background:#fbfaff;transform:translateY(-1px)}.button:disabled{opacity:.48;cursor:not-allowed;transform:none}.button-primary{border-color:var(--accent);background:var(--accent);color:#fff}.button-primary:hover{border-color:var(--accent-dark);background:var(--accent-dark)}.button-ghost{background:transparent}.button-danger{border-color:#e5b9c1;color:var(--red);background:#fff8f8}.button-block{width:100%}:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.8fr);align-items:center;gap:clamp(2rem,6vw,6rem);padding:clamp(2rem,7vw,6rem) 0}.hero-board{display:grid;gap:.8rem;padding:1.1rem;border:1px solid var(--line);border-radius:24px;background:rgba(255,255,255,.8);box-shadow:var(--shadow);transform:rotate(1deg)}.hero-board-head{display:flex;align-items:center;gap:.55rem;padding:.25rem}.hero-board-head strong{margin-left:auto}.status-dot{display:inline-block;flex:0 0 auto;width:9px;height:9px;border-radius:99px;background:#20a875;box-shadow:0 0 0 4px rgba(32,168,117,.13)}.hero-card{display:flex;align-items:center;gap:.8rem;min-height:78px;padding:.9rem;border-radius:16px}.hero-card>span:last-child{display:grid;gap:.15rem}.hero-card small{color:var(--muted)}.hero-card-hot{background:#ffe7e4}.hero-card-done{background:var(--green-bg)}.avatar,.sequence{display:grid;place-items:center;flex:0 0 auto;width:48px;height:48px;border-radius:14px;background:rgba(255,255,255,.8);font-weight:800}.sequence{background:var(--green);color:#fff}.feature-strip{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:18px;background:var(--surface)}.feature-strip article{display:grid;gap:.35rem;padding:1.25rem}.feature-strip article+article{border-left:1px solid var(--line)}.feature-strip span{color:var(--muted);line-height:1.45}
.centered-page .page-content{display:grid;min-height:calc(100vh - 72px);place-items:center}.auth-card,.share-card{width:min(100%,580px);padding:clamp(1.4rem,5vw,2.5rem);border:1px solid var(--line);border-radius:24px;background:var(--surface);box-shadow:var(--shadow)}.auth-card h1,.share-card h1{font-size:clamp(2rem,6vw,3.2rem)}.stack-form{display:grid;gap:1rem}.field{display:grid;gap:.45rem;color:#4d4657;font-size:.9rem;font-weight:700}.field input,.field select,.field textarea{width:100%;min-height:46px;padding:.7rem .8rem;border:1px solid #cfc8d7;border-radius:10px;background:#fff;color:var(--ink)}.field textarea{resize:vertical}.split-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:2rem;margin-bottom:1.6rem}.page-heading h1,.board-heading h1{font-size:clamp(2rem,4vw,3.35rem)}.mode-badge{display:inline-flex;align-items:center;min-height:36px;padding:.45rem .75rem;border-radius:999px;font-size:.85rem;font-weight:750;white-space:nowrap}.mode-talk{background:var(--green-bg);color:var(--green)}.mode-demo{background:#f0ecfb;color:#563aba}.notice{display:grid;gap:.25rem;margin-bottom:1rem;padding:1rem;border-radius:13px}.notice-error{border:1px solid #e7b9c1;background:#fff1f2;color:#8f2034}.resume-card{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem;padding:1rem 1.1rem;border:1px solid #cfc2fa;border-radius:15px;background:#f1edff;text-decoration:none}.resume-card>span:first-child,.empty-copy{display:grid;gap:.25rem}.resume-card small,.empty-copy span,.panel>p,.key-card small{color:var(--muted)}.participant-source-grid,.host-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.participant-source-grid{margin-bottom:1rem}.panel{padding:1.25rem;border:1px solid var(--line);border-radius:18px;background:var(--surface)}.source-choice{display:grid;grid-template-columns:1fr 1fr;gap:.65rem}.source-choice label,.check-field{display:flex;align-items:center;gap:.55rem;min-height:44px;padding:.7rem;border:1px solid var(--line);border-radius:11px}.set-editor{padding:.8rem 0;border-bottom:1px solid var(--line)}.set-editor summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;cursor:pointer}.set-editor summary>span:first-child{display:grid;gap:.15rem}.set-editor summary small{color:var(--muted)}.set-editor form{margin-top:.8rem}.panel-icon{display:grid;place-items:center;width:42px;height:42px;margin-bottom:1rem;border-radius:12px;background:#eee9ff;color:var(--accent);font-weight:900}.empty-copy{padding:1rem 0}.key-card{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-top:1rem;padding:1rem 1.1rem;border-radius:16px;background:var(--green-bg)}.key-card>div{display:flex;align-items:center;gap:.8rem}.key-card>div>span:last-child{display:grid;gap:.18rem}.key-state{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:var(--green);color:#fff;font-weight:900}.key-card details{text-align:right}.key-card summary{list-style:none}.inline-key-form{display:flex;align-items:end;gap:.5rem;margin-top:.75rem}
.share-card{text-align:center}.success-mark{display:grid;place-items:center;width:56px;height:56px;margin:0 auto 1.2rem;border-radius:17px;background:var(--green-bg);color:var(--green);font-size:1.55rem;font-weight:900}.share-box{display:flex;align-items:center;gap:.7rem;margin:1.5rem 0 .8rem;padding:.6rem .6rem .6rem 1rem;border:1px solid var(--line);border-radius:14px;background:#f6f4f8;text-align:left}.share-box code{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.privacy-note{margin-bottom:1.5rem;color:var(--muted);font-size:.9rem}.connection-chip{display:inline-flex;align-items:center;gap:.6rem;min-height:38px;padding:.45rem .75rem;border-radius:999px;background:#edf8f3;color:#126b4e;font-size:.9rem;font-weight:750}.connection-chip[data-state="disconnected"]{background:#fff0f1;color:#98283a}.connection-chip[data-state="connecting"]{background:#f1edfb;color:#573fb3}
.board-heading{margin-bottom:1rem}.controls{display:flex;flex-wrap:wrap;gap:.55rem}.board-status{margin-bottom:1rem;padding:.8rem 1rem;border:1px solid var(--line);border-radius:13px;background:var(--surface);color:var(--muted)}.board-status[data-state="error"]{border-color:#e7b9c1;background:#fff1f2;color:#8f2034}.board-status[data-state="ended"]{border-color:#d7cdea;background:#f3eff8;color:#554c60}.board-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(290px,.72fr);gap:1rem}.side-lanes{display:grid;align-content:start;gap:1rem}.lane{padding:1rem;border:1px solid var(--line);border-radius:18px;background:var(--surface)}.lane-primary{min-height:400px}.lane-muted{border-style:dashed;background:rgba(255,255,255,.45)}.lane-heading{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}.lane-heading h2,.lane-heading p{margin-bottom:0}.lane-heading>strong{display:grid;min-width:32px;height:32px;place-items:center;border-radius:10px;background:#f0edf4}.participant-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--remaining-card-width,240px)),var(--remaining-card-width,240px)));justify-content:center;gap:.75rem}.compact-grid{grid-template-columns:1fr}.participant-card{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.75rem;width:min(100%,var(--remaining-card-width,100%));min-height:var(--remaining-card-height,78px);max-width:480px;padding:.85rem;border:0;border-radius:15px;background:hsl(calc(8 - var(--red,0)*8) calc(62% + var(--red,0)*22%) calc(96% - var(--red,0)*24%));color:var(--ink);text-align:left;box-shadow:0 4px 14px rgba(54,37,47,.09);cursor:pointer;transition:transform .14s,box-shadow .14s}.participant-card:hover{transform:translateY(-2px);box-shadow:0 8px 19px rgba(54,37,47,.14)}.participant-card:active{transform:translateY(0)}.participant-card.done{width:100%;min-height:72px;background:var(--green-bg)}.participant-card.left{width:100%;min-height:68px;background:#f1eef3;color:#696273;box-shadow:none}.participant-card img,.initials,.participant-number{width:46px;height:46px;border-radius:13px;object-fit:cover}.initials,.participant-number{display:grid;place-items:center;background:rgba(255,255,255,.72);font-weight:800}.participant-number{background:var(--green);color:#fff;font-size:1.15rem}.participant-copy{display:grid;min-width:0;gap:.18rem}.participant-copy strong{overflow-wrap:normal;word-break:normal;font-size:1.02rem}.participant-copy small{color:var(--muted)}.empty-state{margin:1.25rem 0;color:var(--muted);text-align:center}.empty-state[hidden]{display:none}.board-footer{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1rem;color:var(--muted);font-size:.9rem}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.board-heading{margin-bottom:1rem}.controls{display:flex;flex-wrap:wrap;gap:.55rem}.board-status{margin-bottom:1rem;padding:.8rem 1rem;border:1px solid var(--line);border-radius:13px;background:var(--surface);color:var(--muted)}.board-status[data-state="error"]{border-color:#e7b9c1;background:#fff1f2;color:#8f2034}.board-status[data-state="ended"]{border-color:#d7cdea;background:#f3eff8;color:#554c60}.add-participant-form{display:grid;grid-template-columns:minmax(220px,1fr) minmax(220px,auto) auto;align-items:end;gap:.7rem;margin-bottom:1rem;padding:1rem;border:1px solid var(--line);border-radius:15px;background:var(--surface)}.add-participant-form .check-field{margin-bottom:1px}.board-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(290px,.72fr);gap:1rem}.side-lanes{display:grid;align-content:start;gap:1rem}.lane{padding:1rem;border:1px solid var(--line);border-radius:18px;background:var(--surface)}.lane-primary{min-height:400px}.lane-muted{border-style:dashed;background:rgba(255,255,255,.45)}.lane-heading{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}.lane-heading h2,.lane-heading p{margin-bottom:0}.lane-heading>strong{display:grid;min-width:32px;height:32px;place-items:center;border-radius:10px;background:#f0edf4}.participant-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--remaining-card-width,240px)),var(--remaining-card-width,240px)));justify-content:center;gap:.75rem}.compact-grid{grid-template-columns:1fr}.participant-card{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.75rem;width:min(100%,var(--remaining-card-width,100%));min-height:var(--remaining-card-height,78px);max-width:480px;padding:.85rem;border:0;border-radius:15px;background:hsl(calc(8 - var(--red,0)*8) calc(62% + var(--red,0)*22%) calc(96% - var(--red,0)*24%));color:var(--ink);text-align:left;box-shadow:0 4px 14px rgba(54,37,47,.09);cursor:pointer;transition:transform .14s,box-shadow .14s}.participant-card:hover{transform:translateY(-2px);box-shadow:0 8px 19px rgba(54,37,47,.14)}.participant-card:active{transform:translateY(0)}.participant-card.done{width:100%;min-height:72px;background:var(--green-bg)}.participant-card.left{width:100%;min-height:68px;background:#f1eef3;color:#696273;box-shadow:none}.participant-card img,.initials,.participant-number{width:46px;height:46px;border-radius:13px;object-fit:cover}.initials,.participant-number{display:grid;place-items:center;background:rgba(255,255,255,.72);font-weight:800}.participant-number{background:var(--green);color:#fff;font-size:1.15rem}.participant-copy{display:grid;min-width:0;gap:.18rem}.participant-copy strong{overflow-wrap:normal;word-break:normal;font-size:1.02rem}.participant-copy small{color:var(--muted)}.empty-state{margin:1.25rem 0;color:var(--muted);text-align:center}.empty-state[hidden]{display:none}.board-footer{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1rem;color:var(--muted);font-size:.9rem}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media(max-width:800px){.hero,.board-grid{grid-template-columns:1fr}.hero-board{transform:none}.feature-strip{grid-template-columns:1fr}.feature-strip article+article{border-left:0;border-top:1px solid var(--line)}.split-heading,.key-card{flex-direction:column;align-items:stretch}.participant-source-grid,.host-grid,.add-participant-form{grid-template-columns:1fr}.lane-primary{min-height:0}.participant-grid{grid-template-columns:1fr}.participant-card{width:100%!important;min-height:72px!important}.board-footer{align-items:stretch;flex-direction:column}.board-footer .button{width:100%}}
@media(max-width:480px){.topbar{height:62px;padding:0 .8rem}.page-content{padding:1rem}.landing-page .page-content{padding-top:2rem}.hero{padding:1rem 0 2.5rem}.hero-board{padding:.75rem;border-radius:18px}.auth-card,.share-card{padding:1.2rem;border-radius:18px}.controls{display:grid;grid-template-columns:1fr 1fr;width:100%}.controls .button-danger{grid-column:1/-1}.board-heading{gap:1rem}.board-status{font-size:.9rem}.lane{padding:.75rem;border-radius:15px}.lane-heading{margin-bottom:.65rem}.participant-grid{gap:.5rem}.participant-card{min-height:64px!important;padding:.62rem .7rem;border-radius:13px}.participant-card img,.initials,.participant-number{width:42px;height:42px;border-radius:12px}.participant-copy strong{font-size:.95rem}.participant-copy small{font-size:.78rem}.card-action{width:28px;height:28px}.side-lanes{gap:.75rem}.share-box,.inline-key-form{align-items:stretch;flex-direction:column}.share-box code{white-space:normal;overflow-wrap:anywhere}.key-card details{text-align:left}.connection-chip{padding:.38rem .58rem;font-size:.82rem}.mode-badge{white-space:normal}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}