@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Manrope:wght@500;600;700&display=swap";:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:#f0f0e9;font-synthesis:none;background:#0c0d0c;font-family:DM Sans,sans-serif}*{box-sizing:border-box}body{background:#0c0d0c;min-width:320px;min-height:100vh;margin:0}button,input{font:inherit}button{color:inherit}.app-shell{background:radial-gradient(circle at 50% -10%,#252720 0,#111311 32%,#0c0d0c 70%);min-height:100vh}.topbar{z-index:5;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#0d0f0dcc;border-bottom:1px solid #ffffff10;justify-content:space-between;align-items:center;height:78px;padding:0 max(28px,50vw - 600px);display:flex;position:relative}.brand{letter-spacing:-.4px;cursor:pointer;background:0 0;border:0;align-items:center;gap:11px;font:700 18px Manrope;display:flex}.brand__mark{color:#171915;background:#f1eac9;border-radius:10px;place-items:center;width:30px;height:30px;display:grid;transform:rotate(-5deg)}.topbar__actions{align-items:center;gap:12px;display:flex;position:relative}.icon-button{cursor:pointer;background:#171917;border:1px solid #ffffff15;border-radius:50%;place-items:center;width:40px;height:40px;display:grid;position:relative}.icon-button:hover{background:#20231f}.icon-button--lit{color:#ffdd7d}.notification-dot{background:#f97e70;border-radius:50%;width:5px;height:5px;position:absolute;top:8px;right:8px}.avatar{color:#21160f;cursor:pointer;background:linear-gradient(145deg,#d4a877,#825a3b);border:0;border-radius:50%;place-items:center;width:40px;height:40px;font-size:11px;font-weight:700;display:grid}.popover{background:#1b1d1a;border:1px solid #ffffff14;border-radius:16px;width:210px;padding:8px;position:absolute;top:50px;right:0;box-shadow:0 20px 60px #0009}.profile-menu div{border-bottom:1px solid #ffffff0e;margin-bottom:5px;padding:10px 11px 12px}.profile-menu strong,.profile-menu span{display:block}.profile-menu span{color:#8d9189;margin-top:3px;font-size:12px}.profile-menu button{cursor:pointer;color:#c9cbc4;background:0 0;border:0;border-radius:9px;align-items:center;gap:9px;width:100%;padding:9px 10px;display:flex}.profile-menu button:hover{background:#ffffff0b}main{max-width:1200px;margin:auto;padding:56px 28px 38px}.room-header{justify-content:space-between;align-items:end;margin-bottom:32px;display:flex}.eyebrow{letter-spacing:1.7px;text-transform:uppercase;color:#a0a49b;align-items:center;gap:8px;font:600 11px Manrope;display:flex}.live-dot{background:#79d2a0;border-radius:50%;width:7px;height:7px;box-shadow:0 0 10px #79d2a0}h1{letter-spacing:-1.8px;margin:11px 0 5px;font:600 clamp(30px,4vw,44px) Manrope}.room-header h1{margin-top:0}.room-header p{color:#888c85;margin:0;font-size:14px}.room-header p span{color:#454842;padding:0 4px}.invite-button,.primary-button{color:#191b18;cursor:pointer;background:#efeee5;border:0;border-radius:12px;justify-content:center;align-items:center;gap:8px;padding:12px 16px;font-weight:600;transition:transform .2s,background .2s;display:flex}.invite-button:hover,.primary-button:hover{background:#fff;transform:translateY(-1px)}.room{background:radial-gradient(at 50% 115%,#21251f 0,#151714 42%,#101210 72%);border:1px solid #ffffff0d;border-radius:26px;min-height:480px;position:relative;overflow:hidden;box-shadow:inset 0 1px #ffffff08,0 24px 80px #0005}.room:before{content:"";opacity:.035;background-image:radial-gradient(#fff .55px,#0000 .7px);background-size:18px 18px;position:absolute;inset:0}.ceiling{background:linear-gradient(#242723,#121411);border-bottom:1px solid #ffffff0c;justify-content:space-around;width:100%;height:20px;padding:0 8%;display:flex;position:absolute;top:0;left:0}.ceiling span{background:#070807;border-radius:0 0 12px 12px;width:60px;height:7px;box-shadow:0 2px 6px #000}.lamps-grid{z-index:1;grid-template-columns:repeat(4,1fr);min-height:460px;padding:0 35px;display:grid;position:relative}.mate{flex-direction:column;align-items:center;min-width:0;display:flex;position:relative}.lamp{cursor:default;background:0 0;border:0;width:min(100%,220px);height:315px;margin-top:0;padding:0;position:relative}.lamp svg{filter:drop-shadow(0 10px 14px #0008);width:100%;height:100%;overflow:visible}.lamp--active{cursor:pointer}.lamp--active:hover svg{transform:translateY(3px)}.lamp svg{transition:transform .25s}.lamp__bulb{filter:drop-shadow(0 0 9px var(--lamp-glow))}.lamp--off .lamp__bulb{filter:none}.lamp__edit{opacity:0;color:#bbbdb6;white-space:nowrap;background:#171917c9;border:1px solid #ffffff12;border-radius:20px;padding:5px 9px;font-size:10px;transition:opacity .2s;position:absolute;top:270px;left:50%;transform:translate(-50%)}.lamp--active:hover .lamp__edit{opacity:1}.mate__info{text-align:center;margin-top:-2px}.mate__name-row{justify-content:center;align-items:center;gap:8px;display:flex}.mate__name-row h2{margin:0;font:600 17px Manrope}.mate__name-row em{color:#8d9189;text-transform:uppercase;letter-spacing:.6px;background:#ffffff0b;border-radius:8px;margin-left:6px;padding:3px 6px;font:600 9px DM Sans}.avatar--small{cursor:default;width:27px;height:27px;font-size:8px}.avatar--1{color:#18232a;background:linear-gradient(145deg,#a7b9c8,#536776)}.avatar--2{color:#251a28;background:linear-gradient(145deg,#ceb0d3,#775d7d)}.avatar-note{flex:none;place-items:center;display:inline-grid;position:relative}.avatar-note__bubble{z-index:4;color:#f0f1eb;text-align:left;white-space:normal;overflow-wrap:anywhere;background:#393c38;border:1px solid #ffffff18;border-radius:13px;width:max-content;min-width:54px;max-width:160px;padding:8px 10px;font-family:inherit;font-size:10px;font-weight:600;line-height:1.3;position:absolute;bottom:38px;left:50%;transform:translate(-50%);box-shadow:0 8px 24px #0009}.avatar-note__bubble:before,.avatar-note__bubble:after{content:"";background:#393c38;border-radius:50%;position:absolute}.avatar-note__bubble:before{width:7px;height:7px;bottom:-7px;left:20px}.avatar-note__bubble:after{width:4px;height:4px;bottom:-13px;left:15px}.avatar-note__bubble--editable{cursor:pointer;transition:background .18s,transform .18s}.avatar-note__bubble--editable:hover{background:#4a4e48}.avatar-note__bubble--editable:not(.has-note){color:#bfc2ba;font-weight:500}.avatar-note--0 .avatar-note__bubble,.avatar-note--2 .avatar-note__bubble{left:-14px;transform:none}.avatar-note--0 .avatar-note__bubble--editable:hover,.avatar-note--2 .avatar-note__bubble--editable:hover{transform:translateY(-1px)}.status-line{color:#c1c3bc;justify-content:center;align-items:center;gap:7px;margin-top:10px;font-size:12px;display:flex}.status-line i{border-radius:50%;width:6px;height:6px}.mate time{color:#676a65;margin-top:6px;font-size:10px;display:block}.empty-spot{color:#70746d;cursor:pointer;background:#ffffff02;border:1px dashed #ffffff1a;border-radius:70px 70px 20px 20px;flex-direction:column;justify-content:center;place-self:center;align-items:center;gap:8px;width:150px;height:180px;margin-top:20px;display:flex}.empty-spot:hover{color:#aeb1aa;background:#ffffff05;border-color:#ffffff2e}.empty-spot span{border:1px solid #ffffff17;border-radius:50%;place-items:center;width:43px;height:43px;display:grid}.empty-spot strong{font-size:12px}.empty-spot small{color:#60635e;font-size:10px}.floor-glow{filter:blur(12px);background:#b6a9770d;border-radius:50%;width:75%;height:70px;position:absolute;bottom:-42px;left:12.5%}.status-wheel{left:50%;bottom:max(22px,env(safe-area-inset-bottom));z-index:18;width:64px;height:64px;position:fixed;transform:translate(-50%)}.status-wheel__scrim{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);cursor:default;background:#05060570;border:0;animation:.18s fade;position:fixed;inset:0}.status-wheel__trigger{color:#1a1c19;cursor:pointer;z-index:4;background:#efeee5;border:1px solid #ffffff25;border-radius:50%;place-items:center;width:64px;height:64px;transition:transform .22s,background .2s;display:grid;position:absolute;inset:0;box-shadow:0 12px 35px #0009,0 0 0 6px #ffffff08}.status-wheel__trigger:hover{background:#fff;transform:scale(1.05)}.status-wheel--open .status-wheel__trigger{color:#f2f2ea;background:#292c27;transform:rotate(8deg)}.status-wheel__option{--wheel-x:0px;--wheel-y:0px;background:radial-gradient(circle at 34% 28%,white,var(--orb) 46%,var(--glow));width:50px;height:50px;box-shadow:0 7px 18px #000a,0 0 22px color-mix(in srgb,var(--glow),transparent 30%);color:#141613;cursor:pointer;z-index:2;opacity:0;pointer-events:none;transition:transform .32s cubic-bezier(.2,.85,.25,1.12),opacity .16s;transition-delay:var(--wheel-delay);border:2px solid #ffffffb8;border-radius:50%;place-items:center;display:grid;position:absolute;top:7px;left:7px;transform:translate(0)scale(.25)}.status-wheel--open .status-wheel__option{opacity:1;transform:translate(var(--wheel-x),var(--wheel-y)) scale(1);pointer-events:auto}.status-wheel__option:hover{filter:brightness(1.12);border-color:#fff}.status-wheel__option.off{color:#d4d6cf;background:#30332f;border-color:#5a5e57;box-shadow:0 7px 18px #000a}.status-wheel__option.selected{box-shadow:0 0 0 4px #f0eee3,0 7px 18px #000a,0 0 28px var(--glow)}.status-wheel__option>span{color:#e2e3dc;white-space:nowrap;background:#111310e8;border:1px solid #ffffff10;border-radius:7px;padding:2px 6px;font-size:9px;font-weight:600;line-height:1.2;position:absolute;top:54px;left:50%;transform:translate(-50%);box-shadow:0 3px 10px #0008}.status-wheel__option--new{color:#e7e7df;background:#1d201c;border:1px dashed #ffffff5e;box-shadow:0 7px 18px #000a}.status-wheel__manage{color:#c7cac2;cursor:pointer;z-index:3;background:#1d201c;border:1px solid #ffffff18;border-radius:20px;align-items:center;gap:6px;height:40px;padding:0 12px;font-size:10px;animation:.2s fade;display:flex;position:absolute;top:12px;left:76px}.status-wheel__manage:hover{color:#fff;background:#292c27}.manage-colors{flex-direction:column;gap:7px;display:flex}.manage-colors>div{background:#101210;border:1px solid #ffffff0c;border-radius:12px;align-items:center;gap:11px;padding:10px 11px;display:flex}.manage-colors__orb{border-radius:50%;flex:none;width:27px;height:27px}.manage-colors strong{flex:1;font-size:13px}.manage-colors button{color:#f2a29b;cursor:pointer;background:#2a1d1c;border:0;border-radius:9px;align-items:center;gap:5px;padding:7px 9px;font-size:10px;display:flex}.manage-colors button:hover{background:#3a2321}.status-wheel__current{z-index:3;color:#e8e9e2;white-space:nowrap;background:#151714e8;border:1px solid #ffffff16;border-radius:15px;align-items:center;gap:6px;padding:5px 9px;font-size:10px;font-weight:600;transition:transform .2s;display:flex;position:absolute;bottom:72px;left:50%;transform:translate(-50%);box-shadow:0 5px 17px #0008}.status-wheel__current i{border-radius:50%;flex:none;width:7px;height:7px}.status-wheel--open .status-wheel__current{transform:translate(-50%)translateY(-4px)}.note-form{flex-direction:column;gap:14px;display:flex}.note-preview{flex-direction:column;justify-content:flex-end;align-items:center;height:112px;display:flex;position:relative}.note-preview>span{color:#1b1d1a;text-align:center;overflow-wrap:anywhere;background:#f0f0ea;border-radius:15px;max-width:220px;margin-bottom:11px;padding:9px 12px;font-size:11px;font-weight:600;line-height:1.3;position:relative}.note-preview>span:after{content:"";background:#f0f0ea;border-radius:50%;width:7px;height:7px;position:absolute;bottom:-8px;left:calc(50% - 3px)}.avatar--note-preview{cursor:default;width:38px;height:38px}.note-form label{position:relative}.note-form textarea{resize:none;color:#f3f3ed;background:#0f110f;border:1px solid #ffffff12;border-radius:12px;outline:none;width:100%;height:88px;padding:12px 14px 25px;font:13px DM Sans;display:block}.note-form textarea:focus{border-color:#ffffff35}.note-form label small{color:#62665f;font-size:10px;position:absolute;bottom:8px;right:11px}.note-form .primary-button{width:100%}.note-form .primary-button:disabled{opacity:.4;cursor:not-allowed}.note-form__remove{color:#d78078;cursor:pointer;background:0 0;border:0;padding:2px;font-size:11px}.modal-backdrop{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:20;background:#050605ba;place-items:center;padding:20px;animation:.18s fade;display:grid;position:fixed;inset:0}.modal{background:#171917;border:1px solid #ffffff16;border-radius:23px;width:min(440px,100%);padding:26px;animation:.25s rise;position:relative;box-shadow:0 30px 100px #000c}.modal__close{cursor:pointer;background:#21231f;border:1px solid #ffffff0d;border-radius:50%;place-items:center;width:34px;height:34px;display:grid;position:absolute;top:17px;right:17px}.modal h2{letter-spacing:-.7px;margin:0 40px 5px 0;font:600 24px Manrope}.modal>p{color:#858981;margin:0 40px 22px 0;font-size:13px}.status-list{grid-template-columns:1fr 1fr;gap:8px;display:grid}.status-list>button{text-align:left;cursor:pointer;background:#101210;border:1px solid #0000;border-radius:14px;align-items:center;min-height:72px;padding:11px;display:flex;position:relative}.status-list>button:hover{background:#20231f}.status-list>button.selected{background:#22241f;border-color:#d4c98b4d}.status-list>button>span:nth-child(2){flex:1}.status-list>button>svg{color:#d4c98b;position:absolute;top:9px;right:9px}.status-list strong,.status-list small{display:block}.status-list strong{font-size:13px}.status-list small{color:#71756e;margin-top:4px;font-size:10px}.status-orb{background:radial-gradient(circle at 35% 30%,white,var(--orb) 45%,var(--glow));width:35px;height:35px;box-shadow:0 0 16px color-mix(in srgb,var(--glow),transparent 35%);border-radius:50%;flex:none;margin-right:11px}.status-orb--off{background:#2c2f2b;box-shadow:inset 0 1px #ffffff13}.status-list .add-status{background:0 0;border:1px dashed #ffffff15;grid-column:1/-1;min-height:50px}.add-status>span{border:1px dashed #fff2;border-radius:50%;place-items:center;width:29px;height:29px;margin-right:12px;display:grid}.invite-panel__label{text-transform:uppercase;letter-spacing:1.3px;color:#777b73;font-size:10px}.invite-code{background:#101210;border:1px solid #ffffff12;border-radius:13px;justify-content:space-between;align-items:center;margin-top:8px;padding:13px 13px 13px 17px;display:flex}.invite-code strong{letter-spacing:3px;font:600 21px Manrope}.invite-code button{cursor:pointer;background:#242722;border:0;border-radius:9px;place-items:center;width:35px;height:35px;display:grid}.invite-panel p{color:#72766f;font-size:12px;line-height:1.5}.invite-panel .primary-button{width:100%;margin-top:20px}.custom-form label,.custom-form legend{color:#898d85;font-size:11px}.custom-form input{color:#fff;background:#0f110f;border:1px solid #ffffff12;border-radius:11px;outline:none;width:100%;margin-top:7px;padding:13px 14px;display:block}.custom-form input:focus{border-color:#ffffff35}.custom-form fieldset{border:0;margin:18px 0;padding:0}.custom-form fieldset div{gap:10px;margin-top:9px;display:flex}.custom-form fieldset button{color:#151715;cursor:pointer;border:2px solid #0000;border-radius:50%;place-items:center;width:38px;height:38px;display:grid}.custom-form fieldset button.selected{border-color:#fff;box-shadow:0 0 0 3px #ffffff16}.custom-preview{color:#777b74;background:#0f110f;border-radius:12px;justify-content:center;align-items:center;gap:12px;height:65px;display:flex}.custom-preview span{border-radius:50%;width:18px;height:18px}.custom-form .primary-button{width:100%;margin-top:18px}.toast{z-index:50;color:#1b1d1a;white-space:nowrap;background:#ecece5;border-radius:12px;align-items:center;gap:8px;padding:11px 16px;font-size:12px;font-weight:600;animation:.25s toast-in;display:flex;position:fixed;bottom:25px;left:50%;transform:translate(-50%);box-shadow:0 10px 40px #0008}.mobile-menu{display:none}@keyframes fade{0%{opacity:0}}@keyframes rise{0%{opacity:0;transform:translateY(10px)scale(.98)}}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,10px)}}.status-wheel{left:calc(50% - 32px);transform:none}.status-wheel__option--manage{color:#d9dbd3;background:#242722;border:1px solid #ffffff38;box-shadow:0 7px 18px #000a}.status-wheel__trigger--confirm,.status-wheel--open .status-wheel__trigger--confirm{color:#171915;background:#f1eac9;transform:none;box-shadow:0 12px 35px #0009,0 0 0 6px #f1eac91a,0 0 25px #d8c97838}@media (max-width:800px){.app-shell{height:100dvh;min-height:0;overflow:hidden}.topbar{height:60px;padding:0 16px}.topbar .icon-button{display:none}.app-shell>main{flex-direction:column;height:calc(100dvh - 60px);padding:18px 14px 12px;display:flex}.room-header{flex:none;align-items:flex-start;margin-bottom:14px}.room-header h1{margin-bottom:2px;font-size:27px}.room-header p{font-size:11px}.invite-button{padding:10px;font-size:0}.invite-button svg{margin:0}.room{border-radius:20px;flex:1;height:auto;min-height:0}.lamps-grid{grid-template-rows:repeat(2,minmax(0,1fr));grid-template-columns:repeat(2,1fr);height:100%;min-height:0;padding:0 6px}.mate{min-height:0}.lamp{flex:none;width:clamp(112px,38vw,150px);height:clamp(156px,25dvh,218px)}.mate__info{margin-top:clamp(-35px,-4dvh,-22px)}.empty-spot{width:clamp(105px,34vw,130px);height:clamp(112px,19dvh,145px);margin-top:0}.ceiling{padding:0 15%}.lamp__edit{display:none}.status-wheel{bottom:max(18px,env(safe-area-inset-bottom))}}@media (max-width:470px){.lamps-grid{padding:0}.mate__name-row h2{font-size:14px}.mate__name-row{gap:6px}.status-line{margin-top:7px;font-size:11px}.mate time{margin-top:4px}.modal{padding:23px 19px}.status-list{grid-template-columns:1fr}.status-list .add-status{grid-column:auto}.toast{max-width:calc(100vw - 28px)}}@media (max-width:380px),(max-height:700px){.topbar{height:54px}.app-shell>main{height:calc(100dvh - 54px);padding-top:12px}.brand__mark{width:27px;height:27px}.room-header{margin-bottom:9px}.room-header h1{font-size:23px}.room-header p{font-size:10px}.lamp{height:clamp(142px,24dvh,180px)}.mate__info{margin-top:-30px}.avatar--small{width:23px;height:23px}.status-wheel__trigger,.status-wheel{width:58px;height:58px}.status-wheel__option{top:4px;left:4px}}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}.onboarding{background:radial-gradient(circle at 50% 15%,#292a21 0,#121411 36%,#090a09 72%);place-items:center;max-width:none;min-height:100vh;padding:30px;display:grid;position:relative;overflow:hidden}.onboarding__glow{filter:blur(35px);background:#ffe5941a;border-radius:50%;width:520px;height:520px;position:absolute;top:-300px}.onboarding__brand{position:absolute;top:26px;left:30px}.onboarding__card{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#151714e8;border:1px solid #ffffff14;border-radius:26px;width:min(435px,100%);padding:42px;position:relative;box-shadow:0 30px 100px #000b}.onboarding__card h1{margin:11px 0 10px;font-size:33px;line-height:1.08}.onboarding__card>p{color:#858981;margin:0 0 25px;font-size:13px;line-height:1.55}.onboarding__lamp{width:58px;height:70px;position:absolute;top:-44px;right:32px}.onboarding__lamp:before{content:"";background:#555851;width:4px;height:58px;position:absolute;top:-45px;left:27px}.onboarding__lamp span{clip-path:polygon(28% 0,72% 0,100% 100%,0 100%);background:linear-gradient(145deg,#62645d,#282b27);border-radius:50% 50% 7px 7px;width:58px;height:36px;position:absolute;top:11px}.onboarding__lamp i{background:#fff0ad;border-radius:5px 5px 10px 10px;width:18px;height:23px;position:absolute;top:39px;left:20px;box-shadow:0 0 20px 5px #ffd96a88}.onboarding__form{flex-direction:column;gap:15px;display:flex}.onboarding__form label{color:#9a9e96;font-size:11px}.onboarding__form input{color:#f4f4ed;background:#0c0e0c;border:1px solid #ffffff12;border-radius:11px;outline:none;width:100%;margin-top:7px;padding:13px 14px;display:block}.onboarding__form input:focus{border-color:#dacf9a77;box-shadow:0 0 0 3px #dacf9a0d}.onboarding__form .primary-button{width:100%;margin-top:5px}.onboarding__form>small{text-align:center;color:#696d66}.onboarding__form>small button,.back-button{color:#c8bd88;cursor:pointer;background:0 0;border:0}.mode-toggle{background:#0d0f0d;border-radius:12px;grid-template-columns:1fr 1fr;margin-bottom:3px;padding:4px;display:grid}.mode-toggle button{color:#777b74;cursor:pointer;background:0 0;border:0;border-radius:9px;padding:10px;font-size:12px}.mode-toggle button.active{color:#eeeee8;background:#242723;box-shadow:0 2px 8px #0005}.capacity-note{color:#858981;background:#ffffff05;border:1px solid #ffffff0a;border-radius:10px;align-items:center;gap:9px;padding:11px;font-size:11px;display:flex}.capacity-note svg{color:#c9bc83;flex:none}.back-button{color:#81857e;padding:2px;font-size:12px}@media (max-width:470px){.onboarding{padding:70px 16px 25px}.onboarding__brand{top:20px;left:20px}.onboarding__card{border-radius:21px;padding:30px 22px}.onboarding__card h1{font-size:29px}.onboarding__lamp{display:none}}
