:root{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:var(--ink);color-scheme:light;background:#f5f7ef;font-synthesis:none;--ink: #17372b;--surface: #fbfcf7;--raised: #fff;--stroke: #335f4529;--muted: #50675a;--green: #236447;--accent: #e2fa83;--stage: #142d25}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 95% 12%,#eef4da 0,transparent 58%)}button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:9px 13px;border:1px solid var(--stroke);border-radius:10px;background:var(--raised);color:inherit;font-family:inherit;font-size:13px;font-weight:600;line-height:1.25;white-space:nowrap;cursor:pointer;touch-action:manipulation;transition:background-color .16s ease,border-color .16s ease,opacity .16s ease}button:hover:not(:disabled){background:#eaf4df;border-color:#65927670}button:active:not(:disabled){opacity:.75}button:disabled{cursor:default;opacity:.48}button:focus-visible{outline:2px solid var(--green);outline-offset:3px}.icon{flex:0 0 auto;width:16px;height:16px}main{display:flex;min-height:100dvh;flex-direction:column}.site-header{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:calc(12px + env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) 12px max(20px,env(safe-area-inset-left));border-bottom:1px solid var(--stroke);background:var(--surface)}.brand{display:flex;flex:0 0 auto;align-items:center;gap:8px;font-size:16px;font-weight:700;letter-spacing:-.035em}.status{display:flex;align-items:center;gap:7px;padding:6px 10px;border:1px solid var(--stroke);border-radius:999px;color:var(--muted);font-size:11px;text-align:right}.status i{width:6px;height:6px;flex:0 0 6px;border-radius:50%;background:var(--green)}.status[data-live=true] i{background:#348a58;box-shadow:0 0 0 3px #348a5822}.welcome{display:grid;width:min(100%,1224px);grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(24px,5vw,80px);margin:auto;padding:clamp(28px,5vh,58px) clamp(22px,5vw,66px)}.welcome-copy{animation:rise .34s ease-out both}.invite-label{display:inline-flex;align-items:center;gap:7px;margin-bottom:17px;color:var(--green);font-size:12px;font-weight:650;letter-spacing:.035em}.invite-label .icon{width:14px;height:14px}.welcome h1{max-width:10em;margin:0 0 20px;font-size:clamp(42px,6.3vw,83px);font-weight:730;line-height:1.01;letter-spacing:-.05em;text-wrap:balance}.welcome h1 em{color:var(--green);font-style:normal}.welcome p{max-width:34ch;margin:0;color:var(--muted);font-size:16px;line-height:1.6;text-wrap:pretty}.primary{gap:18px;margin-top:27px;padding:14px 18px;min-height:47px;background:linear-gradient(165deg,#efffa6,var(--accent) 58%,#c6e36b);color:#213b24;border-color:#9bb556;box-shadow:inset 0 1px #ffffffbd,0 5px 12px #54782c26;font-size:14px}.primary:hover:not(:disabled){background:#edffab;border-color:#799a3e}.spinner{width:14px;height:14px;border:1.5px solid #213b2455;border-top-color:#213b24;border-radius:50%;animation:spin .8s linear infinite}.window-stage{display:grid;place-items:center;min-width:0;aspect-ratio:1.14;overflow:hidden;border:1px solid #b6ccae;border-radius:clamp(22px,4vw,42px);background:radial-gradient(ellipse at 55% 45%,#f5ffd6 2%,transparent 64%),linear-gradient(143deg,#f0f6e9,#d5e8cc);box-shadow:inset 0 1px #fff,0 20px 55px #5175461d;animation:rise .48s 60ms ease-out both}.window-stage img{display:block;width:100%;height:auto;transition:transform .45s cubic-bezier(.2,.7,.2,1)}@media(hover:hover)and (prefers-reduced-motion:no-preference){.window-stage:hover img{transform:translateY(-5px) rotate(-1deg)}}.session{height:100dvh}.session header,.session footer{flex-shrink:0}.viewer{display:none;position:relative;min-height:0;flex:1;margin:8px 12px;overflow:hidden;border:1px solid var(--stroke);border-radius:14px;background:var(--stage)}.viewer.active{display:block}.viewer video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}.touch-layer{position:absolute;inset:0;touch-action:none;overscroll-behavior:contain;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.trackpad{inset:auto max(12px,env(safe-area-inset-right)) 12px auto;display:grid;place-items:end center;width:min(52%,225px);height:clamp(62px,16dvh,108px);padding:8px;border:1px solid #b5dba487;border-radius:12px;background:radial-gradient(circle at center,#d4f5b52e 1px,transparent 1px) 0 0 / 12px 12px,#254737f5;box-shadow:0 6px 20px #071e16a0;cursor:crosshair}.trackpad:active{border-color:var(--accent)}.trackpad span{color:#eef6dd;font-size:10px;pointer-events:none}.remote-cursor{position:absolute;width:20px;height:22px;visibility:hidden;transform:translate(-1.5px,-1.5px);overflow:visible;fill:#fff;stroke:#17372b;stroke-width:1.5;filter:drop-shadow(0 1px 2px #000a);pointer-events:none}.gesture-guide{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px 14px;padding:8px max(18px,env(safe-area-inset-right)) 0 max(18px,env(safe-area-inset-left));color:var(--muted);font-size:11px;line-height:1.4}.gesture-guide strong{color:var(--green);font-weight:650}.play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px max(16px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));border-top:1px solid var(--stroke);background:var(--surface)}.session-detail{display:flex;flex-direction:column;gap:3px;color:var(--muted);font-size:11px}.session-detail strong{color:#f5f1fa;font-size:12px;font-weight:650}.actions{display:flex;justify-content:flex-end;gap:7px;flex-wrap:wrap}.actions button[aria-pressed=true]{color:var(--green);border-color:#53896990}.danger{color:#9d3e32;border-color:#b965493b;background:#fff7f1}.danger:hover:not(:disabled){background:#fae8dd;border-color:#b9654970}.keyboard{position:fixed;bottom:0;left:0;width:1px;height:1px;opacity:0;font-size:16px}main.expanded{position:fixed;inset:0 0 auto;z-index:10;height:100dvh;min-height:0;padding-top:env(safe-area-inset-top);overflow:hidden;overscroll-behavior:none;background:var(--stage)}main.expanded .site-header,main.expanded .gesture-guide,main.expanded .session-detail{display:none}main.expanded .session-detail[data-warning=true]{display:flex}main.expanded .session-detail>span{display:none}main.expanded .viewer{margin:0;border:0;border-radius:0}main.expanded footer{justify-content:center}main.expanded .actions{justify-content:center}@keyframes rise{0%{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:720px){.welcome{max-width:520px;grid-template-columns:1fr;gap:30px;padding:36px 22px}.welcome-copy{padding-inline:4px}.window-stage{aspect-ratio:1.32;max-height:330px}.window-stage img{width:min(100%,410px)}}@media(max-width:600px){.site-header{padding-inline:max(12px,env(safe-area-inset-left)) max(12px,env(safe-area-inset-right))}.brand{font-size:14px}.welcome h1{font-size:clamp(40px,11vw,58px)}.brand img{width:30px;height:30px}.status{padding-inline:7px;font-size:10px}.viewer{margin:6px;border-radius:9px}.gesture-guide{justify-content:center;gap:3px 10px}footer{flex-direction:column;align-items:stretch;gap:8px}.session-detail{flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:4px 8px}.actions{justify-content:flex-start;gap:5px}.actions button{padding:8px;min-height:40px;font-size:11px;gap:4px}.actions .icon{width:14px;height:14px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}