@font-face{font-family:Plus Jakarta Sans;font-style:normal;font-weight:400;font-display:swap;src:url(/_next/static/media/6fe53d21e6e7ebd8-s.woff2) format("woff2");unicode-range:u+0460-052f,u+1c80-1c8a,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f}@font-face{font-family:Plus Jakarta Sans;font-style:normal;font-weight:400;font-display:swap;src:url(/_next/static/media/8ebc6e9dde468c4a-s.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+0300-0301,u+0303-0304,u+0308-0309,u+0323,u+0329,u+1ea0-1ef9,u+20ab}@font-face{font-family:Plus Jakarta Sans;font-style:normal;font-weight:400;font-display:swap;src:url(/_next/static/media/9e7b0a821b9dfcb4-s.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c4,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Plus Jakarta Sans;font-style:normal;font-weight:400;font-display:swap;src:url(/_next/static/media/636a5ac981f94f8b-s.p.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-family:Plus Jakarta Sans;font-style:normal;font-weight:500;font-display:swap;src:url(/_next/static/media/6fe53d21e6e7ebd8-s.woff2) format("woff2");unicode-range:u+0460-052f,u+1c80-1c8a,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f}@font-face{font-family:Plus Jakarta Sans;font-style:normal;font-weight:500;font-display:swap;src:url(/_next/static/media/8ebc6e9dde468c4a-s.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+0300-0301,u+0303-0304,u+0308-0309,u+0323,u+0329,u+1ea0-1ef9,u+20ab}@font-face{font-family:Plus Jakarta Sans;font-style:normal;font-weight:500;font-display:swap;src:url(/_next/static/media/9e7b0a821b9dfcb4-s.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c4,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Plus Jakarta Sans;font-style:normal;font-weight:500;font-display:swap;src:url(/_next/static/media/636a5ac981f94f8b-s.p.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-family:Plus Jakarta Sans;font-style:normal;font-weight:600;font-display:swap;src:url(/_next/static/media/6fe53d21e6e7ebd8-s.woff2) format("woff2");unicode-range:u+0460-052f,u+1c80-1c8a,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f}@font-face{font-family:Plus Jakarta Sans;font-style:normal;font-weight:600;font-display:swap;src:url(/_next/static/media/8ebc6e9dde468c4a-s.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+0300-0301,u+0303-0304,u+0308-0309,u+0323,u+0329,u+1ea0-1ef9,u+20ab}@font-face{font-family:Plus Jakarta Sans;font-style:normal;font-weight:600;font-display:swap;src:url(/_next/static/media/9e7b0a821b9dfcb4-s.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c4,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Plus Jakarta Sans;font-style:normal;font-weight:600;font-display:swap;src:url(/_next/static/media/636a5ac981f94f8b-s.p.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-family:Plus Jakarta Sans;font-style:normal;font-weight:700;font-display:swap;src:url(/_next/static/media/6fe53d21e6e7ebd8-s.woff2) format("woff2");unicode-range:u+0460-052f,u+1c80-1c8a,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f}@font-face{font-family:Plus Jakarta Sans;font-style:normal;font-weight:700;font-display:swap;src:url(/_next/static/media/8ebc6e9dde468c4a-s.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+0300-0301,u+0303-0304,u+0308-0309,u+0323,u+0329,u+1ea0-1ef9,u+20ab}@font-face{font-family:Plus Jakarta Sans;font-style:normal;font-weight:700;font-display:swap;src:url(/_next/static/media/9e7b0a821b9dfcb4-s.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c4,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Plus Jakarta Sans;font-style:normal;font-weight:700;font-display:swap;src:url(/_next/static/media/636a5ac981f94f8b-s.p.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-family:Plus Jakarta Sans Fallback;src:local("Arial");ascent-override:98.88%;descent-override:21.15%;line-gap-override:0.00%;size-adjust:104.98%}.__className_014e29{font-family:Plus Jakarta Sans,Plus Jakarta Sans Fallback;font-style:normal}.__variable_014e29{--font-plus-jakarta:"Plus Jakarta Sans","Plus Jakarta Sans Fallback"}@font-face{font-family:JetBrains Mono;font-style:normal;font-weight:400;font-display:swap;src:url(/_next/static/media/edc640959b0c7826-s.woff2) format("woff2");unicode-range:u+0460-052f,u+1c80-1c8a,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f}@font-face{font-family:JetBrains Mono;font-style:normal;font-weight:400;font-display:swap;src:url(/_next/static/media/ac0e76ddaeeb7981-s.woff2) format("woff2");unicode-range:u+0301,u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116}@font-face{font-family:JetBrains Mono;font-style:normal;font-weight:400;font-display:swap;src:url(/_next/static/media/64d784ea54a4acde-s.woff2) format("woff2");unicode-range:u+0370-0377,u+037a-037f,u+0384-038a,u+038c,u+038e-03a1,u+03a3-03ff}@font-face{font-family:JetBrains Mono;font-style:normal;font-weight:400;font-display:swap;src:url(/_next/static/media/ff71da380fbe67dd-s.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+0300-0301,u+0303-0304,u+0308-0309,u+0323,u+0329,u+1ea0-1ef9,u+20ab}@font-face{font-family:JetBrains Mono;font-style:normal;font-weight:400;font-display:swap;src:url(/_next/static/media/6d831b18ae5b01dc-s.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c4,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:JetBrains Mono;font-style:normal;font-weight:400;font-display:swap;src:url(/_next/static/media/558ca1a6aa3cb55e-s.p.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-family:JetBrains Mono;font-style:normal;font-weight:500;font-display:swap;src:url(/_next/static/media/edc640959b0c7826-s.woff2) format("woff2");unicode-range:u+0460-052f,u+1c80-1c8a,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f}@font-face{font-family:JetBrains Mono;font-style:normal;font-weight:500;font-display:swap;src:url(/_next/static/media/ac0e76ddaeeb7981-s.woff2) format("woff2");unicode-range:u+0301,u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116}@font-face{font-family:JetBrains Mono;font-style:normal;font-weight:500;font-display:swap;src:url(/_next/static/media/64d784ea54a4acde-s.woff2) format("woff2");unicode-range:u+0370-0377,u+037a-037f,u+0384-038a,u+038c,u+038e-03a1,u+03a3-03ff}@font-face{font-family:JetBrains Mono;font-style:normal;font-weight:500;font-display:swap;src:url(/_next/static/media/ff71da380fbe67dd-s.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+0300-0301,u+0303-0304,u+0308-0309,u+0323,u+0329,u+1ea0-1ef9,u+20ab}@font-face{font-family:JetBrains Mono;font-style:normal;font-weight:500;font-display:swap;src:url(/_next/static/media/6d831b18ae5b01dc-s.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c4,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:JetBrains Mono;font-style:normal;font-weight:500;font-display:swap;src:url(/_next/static/media/558ca1a6aa3cb55e-s.p.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-family:JetBrains Mono;font-style:normal;font-weight:600;font-display:swap;src:url(/_next/static/media/edc640959b0c7826-s.woff2) format("woff2");unicode-range:u+0460-052f,u+1c80-1c8a,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f}@font-face{font-family:JetBrains Mono;font-style:normal;font-weight:600;font-display:swap;src:url(/_next/static/media/ac0e76ddaeeb7981-s.woff2) format("woff2");unicode-range:u+0301,u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116}@font-face{font-family:JetBrains Mono;font-style:normal;font-weight:600;font-display:swap;src:url(/_next/static/media/64d784ea54a4acde-s.woff2) format("woff2");unicode-range:u+0370-0377,u+037a-037f,u+0384-038a,u+038c,u+038e-03a1,u+03a3-03ff}@font-face{font-family:JetBrains Mono;font-style:normal;font-weight:600;font-display:swap;src:url(/_next/static/media/ff71da380fbe67dd-s.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+0300-0301,u+0303-0304,u+0308-0309,u+0323,u+0329,u+1ea0-1ef9,u+20ab}@font-face{font-family:JetBrains Mono;font-style:normal;font-weight:600;font-display:swap;src:url(/_next/static/media/6d831b18ae5b01dc-s.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c4,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:JetBrains Mono;font-style:normal;font-weight:600;font-display:swap;src:url(/_next/static/media/558ca1a6aa3cb55e-s.p.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-family:JetBrains Mono Fallback;src:local("Arial");ascent-override:75.79%;descent-override:22.29%;line-gap-override:0.00%;size-adjust:134.59%}.__className_5f34dc{font-family:JetBrains Mono,JetBrains Mono Fallback;font-style:normal}.__variable_5f34dc{--font-jetbrains:"JetBrains Mono","JetBrains Mono Fallback"}body,html{margin:0;padding:0;min-height:100%}:root,[data-theme=dark]{--bg-deep:#090d16;--bg-mesh-1:rgba(6,182,212,0.12);--bg-mesh-2:rgba(37,99,235,0.10);--bg-mesh-3:rgba(249,115,22,0.08);--card-bg:rgba(15,23,42,0.75);--card-hover:rgba(22,32,54,0.85);--card-border:rgba(255,255,255,0.09);--card-border-hover:rgba(6,182,212,0.4);--surface-raised:rgba(255,255,255,0.05);--surface-raised-hover:rgba(255,255,255,0.08);--text-main:#f8fafc;--text-muted:#94a3b8;--text-dim:#64748b;--primary-from:#06b6d4;--primary-to:#2563eb;--primary-gradient:linear-gradient(135deg,#06b6d4,#2563eb);--primary-glow:0 8px 24px -4px rgba(6,182,212,0.45);--accent-coral:#f97316;--accent-coral-gradient:linear-gradient(135deg,#f97316,#ef4444);--pastel-mint-bg:rgba(16,185,129,0.16);--pastel-mint-text:#6ee7b7;--pastel-mint-border:rgba(16,185,129,0.35);--pastel-sky-bg:rgba(56,189,248,0.16);--pastel-sky-text:#7dd3fc;--pastel-sky-border:rgba(56,189,248,0.35);--pastel-peach-bg:rgba(251,146,60,0.16);--pastel-peach-text:#fdba74;--pastel-peach-border:rgba(251,146,60,0.35);--pastel-lavender-bg:rgba(167,139,250,0.16);--pastel-lavender-text:#c4b5fd;--pastel-lavender-border:rgba(167,139,250,0.35);--success:#34d399;--warn:#fbbf24;--danger:#f87171;--shadow-card:0 20px 40px -15px rgba(0,0,0,0.5)}[data-theme=light]{--bg-deep:#f8fafc;--bg-mesh-1:rgba(6,182,212,0.08);--bg-mesh-2:rgba(37,99,235,0.06);--bg-mesh-3:rgba(249,115,22,0.05);--card-bg:rgba(255,255,255,0.92);--card-hover:#ffffff;--card-border:rgba(226,232,240,0.9);--card-border-hover:rgba(6,182,212,0.5);--surface-raised:rgba(241,245,249,0.85);--surface-raised-hover:#e2e8f0;--text-main:#0f172a;--text-muted:#475569;--text-dim:#94a3b8;--primary-from:#0891b2;--primary-to:#2563eb;--primary-gradient:linear-gradient(135deg,#0891b2,#2563eb);--primary-glow:0 8px 24px -4px rgba(8,145,178,0.3);--accent-coral:#ea580c;--accent-coral-gradient:linear-gradient(135deg,#ea580c,#dc2626);--pastel-mint-bg:#ecfdf5;--pastel-mint-text:#065f46;--pastel-mint-border:#a7f3d0;--pastel-sky-bg:#f0f9ff;--pastel-sky-text:#0369a1;--pastel-sky-border:#bae6fd;--pastel-peach-bg:#fff7ed;--pastel-peach-text:#9a3412;--pastel-peach-border:#fed7aa;--pastel-lavender-bg:#faf5ff;--pastel-lavender-text:#581c87;--pastel-lavender-border:#e9d5ff;--success:#059669;--warn:#d97706;--danger:#dc2626;--shadow-card:0 16px 36px -10px rgba(15,23,42,0.08)}:root{--page-pad-top:32px;--page-pad-x:20px;--page-pad-bottom:80px;--nav-top:16px;--nav-pad-x:24px;--radius-xl:22px;--radius-lg:16px;--radius-md:12px;--radius-sm:8px;--radius-pill:9999px;--font-sans:var(--font-plus-jakarta),-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;--font-mono:var(--font-jetbrains),ui-monospace,monospace}*{margin:0;padding:0;box-sizing:border-box}svg{stroke-width:2}body{font-family:var(--font-sans);background-color:var(--bg-deep);background-image:radial-gradient(at 0 0,var(--bg-mesh-1) 0,transparent 50%),radial-gradient(at 100% 0,var(--bg-mesh-2) 0,transparent 50%),radial-gradient(at 50% 100%,var(--bg-mesh-3) 0,transparent 50%);background-attachment:fixed;min-height:100vh;color:var(--text-main);padding:calc(var(--page-pad-top) + env(safe-area-inset-top, 0px)) calc(var(--page-pad-x) + env(safe-area-inset-right, 0px)) calc(var(--page-pad-bottom) + env(safe-area-inset-bottom, 0px)) calc(var(--page-pad-x) + env(safe-area-inset-left, 0px));line-height:1.6;transition:background-color .3s,color .3s;-webkit-font-smoothing:antialiased}.top-nav{position:fixed;top:calc(var(--nav-top) + env(safe-area-inset-top, 0px));left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:0 calc(var(--nav-pad-x) + env(safe-area-inset-right, 0px)) 0 calc(var(--nav-pad-x) + env(safe-area-inset-left, 0px));pointer-events:none;z-index:1000}.top-nav>*{pointer-events:auto}.floating-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:var(--radius-pill);background:var(--card-bg);border:1px solid var(--card-border);color:var(--text-main);font-family:var(--font-sans);font-size:13px;font-weight:700;cursor:pointer;box-shadow:0 8px 24px -4px rgba(0,0,0,.2);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);transition:all .25s cubic-bezier(.16,1,.3,1)}.floating-btn:hover{background:var(--surface-raised-hover);border-color:var(--card-border-hover);transform:translateY(-2px)}.floating-btn svg{width:17px;height:17px;stroke:var(--primary-from)}.theme-switcher{gap:3px;padding:4px;border-radius:var(--radius-pill);background:var(--card-bg);border:1px solid var(--card-border);box-shadow:0 8px 24px -4px rgba(0,0,0,.2);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}.theme-btn,.theme-switcher{display:inline-flex;align-items:center}.theme-btn{justify-content:center;width:32px;height:32px;border-radius:var(--radius-pill);border:none;background:transparent;color:var(--text-muted);cursor:pointer;transition:all .2s}.theme-btn svg{width:16px;height:16px;stroke:currentColor}.theme-btn:hover{color:var(--text-main)}.theme-btn.active{background:var(--primary-gradient);color:#ffffff;box-shadow:0 2px 10px rgba(6,182,212,.4)}.wrap{max-width:780px;width:100%;margin:0 auto;transition:max-width .35s cubic-bezier(.16,1,.3,1)}.wrap.room-mode{max-width:1240px}.room-layout{display:flex;gap:28px;align-items:flex-start;margin-top:10px}.howto-sidebar{width:clamp(260px,26vw,320px);flex-shrink:0;transition:width .35s cubic-bezier(.16,1,.3,1),opacity .3s,margin .35s}.room-main-area{flex:1 1;min-width:0}@media (min-width:901px){.room-layout.sidebar-hidden .howto-sidebar{width:0;opacity:0;margin-right:-28px;pointer-events:none;overflow:hidden}}.wrap:not(.room-mode) .room-layout{display:block}.wrap:not(.room-mode) .howto-sidebar{width:auto}.wrap:not(.room-mode) .drawer-backdrop,.wrap:not(.room-mode) .room-main-area,.wrap:not(.room-mode) .sidebar-close-btn{display:none!important}.logo{text-align:center;margin-bottom:36px;padding-top:16px}.brand-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:var(--radius-pill);background:var(--pastel-sky-bg);border:1px solid var(--pastel-sky-border);font-size:12px;font-weight:700;color:var(--pastel-sky-text);letter-spacing:.3px;margin-bottom:16px}.brand-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--primary-from);box-shadow:0 0 8px var(--primary-from);animation:pulse-dot 1.8s infinite}.logo h1{font-size:40px;font-weight:800;letter-spacing:-1.2px;display:flex;align-items:center;justify-content:center;gap:14px;color:var(--text-main)}.logo h1 span.gradient-text{background:var(--primary-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.logo-icon{width:46px;height:46px;border-radius:14px;background:var(--primary-gradient);display:inline-flex;align-items:center;justify-content:center;box-shadow:var(--primary-glow);flex-shrink:0}.logo-icon svg{width:26px;height:26px;stroke:#ffffff}.logo p{font-size:15px;color:var(--text-muted);margin-top:10px;max-width:540px;margin-left:auto;margin-right:auto}.arch-pill{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;padding:6px 14px;border-radius:var(--radius-pill);background:var(--pastel-mint-bg);color:var(--pastel-mint-text);border:1px solid var(--pastel-mint-border);margin-top:12px}.arch-pill svg{width:15px;height:15px;stroke-width:1.8;display:inline-block;vertical-align:middle;flex-shrink:0}.card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius-xl);padding:32px 28px;margin-bottom:24px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:var(--shadow-card);transition:border-color .25s,box-shadow .25s,background-color .25s}.card-header-clean{margin-bottom:22px;text-align:center}.card-title{font-size:18px;font-weight:700;color:var(--text-main);letter-spacing:-.3px}.card-subtitle{font-size:13.5px;color:var(--text-muted);margin-top:4px}.btn{gap:10px;padding:14px 24px;border:1px solid transparent;border-radius:var(--radius-md);font-family:var(--font-sans);font-size:15px;font-weight:700;cursor:pointer;transition:all .2s cubic-bezier(.16,1,.3,1);width:100%;letter-spacing:.2px;text-decoration:none}.btn,.btn>span[id$=Icon],.copy-btn>span[id$=Icon]{display:inline-flex;align-items:center;justify-content:center}.btn>span[id$=Icon],.copy-btn>span[id$=Icon]{flex:0 0 auto}.btn>span[id$=Icon] svg,.copy-btn>span[id$=Icon] svg{width:18px;height:18px;stroke-width:2;display:block}.btn:active{transform:scale(.985)}.btn-primary{background:var(--primary-gradient);color:#ffffff;box-shadow:var(--primary-glow)}.btn-primary:hover{filter:brightness(1.1);transform:translateY(-1px)}.btn-secondary{background:var(--surface-raised);color:var(--text-main);border:1px solid var(--card-border)}.btn-secondary:hover{background:var(--surface-raised-hover);border-color:var(--card-border-hover);transform:translateY(-1px)}.btn-sm{padding:9px 16px;font-size:13px;width:auto;border-radius:var(--radius-sm)}.reconnect-action{min-height:44px;min-width:44px}.reconnect-action:focus-visible{outline:3px solid var(--text-main);outline-offset:2px}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important;box-shadow:none!important}.input-wrap{position:relative;margin-bottom:18px}.input{width:100%;padding:16px;border:1.5px solid var(--card-border);border-radius:var(--radius-md);font-family:var(--font-mono);font-size:26px;font-weight:700;text-align:center;letter-spacing:8px;text-transform:uppercase;outline:none;transition:border-color .2s,box-shadow .2s,background-color .2s;background:var(--surface-raised);color:var(--text-main)}.input::placeholder{color:var(--text-dim);letter-spacing:4px;font-weight:500;opacity:.6}.input:focus{border-color:var(--primary-from);box-shadow:0 0 0 4px rgba(6,182,212,.2)}.label{font-family:var(--font-sans);font-size:13px;color:var(--text-muted);margin-bottom:8px;display:block}.divider,.label{font-weight:700;text-align:center}.divider{display:flex;align-items:center;margin:20px 0 16px;color:var(--text-dim);font-size:12px;text-transform:uppercase;letter-spacing:1px}.divider:after,.divider:before{content:"";flex:1 1;border-bottom:1px solid var(--card-border)}.divider:not(:empty):before{margin-right:14px}.divider:not(:empty):after{margin-left:14px}.status{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;border-radius:var(--radius-pill);font-size:13px;font-weight:700;border:1px solid transparent}.status-waiting{background:var(--pastel-peach-bg);color:var(--pastel-peach-text);border-color:var(--pastel-peach-border)}.status-connected{background:var(--pastel-mint-bg);color:var(--pastel-mint-text);border-color:var(--pastel-mint-border)}.status-disconnected{background:rgba(239,68,68,.15);color:#f87171;border-color:rgba(239,68,68,.3)}.status-dot{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor;animation:pulse-dot 1.8s infinite}@keyframes pulse-dot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.85)}}.hidden{display:none!important}.code-box{background:var(--pastel-sky-bg);border:1.5px dashed var(--pastel-sky-border);border-radius:var(--radius-lg);padding:22px 18px;margin:16px 0;text-align:center;position:relative;overflow:hidden}.code-display{font-family:var(--font-mono);font-size:44px;font-weight:800;letter-spacing:12px;color:var(--text-main);text-shadow:0 0 16px rgba(6,182,212,.3)}.copy-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:13px;background:var(--surface-raised);border:1px solid var(--card-border);border-radius:var(--radius-md);font-size:14px;font-weight:700;color:var(--text-main);cursor:pointer;transition:all .2s;font-family:var(--font-sans)}.copy-btn:hover{background:var(--surface-raised-hover);border-color:var(--card-border-hover)}.share-link{font-family:var(--font-mono);font-size:13px;color:var(--text-muted);text-align:center;margin-top:14px;word-break:break-all;padding:10px 14px;background:var(--surface-raised);border-radius:var(--radius-sm);border:1px solid var(--card-border)}.share-link a{color:var(--primary-from);text-decoration:none;font-weight:600}.share-link a:hover{text-decoration:underline}.storage-badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:5px 12px;border-radius:var(--radius-pill);background:var(--pastel-sky-bg);color:var(--pastel-sky-text);border:1px solid var(--pastel-sky-border);margin-top:12px}.storage-badge svg{width:14px;height:14px;stroke-width:1.8;display:inline-block;vertical-align:middle;flex-shrink:0}.dropzone{border:2px dashed var(--pastel-sky-border);border-radius:var(--radius-lg);padding:14px 16px;cursor:pointer;background:var(--surface-raised);transition:all .25s cubic-bezier(.16,1,.3,1);display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;text-align:left}.dropzone:hover{border-color:var(--primary-from);background:var(--pastel-sky-bg);transform:translateY(-2px)}.dropzone.dragover{border-color:var(--accent-coral);background:var(--pastel-peach-bg);transform:scale(1.01)}.dropzone-icon{flex-shrink:0}.dropzone-icon,.dropzone-icon-box{display:flex;justify-content:center}.dropzone-icon-box{width:40px;height:40px;border-radius:12px;background:var(--pastel-sky-bg);align-items:center;border:1px solid var(--pastel-sky-border)}.dropzone-icon-box svg{width:20px;height:20px;stroke:var(--primary-from)}.dropzone-text{flex:1 1;min-width:0;font-size:14.5px;color:var(--text-main);font-weight:700;line-height:1.35}.dropzone-hint{flex-basis:100%;margin-left:54px;font-size:12px;color:var(--text-muted);line-height:1.4}textarea{width:100%;padding:16px;border:1.5px solid var(--card-border);border-radius:var(--radius-md);font-size:15px;font-family:var(--font-sans);resize:vertical;outline:none;transition:border-color .2s,box-shadow .2s;min-height:90px;background:var(--surface-raised);color:var(--text-main);line-height:1.5}textarea:focus{border-color:var(--primary-from);box-shadow:0 0 0 4px rgba(6,182,212,.2)}.progress-bar{height:8px;background:var(--surface-raised);overflow:hidden;margin-top:10px}.progress-bar,.progress-fill{border-radius:var(--radius-pill)}.progress-fill{height:100%;background:var(--primary-gradient);transition:width .2s cubic-bezier(.16,1,.3,1);box-shadow:0 0 10px rgba(6,182,212,.5)}.file-item{display:flex;align-items:center;gap:14px;padding:14px 18px;background:var(--surface-raised);border:1px solid var(--card-border);border-radius:var(--radius-md);margin-bottom:10px;transition:border-color .2s,background .2s}.file-item:hover{background:var(--surface-raised-hover);border-color:var(--card-border-hover)}.file-icon{width:40px;height:40px;border-radius:var(--radius-sm);background:var(--pastel-sky-bg);border:1px solid var(--pastel-sky-border);display:flex;align-items:center;justify-content:center;flex-shrink:0}.file-icon svg{width:22px;height:22px;stroke:var(--primary-from)}.file-info{flex:1 1;min-width:0}.file-name{font-size:14.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-main)}.file-size{font-family:var(--font-mono);font-size:12px;color:var(--text-muted);display:flex;align-items:center;gap:6px;margin-top:3px}.file-size svg{width:13px;height:13px;stroke:var(--text-dim)}.file-actions{flex-shrink:0;display:flex;gap:8px}.text-bubble{padding:14px 18px;border-radius:var(--radius-md);margin-bottom:12px;max-width:82%;word-break:break-word;font-size:14.5px;line-height:1.6;border:1px solid var(--card-border)}.text-received{background:var(--surface-raised);border-bottom-left-radius:4px;color:var(--text-main)}.text-sent{background:var(--primary-gradient);color:#ffffff;border-bottom-right-radius:4px;margin-left:auto;border-color:transparent;box-shadow:0 4px 16px -2px rgba(6,182,212,.4)}.section-title{font-size:16px;font-weight:700;color:var(--text-main);margin-bottom:16px;display:flex;align-items:center;gap:10px}.section-title svg{width:20px;height:20px;stroke:var(--primary-from)}.empty{text-align:center;color:var(--text-dim);font-size:14px;padding:32px 16px;background:var(--surface-raised);border-radius:var(--radius-md);border:1px dashed var(--card-border)}.reconnect-btn{margin-top:14px}.notice{background:var(--pastel-peach-bg);border:1px solid var(--pastel-peach-border);border-radius:var(--radius-md);padding:16px 18px;font-size:13.5px;color:var(--pastel-peach-text);line-height:1.55;margin-top:20px;display:flex;gap:12px;align-items:flex-start;text-align:left}.notice svg{width:22px;height:22px;stroke:var(--accent-coral);flex-shrink:0;margin-top:1px}.file-deleted-notice{background:rgba(239,68,68,.15);border:1px solid rgba(239,68,68,.3);border-radius:var(--radius-sm);padding:12px 16px;font-size:13.5px;color:#f87171;margin-bottom:12px;display:flex;align-items:center;gap:10px}.file-deleted-notice svg{width:18px;height:18px;stroke:#ef4444;flex-shrink:0}.join-request{margin-top:18px;padding:16px 18px;border-radius:var(--radius-md);background:var(--pastel-peach-bg);border:1px solid var(--pastel-peach-border);color:var(--pastel-peach-text);text-align:left;font-size:13.5px;line-height:1.55}.join-request-title{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14.5px;margin-bottom:6px}.join-request-title svg{width:18px;height:18px;stroke:var(--accent-coral);flex-shrink:0}.join-actions{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap}.join-actions span{flex:1 1;font-weight:600}.room-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:18px 20px}.room-status-row{margin-top:20px;gap:10px}.verify-list{margin:6px 0 0;padding-left:20px}.verify-chip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:6px 14px;border-radius:var(--radius-pill);background:var(--pastel-mint-bg);border:1px solid var(--pastel-mint-border);color:var(--pastel-mint-text);font:inherit;font-size:13px;font-weight:700;cursor:pointer}.verify-chip code{font-family:var(--font-mono)}.verify-chip svg{width:16px;height:16px;flex-shrink:0}.verify-hint{line-height:1.55;color:var(--text-muted)}.room-bar-code,.verify-hint{flex-basis:100%;font-size:13px}.room-bar-code{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:12px 14px;border-radius:var(--radius-sm);background:var(--surface-raised);border:1px solid var(--card-border)}.room-bar-code code{font-family:var(--font-mono);font-size:18px;font-weight:700;letter-spacing:3px;color:var(--text-main)}.room-bar-code a{color:var(--primary-from);word-break:break-all}.room-details summary{display:flex;align-items:center;gap:10px;min-height:44px;font-size:14px;font-weight:700;color:var(--text-main);cursor:pointer;list-style:none}.room-details summary::-webkit-details-marker{display:none}.room-details summary svg{width:18px;height:18px;stroke:var(--primary-from)}.room-details-body{padding-top:12px;display:flex;flex-direction:column;gap:12px;font-size:13px;line-height:1.55;color:var(--text-muted)}.storage-line{display:flex;align-items:center;gap:8px}.storage-line svg{width:16px;height:16px}.leave-btn{margin-top:16px;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}.leave-btn svg{width:16px;height:16px}.logo-mark{width:48px;height:48px;flex-shrink:0;border-radius:50%;background:#ffffff;padding:3px;box-shadow:0 6px 18px -6px rgba(0,0,0,.45)}.room-mode .logo-mark{width:38px;height:38px}.room-mode .logo{margin-bottom:18px;padding-top:4px}.room-mode .arch-pill,.room-mode .brand-badge,.room-mode .logo p{display:none}.room-mode .logo h1{font-size:30px}.folder-row{margin-top:16px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 10px;font-size:13px;color:var(--text-muted)}.folder-row svg{width:16px;height:16px;flex-shrink:0}.link-btn{background:none;border:none;padding:0;font:inherit;font-weight:700;color:var(--primary-from);cursor:pointer;text-decoration:underline;text-underline-offset:2px}.unsupported-list{list-style:none;margin:16px 0;padding:0;display:flex;flex-direction:column;gap:8px}.unsupported-list li{display:flex;align-items:flex-start;gap:8px;padding:10px 14px;border-radius:var(--radius-sm);background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.3);color:#f87171;font-size:13.5px;line-height:1.45}.unsupported-list svg{width:16px;height:16px;flex-shrink:0;margin-top:2px}.unsupported-hint{font-size:13.5px;color:var(--text-muted);line-height:1.55}.top-actions{display:inline-flex;align-items:center;gap:8px;margin-left:auto}.account{position:relative}.account-btn{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:4px 14px 4px 4px;border-radius:var(--radius-pill);background:var(--card-bg);border:1px solid var(--card-border);color:var(--text-main);font:inherit;font-size:13px;font-weight:700;text-decoration:none;cursor:pointer;box-shadow:0 8px 24px -4px rgba(0,0,0,.2);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}a.account-btn{padding-left:12px}.account-btn:hover{border-color:var(--card-border-hover)}.account-avatar{width:30px;height:30px;border-radius:50%;object-fit:cover;flex-shrink:0}.account-initial{display:inline-flex;align-items:center;justify-content:center;background:var(--primary-gradient);color:#ffffff;font-size:14px}.account-name{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.google-logo{width:18px;height:18px;flex-shrink:0}.account-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:230px;padding:6px;border-radius:var(--radius-md);background:var(--bg-deep);border:1px solid var(--card-border);box-shadow:0 16px 40px rgba(0,0,0,.4);z-index:1002}.account-menu-head{display:flex;flex-direction:column;gap:2px;padding:10px 12px 12px;border-bottom:1px solid var(--card-border);margin-bottom:6px;font-size:13px;color:var(--text-muted)}.account-menu-head strong{color:var(--text-main);font-size:14px}.account-menu-head code{font-family:var(--font-mono);color:var(--text-main)}.account-menu button{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0 12px;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--text-main);font:inherit;font-size:14px;text-align:left;cursor:pointer}.account-menu button:focus-visible,.account-menu button:hover{background:var(--surface-raised-hover)}.account-menu button svg{width:16px;height:16px}.account-menu button.danger{color:#f87171}.google-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none}.login-hint{margin-top:10px;font-size:12.5px;line-height:1.55;color:var(--text-muted);text-align:center}.login-error{margin-top:8px;font-size:13px;color:#f87171;text-align:center}.my-rooms{display:flex;flex-direction:column;gap:8px}.my-room{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-md);background:var(--surface-raised);border:1px solid var(--card-border)}.my-room-personal{border-color:var(--pastel-sky-border);background:var(--pastel-sky-bg)}.my-room-info{flex:1 1;min-width:0}.my-room-code{font-family:var(--font-mono);font-weight:700;font-size:16px;letter-spacing:2px;color:var(--text-main)}.my-room-meta{font-size:12px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.my-room-forget{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;flex-shrink:0;border-radius:var(--radius-sm);border:1px solid transparent;background:transparent;color:var(--text-muted);cursor:pointer}.my-room-forget:hover{border-color:var(--card-border);color:var(--text-main)}.my-room-forget svg{width:16px;height:16px}.save-btn{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}.save-btn svg{width:16px;height:16px}.discard-btn{background:transparent;border:1px solid var(--card-border);color:var(--text-muted)}.discard-btn:hover:not(:disabled){border-color:rgba(239,68,68,.45);color:#f87171}.discard-btn:disabled{opacity:.5;cursor:wait}.discard-btn svg{width:16px;height:16px}.theme-btn{width:40px;height:40px}.icon-btn{min-width:40px;min-height:40px}.my-room-forget{width:40px;height:40px}@media (prefers-reduced-motion:reduce){*,:after,:before{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}.code-hidden-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 12px;font-size:14px;color:var(--text-muted)}.code-hidden-row code{font-family:var(--font-mono);color:var(--text-main);letter-spacing:2px}.code-hide-btn{margin-top:12px;font-size:13px}@media (max-width:420px){.top-actions .account-name{display:none}.account-btn{padding-right:4px}a.account-btn{padding:4px 11px}}.delete-btn:disabled,.dl-btn:disabled{opacity:.5;cursor:wait}.tabs{gap:6px;margin-bottom:22px;background:var(--surface-raised);border:1px solid var(--card-border);border-radius:var(--radius-md);padding:5px}.tab,.tabs{display:flex}.tab{flex:1 1;padding:11px 18px;border:none;border-radius:var(--radius-sm);font-size:14px;font-weight:700;cursor:pointer;transition:all .2s;background:transparent;color:var(--text-muted);align-items:center;justify-content:center;gap:8px;font-family:var(--font-sans)}.tab svg{width:18px;height:18px;stroke:currentColor}.tab.active{background:var(--primary-gradient);color:#ffffff;box-shadow:0 4px 14px -2px rgba(6,182,212,.4)}.tab:hover:not(.active){color:var(--text-main);background:var(--surface-raised-hover)}.delete-btn{background:rgba(239,68,68,.15);color:#f87171;border:1px solid rgba(239,68,68,.3);border-radius:var(--radius-sm);padding:8px 10px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:all .15s}.delete-btn:hover{background:rgba(239,68,68,.3);color:#ffffff}.delete-btn svg{width:16px;height:16px;stroke:currentColor}.dl-btn{background:var(--pastel-sky-bg);border:1px solid var(--pastel-sky-border)}.dl-btn:hover{background:var(--surface-raised-hover);border-color:var(--card-border-hover)}.dl-btn svg{width:16px;height:16px;stroke:var(--primary-from)}.icon-btn{border-radius:var(--radius-sm);padding:8px 10px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s}.howto-container{margin-top:32px}.howto-header{margin-bottom:22px}.howto-title{font-size:20px;font-weight:800;color:var(--text-main);letter-spacing:-.4px;display:flex;align-items:center;gap:10px}.howto-title svg{width:22px;height:22px;stroke:var(--primary-from)}.howto-subtitle{font-size:13px;color:var(--text-muted);margin-top:4px}.howto-grid{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:14px;gap:14px}.howto-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius-lg);padding:18px;display:flex;flex-direction:column;gap:10px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);transition:all .25s cubic-bezier(.16,1,.3,1);position:relative;box-shadow:var(--shadow-card)}.howto-card:hover{border-color:var(--card-border-hover);background:var(--card-hover);transform:translateY(-2px)}.howto-card-span-2{grid-column:span 2}.howto-top{display:flex;align-items:center;justify-content:space-between}.step-num{font-family:var(--font-mono);font-size:11px;font-weight:700;padding:3px 8px;border-radius:var(--radius-pill);letter-spacing:.5px}.step-mint{background:var(--pastel-mint-bg);color:var(--pastel-mint-text);border:1px solid var(--pastel-mint-border)}.step-sky{background:var(--pastel-sky-bg);color:var(--pastel-sky-text);border:1px solid var(--pastel-sky-border)}.step-peach{background:var(--pastel-peach-bg);color:var(--pastel-peach-text);border:1px solid var(--pastel-peach-border)}.step-lavender{background:var(--pastel-lavender-bg);color:var(--pastel-lavender-text);border:1px solid var(--pastel-lavender-border)}.howto-num{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:var(--primary-gradient);box-shadow:0 4px 10px rgba(6,182,212,.3)}.howto-num svg{width:16px;height:16px;stroke:#ffffff}.howto-body h3{font-size:15px;font-weight:700;color:var(--text-main);letter-spacing:-.2px;margin-bottom:4px}.howto-body p{font-size:13px;color:var(--text-muted);line-height:1.5}.howto-body p strong{color:var(--text-main);font-weight:700}.room-mode .howto-sidebar .howto-container{margin-top:0;background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius-xl);padding:22px 18px;box-shadow:var(--shadow-card);max-height:calc(100vh - 100px);max-height:calc(100dvh - 100px);overflow-y:auto;overscroll-behavior:contain;position:-webkit-sticky;position:sticky;top:70px}.room-mode .howto-sidebar .howto-grid{grid-template-columns:1fr;gap:12px}.room-mode .howto-sidebar .howto-card-span-2{grid-column:span 1}.room-mode .howto-sidebar .howto-card{padding:14px;background:var(--surface-raised)}.room-mode .howto-sidebar .howto-body h3{font-size:14px}.room-mode .howto-sidebar .howto-body p{font-size:12.5px}.sidebar-close-btn{display:none;width:32px;height:32px;border-radius:var(--radius-pill);border:1px solid var(--card-border);background:var(--surface-raised);color:var(--text-main);align-items:center;justify-content:center;cursor:pointer}.sidebar-close-btn svg{width:16px;height:16px;stroke:currentColor}.drawer-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:990}@media (max-width:900px){:root{--page-pad-top:84px;--nav-top:0px}.top-nav{padding-top:calc(10px + env(safe-area-inset-top, 0px));padding-bottom:10px;top:0;background:var(--bg-deep);background:color-mix(in srgb,var(--bg-deep) 84%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--card-border);pointer-events:auto}.room-layout{flex-direction:column}.room-mode .howto-sidebar{position:fixed;top:0;left:0;bottom:0;width:320px;max-width:85vw;z-index:1001;transform:translateX(-105%);visibility:hidden;transition:transform .3s cubic-bezier(.16,1,.3,1),visibility 0s linear .3s;background:var(--bg-deep);padding:20px 20px calc(20px + env(safe-area-inset-bottom));box-shadow:0 0 40px rgba(0,0,0,.5);overflow-y:auto;overscroll-behavior:contain}.room-mode .howto-sidebar .howto-container{position:static;max-height:none;padding:0;background:transparent;border:none;box-shadow:none}.room-mode .room-layout.drawer-open .howto-sidebar{transform:translateX(0);visibility:visible;transition:transform .3s cubic-bezier(.16,1,.3,1)}.room-mode .room-layout.drawer-open .drawer-backdrop{display:block}.room-mode .sidebar-close-btn{display:inline-flex}.howto-card-span-2{grid-column:span 1}.howto-grid,.room-mode .howto-sidebar .howto-grid{grid-template-columns:1fr}}@media (min-width:601px) and (max-width:900px){.wrap:not(.room-mode) .howto-grid{grid-template-columns:repeat(2,1fr)}.wrap:not(.room-mode) .howto-card-span-2{grid-column:span 2}}@media (max-width:420px){:root{--page-pad-x:14px;--nav-pad-x:14px}.logo h1{font-size:32px;gap:10px}.card{padding:24px 16px}.code-box{padding:18px 10px}.code-display{font-size:34px;letter-spacing:8px}.file-item{padding:12px;gap:10px;flex-wrap:wrap}.file-actions{width:100%;justify-content:flex-end}.text-bubble{max-width:92%}.bubble-row .text-bubble{max-width:min(92%,calc(100% - 48px))}}.footer-text{text-align:center;margin-top:48px;font-size:13px;color:var(--text-dim)}.toast-layer{position:fixed;left:0;right:0;bottom:calc(24px + env(safe-area-inset-bottom, 0px));display:flex;justify-content:center;padding:0 16px;pointer-events:none;z-index:2000}.toast{display:inline-flex;align-items:center;gap:10px;max-width:min(92vw,420px);padding:11px 18px;border-radius:var(--radius-pill);background:var(--card-bg);border:1px solid var(--card-border);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:var(--shadow-card);color:var(--text-main);font-size:13.5px;font-weight:600;line-height:1.4;animation:toast-in .22s cubic-bezier(.16,1,.3,1)}.toast svg{width:17px;height:17px;flex-shrink:0}.toast-success{border-color:var(--success)}.toast-success svg{stroke:var(--success)}.toast-info svg{stroke:var(--accent-coral)}@keyframes toast-in{0%{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}.history-title{gap:10px}.history-title-text{flex:1 1;min-width:0}.clear-chat-btn{background:none;border:1px solid var(--card-border);color:var(--text-muted);flex-shrink:0}.clear-chat-btn svg{width:16px;height:16px;stroke:var(--text-muted)}.clear-chat-btn:hover{border-color:var(--danger)}.clear-chat-btn:hover svg{stroke:var(--danger)}.history-scroll{max-height:min(58vh,540px);overflow-y:auto;padding:2px 10px 2px 2px;margin-right:-6px;scrollbar-width:thin;scrollbar-color:var(--card-border-hover) transparent}.history-scroll::-webkit-scrollbar{width:8px}.history-scroll::-webkit-scrollbar-track{background:transparent}.history-scroll::-webkit-scrollbar-thumb{background:var(--surface-raised-hover);border-radius:var(--radius-pill)}.history-scroll::-webkit-scrollbar-thumb:hover{background:var(--card-border-hover)}.day-divider{display:flex;align-items:center;gap:12px;margin:18px 0 14px;color:var(--text-dim);font-size:11.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase}.day-divider:after,.day-divider:before{content:"";flex:1 1;height:1px;background:var(--card-border)}.day-divider span{flex-shrink:0;padding:4px 12px;border-radius:var(--radius-pill);background:var(--surface-raised);border:1px solid var(--card-border);font-family:var(--font-sans)}.history-scroll>.day-divider:first-child{margin-top:2px}.bubble-row{display:flex;align-items:center;gap:8px;margin-bottom:12px}.bubble-row-sent{flex-direction:row-reverse}.bubble-row .text-bubble{margin-bottom:0;margin-left:0;margin-right:0;max-width:min(82%,calc(100% - 48px));min-width:0}.bubble-del{flex:0 0 auto;background:none;border:1px solid transparent;opacity:0;transition:opacity .15s,border-color .15s}.bubble-del svg{width:15px;height:15px;stroke:var(--text-dim)}.bubble-del:focus-visible,.bubble-row:hover .bubble-del{opacity:1}.bubble-del:hover{border-color:var(--danger)}.bubble-del:hover svg{stroke:var(--danger)}@media (hover:none){.bubble-del{opacity:.65}}.bubble-content{white-space:pre-wrap}.bubble-meta{display:flex;justify-content:flex-end;margin-top:4px}.bubble-time{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.3px;color:var(--text-dim)}.text-sent .bubble-time{color:rgba(255,255,255,.75)}.install-banner{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 18px;margin-bottom:20px;border-radius:var(--radius-lg);background:var(--card-bg);border:1px solid var(--pastel-sky-border);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:var(--shadow-card)}.install-icon{width:40px;height:40px;border-radius:var(--radius-sm);background:#ffffff;padding:3px;flex-shrink:0}.install-text{flex:1 1;min-width:180px;display:flex;flex-direction:column;gap:2px}.install-text strong{font-size:14.5px;color:var(--text-main)}.install-text>span{line-height:1.5}.install-steps,.install-text>span{font-size:13px;color:var(--text-muted)}.install-steps{margin:10px 0 2px 18px;padding:0;line-height:1.7}.install-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.install-actions .btn-sm svg{width:16px;height:16px}.install-dismiss{background:none;border:1px solid var(--card-border);color:var(--text-muted)}.install-dismiss svg{width:15px;height:15px;stroke:var(--text-muted)}.install-dismiss:hover{border-color:var(--card-border-hover)}@media (display-mode:fullscreen),(display-mode:standalone){body{overscroll-behavior-y:none}.arch-pill,.brand-badge,.btn,.copy-btn,.floating-btn,.icon-btn,.step-num,.tab,.theme-btn{-webkit-user-select:none;-moz-user-select:none;user-select:none}}@media (pointer:coarse){.tab,a,button{-webkit-tap-highlight-color:transparent}}.code-display,.room-bar-code code,.share-link,.text-bubble,.verify-chip code{-webkit-user-select:text;-moz-user-select:text;user-select:text}.scan-btn{margin-top:10px}.qr-share{margin-top:16px;display:flex;flex-direction:column;align-items:center;gap:12px}.qr-toggle{display:inline-flex;align-items:center;gap:7px;text-decoration:none}.qr-toggle:hover{text-decoration:underline}.qr-toggle svg{width:16px;height:16px}.qr-box{padding:12px;background:#ffffff;border-radius:var(--radius-md);border:1px solid var(--card-border);line-height:0}.qr-box svg{display:block;width:196px;height:196px;max-width:60vw;max-height:60vw}.qr-hint{font-size:12.5px;color:var(--text-muted);max-width:320px;line-height:1.55;text-align:center}.scanner{position:fixed;inset:0;z-index:3000;display:flex;flex-direction:column;background:#05070d;color:#f8fafc;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}.scanner-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;flex-shrink:0}.scanner-title{display:inline-flex;align-items:center;gap:9px;font-size:15px;font-weight:700}.scanner-title svg{width:18px;height:18px;stroke:var(--primary-from)}.scanner-close{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16)}.scanner-close svg{width:18px;height:18px;stroke:#f8fafc}.scanner-stage{position:relative;flex:1 1;min-height:0;overflow:hidden;background:#000000}.scanner-video{width:100%;height:100%;object-fit:cover;display:block}.scanner-canvas{display:none}.scanner-frame{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(68vw,300px);height:min(68vw,300px);pointer-events:none}.scanner-frame span{position:absolute;width:34px;height:34px;border:3px solid var(--primary-from)}.scanner-frame span:first-child{top:0;left:0;border-right:0;border-bottom:0;border-top-left-radius:10px}.scanner-frame span:nth-child(2){top:0;right:0;border-left:0;border-bottom:0;border-top-right-radius:10px}.scanner-frame span:nth-child(3){bottom:0;left:0;border-right:0;border-top:0;border-bottom-left-radius:10px}.scanner-frame span:nth-child(4){bottom:0;right:0;border-left:0;border-top:0;border-bottom-right-radius:10px}.scanner-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:28px;text-align:center;font-size:14px;color:#cbd5e1;background:rgba(5,7,13,.9)}.scanner-error svg{width:32px;height:32px;stroke:var(--accent-coral)}.scanner-error p{max-width:320px;line-height:1.6}.scanner-foot{display:flex;flex-direction:column;align-items:center;gap:12px;padding:18px;flex-shrink:0}.scanner-hint,.scanner-warn{font-size:13px;line-height:1.55;text-align:center;max-width:340px}.scanner-hint{color:#94a3b8}.scanner-warn{display:inline-flex;align-items:center;gap:8px;color:var(--warn)}.scanner-warn svg{width:16px;height:16px;stroke:var(--warn);flex-shrink:0}.scanner-foot .btn{width:auto}.scanner-foot .btn svg{width:16px;height:16px}.join-actions .join-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-main)}.members-title{flex-wrap:wrap;gap:6px 10px}.members-title-text{flex:1 1;min-width:0}.members-count{font-family:var(--font-mono);font-size:12px;font-weight:500;color:var(--text-muted)}.members-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;max-height:min(40vh,360px);overflow-y:auto;scrollbar-width:thin}.member{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--radius-md);background:var(--surface-raised);border:1px solid var(--card-border)}.member-avatar{position:relative;width:36px;height:36px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--pastel-lavender-bg);border:1px solid var(--pastel-lavender-border);color:var(--pastel-lavender-text);font-weight:700;font-size:14px}.member-dot{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;background:var(--text-dim);border:2px solid var(--card-bg)}.member-online .member-dot{background:var(--success)}.member-info{flex:1 1;min-width:0;display:flex;flex-direction:column}.member-name{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;font-size:14px;font-weight:700;color:var(--text-main);overflow-wrap:anywhere}.member-badge{font-size:10.5px;font-weight:700;letter-spacing:.3px;padding:1px 8px;border-radius:var(--radius-pill);background:var(--pastel-sky-bg);border:1px solid var(--pastel-sky-border);color:var(--pastel-sky-text)}.member-badge-owner{background:var(--pastel-peach-bg);border-color:var(--pastel-peach-border);color:var(--pastel-peach-text)}.member-meta{font-size:12px;color:var(--text-muted)}.member-online .member-meta{color:var(--success)}.member-remove{flex-shrink:0;background:none;border:1px solid var(--card-border)}.member-remove svg{width:17px;height:17px;stroke:var(--text-muted)}.member-remove:hover{border-color:var(--danger)}.member-remove:hover svg{stroke:var(--danger)}.members-hint{margin-top:12px;font-size:12.5px;line-height:1.55;color:var(--text-dim)}.file-item-missing{border-style:dashed;opacity:.85}.file-item-missing .file-name{text-decoration:line-through;-webkit-text-decoration-color:var(--text-dim);text-decoration-color:var(--text-dim)}.file-item-missing .file-size,.file-item-missing .file-size svg{color:var(--warn);stroke:var(--warn)}.persist-warning{display:flex;align-items:flex-start;gap:8px;margin:-4px 0 14px;padding:10px 12px;border-radius:var(--radius-sm);background:var(--pastel-peach-bg);border:1px solid var(--pastel-peach-border);color:var(--pastel-peach-text);font-size:12.5px;line-height:1.55}.persist-warning svg{width:16px;height:16px;flex-shrink:0;margin-top:2px;stroke:var(--accent-coral)}.persist-warning .link-btn{color:inherit}.members-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--radius-pill);background:var(--surface-raised);border:1px solid var(--card-border);color:var(--text-muted);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;transition:border-color .15s,color .15s}.members-chip svg{width:15px;height:15px;flex-shrink:0}.members-chip.active,.members-chip:hover{border-color:var(--card-border-hover);color:var(--text-main)}.room-status-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}.members-close{flex-shrink:0;background:none;border:1px solid var(--card-border)}.members-close svg{stroke:var(--text-muted)}#sendProgress .file-actions .btn-sm svg,.members-close svg{width:15px;height:15px}