.c-collection-view{border:1px solid var(--border-1);border-radius:var(--radius-2);background:var(--surface-0);flex-direction:column;display:flex;overflow:hidden;box-shadow:0 1px 3px #0000000d}.c-collection-view .collection-header{background:var(--surface-1);border-bottom:1px solid var(--border-2);font-weight:600;font-size:var(--font-d);color:var(--text-2);text-transform:uppercase;letter-spacing:.05em;min-height:44px;display:flex}.c-collection-view .collection-header-cell{padding:var(--spacer-2)var(--spacer-3);border-right:1px solid var(--border-1);flex-shrink:0;align-items:center;display:flex;&:last-child{border-right:none}}.c-collection-view .collection-row{border-bottom:1px solid var(--border-1);align-items:center;min-height:52px;transition:background-color .15s,box-shadow .15s;display:flex;position:relative;&:last-child{border-bottom:none}&.even{background:var(--surface-0)}&.odd{background:var(--surface-1)}&:hover{background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--border-2)}}.c-collection-view .collection-cell{padding:var(--spacer-2)var(--spacer-3);border-right:1px solid var(--border-1);align-items:center;gap:var(--spacer-2);text-overflow:ellipsis;flex-shrink:0;min-height:52px;display:flex;overflow:hidden;&:last-child{border-right:none}&.collection-actions-column{padding:var(--spacer-1)var(--spacer-2);flex-shrink:0;justify-content:flex-end;width:140px;min-width:140px}&>*{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}& strong{color:var(--text-1);font-weight:600}}.c-collection-view .collection-empty-state{padding:var(--spacer-6);text-align:center;color:var(--text-2);font-size:var(--font-d);line-height:1.6}.c-collection-view .collection-row-actions{gap:var(--spacer-1);opacity:0;visibility:hidden;flex-wrap:nowrap;flex-shrink:0;justify-content:flex-end;align-items:center;width:100%;transition:opacity .2s,visibility .2s;display:flex;& .c-button{flex-shrink:0}}.c-collection-view .collection-row:hover .collection-row-actions{opacity:1;visibility:visible}.c-menu-group{margin-top:var(--spacer-2);flex-direction:column;width:100%;display:flex}.c-context-menu{position:relative;& .anchor{cursor:pointer}& .menu{background:var(--surface-1);border:1px solid var(--surface-3);border-radius:var(--radius-md);box-shadow:0 var(--spacer-1)var(--spacer-2)oklch(from var(--surface-0)l c h/.3);gap:var(--spacer-05);min-width:180px;padding:var(--spacer-1);text-align:left;z-index:1000;flex-direction:column;display:flex;position:absolute;&.top{margin-bottom:var(--spacer-1);bottom:100%}&.bottom{margin-top:var(--spacer-1);top:100%;left:0;right:auto;transform:none}&.left{margin-right:var(--spacer-1);right:100%}&.right{margin-left:var(--spacer-1);left:100%}}}.c-theme-toggle{justify-content:center;align-items:center;display:flex;& .c-icon{background:var(--surface-3);border:1px solid var(--surface-4);cursor:pointer;min-width:calc(var(--spacer-2) + var(--spacer-1)*2);min-height:calc(var(--spacer-2) + var(--spacer-1)*2);border-radius:50%;transition:all .3s;padding:var(--spacer-1)!important;&:hover{background:var(--surface-4);transform:scale(1.05)}}}.c-app-layout{background:var(--surface-1);grid-template-columns:[menu]auto[content]1fr[context]minmax(64px,auto);width:100%;height:100vh;display:grid;position:relative;overflow:hidden;&:not(:has(.c-panel-context)){grid-template-columns:[menu]auto[content]1fr}&>.content{flex-direction:column;grid-column:content;height:100vh;display:flex;& .view{flex:1;overflow:hidden scroll}}@media (width<=768px){grid-template-columns:[content]1fr&>.content{grid-column:1/-1}&:has(.c-panel-context){grid-template-columns:[content]1fr[context]minmax(64px,auto)}}}.c-mobile-panel-toggle{top:var(--spacer-1);left:var(--spacer-1);z-index:1001;background:var(--surface-2);border:1px solid var(--surface-3);border-radius:var(--border-radius-s);color:var(--surface-7);cursor:pointer;padding:var(--spacer-1);width:var(--spacer-6);height:var(--spacer-6);min-width:var(--spacer-6);min-height:var(--spacer-6);box-shadow:var(--shadow-d);justify-content:center;align-items:center;transition:all .2s;display:none;position:fixed;&:hover{background:var(--surface-3);color:var(--surface-8)}&:active{transform:scale(.95)}& svg{flex-shrink:0;width:20px;height:20px;display:block}@media (width<=768px){display:flex}}.c-mobile-panel-close{top:var(--spacer-1);left:var(--spacer-1);z-index:1002;background:var(--surface-2);border:1px solid var(--surface-3);border-radius:var(--border-radius-s);color:var(--surface-7);cursor:pointer;padding:var(--spacer-1);width:var(--spacer-6);height:var(--spacer-6);min-width:var(--spacer-6);min-height:var(--spacer-6);box-shadow:var(--shadow-d);justify-content:center;align-items:center;transition:all .2s;display:none;position:fixed;&:hover{background:var(--surface-3);color:var(--surface-8)}&:active{transform:scale(.95)}& svg{flex-shrink:0;width:20px;height:20px;display:block}@media (width<=768px){display:flex}}.c-panel-switcher{top:var(--spacer-1);left:calc(var(--spacer-6) + var(--spacer-1) + var(--spacer-1));z-index:1001;gap:var(--spacer-05);background:var(--surface-2);border:1px solid var(--surface-3);border-radius:var(--border-radius-s);padding:var(--spacer-05);box-shadow:var(--shadow-d);display:none;position:fixed;@media (width<=768px){display:flex}}.c-panel-switcher-tab{border-radius:var(--border-radius-xs);color:var(--surface-6);cursor:pointer;font-size:var(--font-xs);padding:var(--spacer-05)var(--spacer-1);background:0 0;border:none;font-weight:500;transition:all .2s;&:hover{background:var(--surface-3);color:var(--surface-8)}&.is-active{background:var(--surface-4);color:var(--surface-8)}&:active{transform:scale(.95)}}.c-panel-backdrop{backdrop-filter:blur(2px);z-index:999;background:#0000004d;animation:.3s ease-in-out fade-in;position:fixed;inset:0}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.c-splash{background:var(--bg-secondary);font-family:var(--font-family-mono);flex-direction:column;flex:1;justify-content:center;align-items:center;display:flex;& .icon{width:300px;height:300px;transform:scale(1.5)}& .title{color:hsl(var(--accent-h)var(--s-3)var(--l-2));font-size:3.7rem;font-weight:var(--font-weight-semibold);height:3.7rem;margin:0;padding:0;line-height:3.7rem}& .subtitle{color:hsl(var(--accent-h)var(--s-1)var(--l-2));font-size:1.67rem;font-weight:500}}.c-notifications{bottom:var(--spacer-1);align-items:center;gap:var(--spacer-1);max-width:400px;padding:var(--spacer-2)var(--spacer-2);right:var(--spacer-1);z-index:100000;flex-direction:column-reverse;flex:1;width:100%;font-style:italic;font-weight:400;display:flex;position:fixed;overflow:hidden;& .notification{box-shadow:var(--shadow);margin:var(--spacer-1)var(--spacer-05);padding:var(--spacer-2);z-index:1000000;justify-content:space-between;align-items:center;transition:all .3s ease-in-out;display:flex;&.fade-appear{opacity:0;transform:scale(0)}&.fade-appear-active{opacity:1;transform:scale(1)}&.fade-exit{opacity:0;transform:scale(0)}&.type-success{background:var(--success-4);color:var(--success-8)}&.type-info{background:var(--info-4);color:var(--info-8)}&.type-warning{background:var(--warning-5);color:var(--warning-1)}&.type-error{background:var(--danger-4);color:var(--danger-8)}& .icon{height:var(--spacer-4);margin:var(--spacer-1);width:var(--spacer-4)}& .text-wrapper{padding:0 var(--spacer-1);flex:1}& .close-button{cursor:pointer;font-size:var(--font-xl);opacity:.7;background:0 0;border:none;padding:0;&:hover{opacity:1}}}}.c-login{background:linear-gradient(to bottom,var(--surface-3),var(--surface-0));opacity:0;background-attachment:fixed;justify-content:center;align-items:center;width:100%;height:100vh;animation:.5s ease-in forwards fade-in;display:flex;position:relative;overflow:hidden;& .background-layer{z-index:-1;width:100%;height:100%;position:absolute;top:0;left:0;& .floating-word{color:oklch(from var(--surface-6)l c h/.3);font-size:var(--font-xl);transform-origin:50%;user-select:none;white-space:nowrap;font-weight:500;transition:all 3s ease-out;position:absolute}}& .login-container{background:oklch(from var(--surface-2)l c h/.8);border:1px solid var(--surface-2);border-radius:var(--border-radius-l);box-shadow:0 0 var(--spacer-2)var(--spacer-1)oklch(from var(--surface-0)l c h/.3);max-width:320px;padding:var(--spacer-4);z-index:1;width:100%;position:relative;& .logo{align-items:center;gap:var(--spacer-3);padding:var(--spacer-2)0;user-select:none;flex-direction:column;justify-content:center;display:flex;& img{max-width:100px}& svg{aspect-ratio:1;flex-shrink:0;width:auto;height:96px}& .logo-animated{filter:drop-shadow(0 2px 4px oklch(from var(--surface-0)l c h/.1))}& .logo-text{color:var(--surface-8);font-size:var(--font-xl);letter-spacing:.02em;font-weight:500}}& .field{margin-bottom:var(--spacer-3);& label{color:var(--surface-5);font-size:var(--font-s);margin-bottom:var(--spacer-1);text-transform:capitalize;display:block}&.password-field{position:relative;& input{padding-right:var(--spacer-5)}& button{background:var(--surface-2);border-radius:var(--border-radius-xs);height:calc(var(--input-height) - var(--spacer-2));right:var(--spacer-1);width:var(--spacer-4);border:none;margin:0;padding:0;position:absolute;top:50%;transform:translateY(-50%)}}& input{border:1px solid var(--surface-3);border-radius:var(--border-radius-s);color:var(--surface-7);font-size:var(--font-d);height:var(--input-height);padding:0 var(--spacer-2);background:0 0;width:100%;transition:all .2s;&:focus{border-color:var(--surface-3);outline:none}&::placeholder{color:var(--surface-4)}}}& button[type=submit]{background:var(--surface-2);border-radius:var(--border-radius-s);color:var(--surface-7);cursor:pointer;font-size:var(--font-d);height:var(--input-height);margin-top:var(--spacer-4);border:none;width:100%;font-weight:400;transition:all .2s;&:hover{background:var(--surface-3)}&:active{background:var(--surface-1)}}& .error-message{background:var(--surface-1);border:1px solid var(--red-6);border-radius:var(--border-radius-s);color:var(--red-9);margin-bottom:var(--spacer-3);padding:var(--spacer-2);text-align:center}& .actions{gap:var(--spacer-2);justify-content:center;display:flex}}}.words-container{perspective:1000px;perspective-origin:50%;pointer-events:none;z-index:0;width:100%;height:100%;position:fixed;top:0;left:0}.floating-translation{--angle:0;--base-size:2.5rem;color:var(--surface-4);font-size:var(--base-size);opacity:0;transform-origin:50%;transform-style:preserve-3d;user-select:none;position:absolute;&.fade-in{animation:7s cubic-bezier(.2,0,.6,1) forwards word-float}}@keyframes word-float{0%{filter:blur(var(--spacer-5));opacity:0;text-shadow:0 0 var(--spacer-1)var(--surface-4);transform:scale(0)translate3d(calc(cos(var(--angle))*0px),calc(sin(var(--angle))*0px),0)}20%{transform:translate3d(calc(cos(var(--angle))*50px),calc(sin(var(--angle))*50px),50px)}60%{filter:blur();opacity:1;text-shadow:0 0 var(--spacer-5)var(--surface-4);transform:scale(1)translate3d(calc(cos(var(--angle))*250px),calc(sin(var(--angle))*250px),250px)}85%{filter:blur(var(--spacer-5));opacity:0;transform:scale(5)translate3d(calc(cos(var(--angle))*400px),calc(sin(var(--angle))*400px),400px)}to{transform:scale(10)translate3d(calc(cos(var(--angle))*800px),calc(sin(var(--angle))*800px),800px)}}.c-panel-context{border-right:1px solid var(--surface-1);box-shadow:0 0 var(--spacer-2)var(--spacer-1)oklch(from var(--surface-0)l c h/.4);z-index:100001;flex-direction:column;width:auto;min-width:56px;height:100vh;transition:width .3s;display:flex;position:relative;&.fade-in{opacity:0;animation:.2s ease-in forwards fade-in}&.resizing{user-select:none;transition:none}body[data-hmr-updating=true] &{transition:none!important;animation:none!important}body[data-hmr-updating=true] &.fade-in{opacity:1!important;animation:none!important}& .c-button.variant-toggle{margin:var(--spacer-05)auto var(--spacer-05)var(--spacer-2);pointer-events:auto;flex-shrink:0;align-self:flex-start;position:relative}& .resize-handle{cursor:ew-resize;height:calc(100% - var(--spacer-5));pointer-events:auto;z-index:5;background:0 0;width:4px;position:absolute;top:0;left:0;&:hover{background:var(--surface-3)}}& .content{background:var(--surface-1);gap:var(--spacer-1);height:100%;min-height:0;padding:var(--spacer-1);z-index:1;flex-direction:row;flex:1;width:100%;display:flex;position:relative;overflow-y:auto}&.collapsed{width:56px;min-width:56px;& .resize-handle{display:none}& .c-button.variant-toggle{margin:var(--spacer-05)auto;max-width:calc(100% - var(--spacer-1));pointer-events:auto;align-self:center;width:auto;position:relative}}@media (width<=768px){& .c-button.variant-toggle{display:none}z-index:1001;visibility:hidden;width:280px;max-width:85vw;transition:transform .3s ease-in-out;position:fixed;top:0;left:0;transform:translate(-100%)}}@media (width<=768px){.c-panel-context:not(.collapsed){visibility:visible;transform:translate(0)}.c-panel-context.collapsed{visibility:hidden;transform:translate(-100%)}}.c-user-menu{cursor:pointer;align-items:center;gap:var(--spacer-1);padding:var(--spacer-05);display:flex;& .avatar-img,& .avatar-initials{height:var(--icon-xl);width:var(--icon-xl);border-radius:50%;flex-shrink:0}& .avatar-img{object-fit:cover;display:block}& .avatar-initials{background:var(--primary-5);color:var(--primary-text);font-size:var(--font-xs);justify-content:center;align-items:center;font-weight:500;line-height:1;display:flex}& .name{color:var(--surface-7);text-overflow:ellipsis;white-space:nowrap;flex:1;font-weight:500;overflow:hidden}&.collapsed{padding:var(--spacer-05);justify-content:center;& .name{display:none}& .avatar-img,& .avatar-initials{height:var(--spacer-4);width:var(--spacer-4)}}}.c-context-menu .menu{& .menu-header{background:var(--surface-2);border-radius:var(--radius-sm);align-items:center;gap:var(--spacer-1);margin-bottom:var(--spacer-1);padding:var(--spacer-1);display:flex}& .menu-avatar{flex-shrink:0;& .avatar-img,& .avatar-initials{height:var(--icon-l);width:var(--icon-l)}}& .menu-name{color:var(--surface-8);font-size:var(--font-d);text-overflow:ellipsis;white-space:nowrap;flex:1;font-weight:600;overflow:hidden}& .menu-item{border-radius:var(--radius-sm);color:var(--surface-7);cursor:pointer;font-size:var(--font-s);align-items:center;gap:var(--spacer-1);padding:var(--spacer-05)var(--spacer-1);text-align:left;background:0 0;width:100%;transition:all .2s;display:flex;&:hover{background:var(--surface-2);color:var(--surface-8)}&:active{background:var(--surface-3)}&.theme{cursor:default;& .c-icon{flex-shrink:0}&:hover{cursor:default;background:0 0}}& .c-icon{flex-shrink:0}& span{flex:1}}}.c-avatar-upload{gap:var(--spacer-2);flex-direction:column;display:flex}.avatar-label{color:var(--surface-7);font-size:var(--font-d);font-weight:var(--font-weight-semibold,600)}.avatar-preview-section{align-items:center;gap:var(--spacer-2);display:flex}.avatar-preview{flex-shrink:0;width:80px;height:80px;position:relative}.avatar-preview-img{border-radius:var(--border-radius-d);object-fit:cover;width:100%;height:100%}.avatar-actions{gap:var(--spacer-1);flex-wrap:wrap;flex:1;display:flex}.avatar-file-input{opacity:0;width:0;height:0;position:absolute;overflow:hidden}.avatar-help{color:var(--surface-5);font-size:var(--font-s);margin:0}.c-panel-menu{background:var(--surface-1);border-right:1px solid var(--surface-2);box-shadow:0 0 var(--spacer-2)var(--spacer-1)#0000001a;flex-direction:column;width:320px;min-width:56px;height:100vh;display:flex;position:relative;& header{background:var(--surface-1);min-height:var(--spacer-5);padding:var(--spacer-05)var(--spacer-1);align-items:center;font-weight:500;display:flex;position:relative;& a.logo{cursor:pointer}& .logo{color:var(--surface-8);align-items:center;gap:var(--spacer-1);flex:1;justify-content:flex-start;height:100%;text-decoration:none;display:flex;& img{height:var(--spacer-6);width:auto}& svg{color:var(--primary-5);margin-inline-end:var(--spacer-1)}& .icon{width:40px;height:40px}}& .l-name{& .name{color:var(--surface-8);letter-spacing:.01em;width:100%;font-size:1.125rem;font-weight:500}& .version{bottom:var(--spacer-1);color:var(--surface-5);cursor:help;font-size:var(--font-xs);font-style:italic;position:absolute}}}& .c-button.variant-toggle{margin:var(--spacer-05)var(--spacer-05)var(--spacer-05)auto;flex-shrink:0;align-self:flex-end}@media (width<=768px){& .c-button.variant-toggle{display:none}}& .content{background:var(--surface-1);flex-direction:column;flex:1;justify-content:flex-start;width:100%;height:100%;min-height:0;display:flex;overflow:hidden;& .navigation{flex-direction:column;flex:1;gap:0;width:100%;min-height:0;display:flex;overflow:hidden auto;&::-webkit-scrollbar{width:6px}&::-webkit-scrollbar-track{background:0 0}&::-webkit-scrollbar-thumb{background:var(--surface-4);border-radius:3px;&:hover{background:var(--surface-5)}}&>:not(.c-menu-item){flex:none;min-height:0}&[data-collapsed=true]{& a,& button{justify-content:center;& span{display:none}}}& a{color:var(--surface-6);align-items:center;gap:var(--spacer-1);justify-content:flex-start;width:100%;text-decoration:none;transition:all .3s;display:flex;&.active{background:var(--surface-3);color:var(--surface-8)}&.disabled{cursor:not-allowed;opacity:.5;pointer-events:none}&:hover:not(.disabled):not(.active){background:var(--surface-2)}}& .menu-group{margin-top:var(--spacer-2)}}& .actions{gap:var(--spacer-1);padding:var(--spacer-1);width:100%;display:flex;&[data-collapsed=true]{flex-direction:column;justify-content:flex-end;&>*{align-self:center}}& .c-icon{background:var(--surface-3);border:1px solid var(--surface-4);cursor:pointer;border-radius:50%;padding:6px;transition:all .3s;&:hover{background:var(--surface-4)}}}& .footer{padding:var(--spacer-1);width:100%}}&.collapsed{width:56px;& header{padding:var(--spacer-05)}& .logo{justify-content:center;& .l-name,& img{display:none}& svg.icon{width:36px;height:36px;margin-inline-end:0}&:not(:has(svg.icon)) img{width:auto;height:36px;margin-inline-end:0;display:block}}& .content{& .footer{display:none}& .navigation{padding:var(--spacer-05)0;& .menu-group{margin-top:var(--spacer-05)}& .channels-header,& .people-header{display:none}& .channel.item{padding:var(--spacer-05);justify-content:center;& .flex-column{display:none}& .c-icon{margin:0}}& .people-list{& .person.item{padding:var(--spacer-05);justify-content:center;& .status-indicator,& .person-name{display:none}& .person-avatar{width:24px;height:24px}}}}& .actions{padding:var(--spacer-05);justify-content:center}}& .c-button.variant-toggle{margin:var(--spacer-05)auto;max-width:calc(100% - var(--spacer-1));align-self:center;width:auto}}@media (width<=768px){visibility:hidden;z-index:1000;width:280px;max-width:85vw;transition:transform .3s ease-in-out;position:fixed;top:0;left:0;transform:translate(-100%)}}@media (width<=768px){.c-panel-menu:not(.collapsed){visibility:visible;transform:translate(0)}.c-panel-menu.collapsed{visibility:hidden;transform:translate(-100%)}}.c-context-input{&-fade-active,&-fade-leave-active{transition:opacity .25s ease-out}&-fade-enter-from,&-fade-leave-to{opacity:0}& .action-input{flex:1;display:flex;position:relative;& .field{padding:6px 0;& input{padding:8px 0}}& .btn{bottom:calc(var(--spacer-1)*1.5);right:var(--spacer-1);padding:0;position:absolute}}}.c-progress{background:var(--surface-3);width:100%;position:relative;& .bar{background:var(--primary-5);height:var(--spacer-3);& .percentage{color:var(--primary-1);font-size:var(--font-s);height:var(--spacer-3);padding:0 var(--spacer-1);justify-content:space-between;align-items:center;width:100%;font-weight:600;display:flex;position:absolute;top:0}}& .boundaries{background:var(--info-0);color:var(--info-7);font-size:var(--font-xxs);padding:var(--spacer-025);width:100%;display:flex}}.c-tabs{gap:var(--spacer-1);margin:0;padding:0;list-style:none;display:flex}.c-tabs__tab{color:var(--surface-6);cursor:pointer;align-items:center;gap:var(--spacer-1);padding:var(--spacer-1)var(--spacer-2);background:0 0;border:none;text-decoration:none;transition:color .2s;display:flex;&:hover:not(.is-disabled){color:var(--surface-7)}&.is-active{color:var(--surface-8);font-weight:var(--font-weight-semibold,600)}&.is-disabled{cursor:not-allowed;opacity:.5}}.c-tabs__icon{flex-shrink:0}.c-tabs__label{font-size:var(--font-d)}.c-soundmeter{border:1px solid var(--info-1);height:var(--spacer-1);margin:var(--spacer-1);width:100%;&.vertical{transform:scale(-1)}}.c-button{--btn-bg:var(--btn-color-4,var(--info-6));--btn-text:var(--btn-color-7,var(--info-8));--btn-hover:var(--btn-color-3,var(--info-5));--btn-active:var(--btn-color-2,var(--info-2));--btn-active-hover:var(--btn-color-1,var(--info-1));background:var(--btn-bg);border-radius:var(--spacer-3);color:var(--btn-text);cursor:pointer;font-size:var(--font-s);align-items:center;gap:var(--spacer-1);padding:var(--spacer-1)var(--spacer-2);border:none;font-weight:800;transition:all .1s;display:flex;overflow:hidden;& .label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}&:hover{background:var(--btn-hover)}&.size-s{padding:var(--spacer-05)var(--spacer-1)}&.size-l{padding:var(--spacer-2)var(--spacer-3)}&.type-default{--btn-bg:var(--surface-3);--btn-text:var(--surface-8);--btn-hover:var(--surface-5);--btn-active:var(--surface-2);--btn-active-hover:var(--surface-1)}&.type-warning{--btn-bg:var(--warning-3);--btn-text:var(--warning-5);--btn-hover:var(--warning-5);--btn-active:var(--warning-2);--btn-active-hover:var(--warning-1)}&.type-danger{--btn-bg:var(--danger-3);--btn-text:var(--danger-5);--btn-hover:var(--danger-5);--btn-active:var(--danger-2);--btn-active-hover:var(--danger-1);&.active{background:var(--btn-active);&:hover{background:var(--btn-active-hover)}}}&.type-info{--btn-bg:var(--info-3);--btn-text:var(--info-8);--btn-hover:var(--info-5);--btn-active:var(--info-2);--btn-active-hover:var(--info-1)}&.type-success{--btn-bg:var(--success-3);--btn-text:var(--success-8);--btn-hover:var(--success-5);--btn-active:var(--success-2);--btn-active-hover:var(--success-1);font-weight:600}&.disabled{opacity:.5;&:hover{background:var(--btn-bg);cursor:not-allowed}}&.variant-toggle{aspect-ratio:1;min-width:calc(var(--spacer-1)*4);padding:var(--spacer-1);border-radius:50%;justify-content:center;width:auto;&.size-s{min-width:calc(var(--spacer-1)*3);padding:var(--spacer-05)}& .label{display:none}& .c-icon{display:block}}&.variant-menu{border-bottom:2px solid #0000;border-radius:0;justify-content:center;align-items:center;display:flex;position:relative;&:before{background:var(--btn-active);content:"";transform-origin:0 0;will-change:transform;height:2px;transition:transform .15s;position:absolute;bottom:-2px;left:0;right:0;transform:scaleX(0)}&.active,&:hover{background:var(--btn-hover);&:before{transform:scaleX(1)}}}&.variant-unset{background:0 0;border:none;border-radius:0;padding:0;&:hover{background:0 0}}&.variant-context{align-items:center;gap:var(--spacer-1);min-height:calc(var(--spacer-1)*10);min-width:calc(var(--spacer-1)*14);padding:var(--spacer-2);border-radius:0;flex-direction:column;justify-content:center;& .label{font-size:var(--font-e);text-align:center;white-space:normal;font-weight:500}& .c-icon{width:calc(var(--spacer-1)*4);height:calc(var(--spacer-1)*4);display:block}}& .context-submit{background:var(--surface-3);height:calc(var(--spacer-1)*8);left:calc(var(--spacer-1)*8);z-index:10000;align-items:stretch;min-width:0;transition:min-width .3s;display:flex;position:absolute;& .context-input{height:calc(var(--spacer-1)*8);padding:0 var(--spacer-1);border:none;border-bottom-width:0;display:none;overflow-y:hidden}& .btn-context-submit{background:var(--surface-2);cursor:pointer;visibility:hidden;align-items:center;display:none}&.active{min-width:250px;overflow:hidden;& .context-input{display:block}& .btn-context-submit{visibility:visible;display:inline-flex}}}}.c-chart{& svg{& .line{stroke:var(--brand-primary)}& .chart-area{stroke:var(--border-color)}& .axis-y{fill:var(--text-secondary);font-family:var(--font-family-mono);stroke:none}& .name{fill:var(--text-primary);font-family:var(--font-family-mono);font-size:var(--font-size-xs);stroke:none}}}.c-hint{align-items:center;display:flex;& .icon{margin-inline-end:var(--spacer-1)}& .description{font-size:var(--font-size-sm);font-style:italic}}.c-menu-item{color:var(--surface-6);cursor:pointer;align-items:center;gap:var(--spacer-1);padding:var(--spacer-1);background:0 0;border:none;justify-content:flex-start;width:100%;text-decoration:none;transition:all .3s;display:flex;&.active{background:var(--surface-3);color:var(--surface-8)}&.disabled{cursor:not-allowed;opacity:.5;pointer-events:none}&:hover:not(.disabled):not(.active){background:var(--surface-2)}&.collapsed{padding:var(--spacer-1);justify-content:center;& span{display:none}}& .c-icon{flex-shrink:0;transition:transform .2s}}.c-submenu{gap:var(--spacer-05);margin:0 0 0 var(--spacer-1);opacity:1;flex-direction:column;flex-shrink:0;width:100%;max-height:400px;padding:0;transition:opacity .2s,transform .2s;animation:.2s ease-out submenu-expand;display:flex;overflow:hidden auto;transform:translateY(0);&::-webkit-scrollbar{width:6px}&::-webkit-scrollbar-track{background:0 0}&::-webkit-scrollbar-thumb{background:var(--surface-4);border-radius:3px;&:hover{background:var(--surface-5)}}}@keyframes submenu-expand{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.c-submenu-item-wrapper{flex-direction:column;flex-shrink:0;width:100%;display:flex}.c-submenu--level-1{border-left:1px solid var(--surface-3);margin-bottom:0;margin-left:var(--spacer-4);opacity:.95;max-height:250px;padding-left:var(--spacer-1);margin-top:0;padding-top:0}.c-submenu--level-2{border-left:1px solid var(--surface-2);margin-left:var(--spacer-5);opacity:.9;max-height:200px;padding-left:var(--spacer-1);margin-top:0;padding-top:0}.c-submenu--level-3{border-left:1px solid var(--surface-1);margin-left:var(--spacer-6);opacity:.85;max-height:150px;padding-left:var(--spacer-1);margin-top:0;padding-top:0}.c-submenu-item{border:none;border-left:2px solid var(--surface-3);color:var(--surface-5);cursor:pointer;font-size:var(--font-d);align-items:center;gap:var(--spacer-1);padding:var(--spacer-1)var(--spacer-1);text-align:left;background:0 0;border-radius:0;justify-content:flex-start;width:100%;transition:all .2s;display:flex;&:hover:not(.disabled):not(.active){background:var(--surface-2);border-left-color:var(--primary-4);color:var(--surface-7)}&.active{background:oklch(from var(--primary-5)l c h/.1);border-left-color:var(--primary-5);color:var(--primary-5);font-weight:500}&.nested{border-left-color:var(--surface-2);font-size:var(--font-d);margin-left:var(--spacer-2);padding-left:var(--spacer-1);border-left-width:1px}&.disabled{cursor:not-allowed;opacity:.5;pointer-events:none}&:focus-visible{outline:2px solid var(--primary-5);outline-offset:-2px}}.c-settings.content{background:var(--surface-1);color:var(--surface-7);flex-direction:column;height:100%;display:flex}.c-settings{& .header{background:var(--surface-1);border-bottom:1px solid var(--surface-3);align-items:center;gap:var(--spacer-1);min-height:60px;padding:var(--spacer-2)var(--spacer-3);flex-shrink:0;display:flex;& .notice{flex-shrink:0}& .title{align-items:center;gap:var(--spacer-1);display:flex;& span{color:var(--surface-8);font-size:var(--font-l);margin:0;font-weight:600;line-height:1.2}& .item-icon{color:var(--surface-6);flex-shrink:0}}}& .content{padding:var(--spacer-4)var(--spacer-3);flex-direction:column;flex:1;display:flex;overflow-y:auto}& .tab-content{flex:1}& .actions{gap:var(--spacer-2);margin-top:var(--spacer-2);padding-top:var(--spacer-3);justify-content:flex-end;display:flex}}.c-users-list{padding:var(--spacer-4);& .header{margin-bottom:var(--spacer-4);justify-content:space-between;align-items:center;display:flex;& h2{font-size:var(--font-b);color:var(--text-1);margin:0;font-weight:600}}}.c-channels-form{padding:var(--spacer-3);& .header{margin-bottom:var(--spacer-3);& h2{font-size:var(--font-b);margin:0;font-weight:600}}& .form{gap:var(--spacer-2);flex-direction:column;max-width:600px;display:flex;& .actions{gap:var(--spacer-2);margin-top:var(--spacer-2);display:flex}}}.c-profile-tab{gap:var(--spacer-4);flex-direction:column;display:flex;& .section{gap:var(--spacer-2);flex-direction:column;display:flex}& .section-title{color:var(--surface-7);font-size:var(--font-l);font-weight:var(--font-weight-semibold,600);margin:0}& .theme-toggle{gap:var(--spacer-1);flex-direction:column;display:flex;& label{color:var(--surface-7);font-size:var(--font-d);font-weight:var(--font-weight-semibold,600)}}& .help-text{color:var(--surface-5);font-size:var(--font-s);margin:0}}.c-users-management-tab{gap:var(--spacer-4);flex-direction:column;display:flex;& .header{justify-content:space-between;align-items:center;display:flex;& h2{color:var(--surface-7);font-size:var(--font-l);font-weight:var(--font-weight-semibold,600);margin:0}}& .list{gap:var(--spacer-2);flex-direction:column;display:flex}& .item{background:var(--surface-2);border:1px solid var(--surface-3);border-radius:var(--spacer-1);padding:var(--spacer-2)}& .form{gap:var(--spacer-2);flex-direction:column;display:flex}& .content{justify-content:space-between;align-items:center;display:flex;& h3{color:var(--surface-8);font-size:var(--font-d);font-weight:var(--font-weight-semibold,600);margin:0 0 var(--spacer-1)}& p{color:var(--surface-6);font-size:var(--font-s);margin:0}}& .actions{gap:var(--spacer-1);display:flex}& .create-form{background:var(--surface-2);border:1px solid var(--surface-3);border-radius:var(--spacer-1);padding:var(--spacer-3);& h3{color:var(--surface-7);font-size:var(--font-d);font-weight:var(--font-weight-semibold,600);margin:0 0 var(--spacer-2)}}& .badge{background:var(--info-3);border-radius:var(--spacer-1);color:var(--info-8);font-size:var(--font-s);font-weight:var(--font-weight-semibold,600);padding:var(--spacer-05)var(--spacer-1);display:inline-block}& .empty{color:var(--surface-6);padding:var(--spacer-4);text-align:center}}.c-users-form{padding:var(--spacer-3);& .header{margin-bottom:var(--spacer-3);& h2{font-size:var(--font-b);margin:0;font-weight:600}}& .form{gap:var(--spacer-2);flex-direction:column;max-width:600px;display:flex;& .actions{gap:var(--spacer-2);margin-top:var(--spacer-2);display:flex}}}.c-users-permissions-tab{gap:var(--spacer-2);flex-direction:column;display:flex;& .group{gap:var(--spacer-2);display:flex;&.item{padding:var(--spacer-1)}}& .group-name{flex:1;min-width:150px}& .categories{gap:var(--spacer-1);display:flex}& .category{cursor:pointer;min-width:40px;padding:var(--spacer-1);justify-content:center;align-items:center;display:flex}}.c-settings-tab-users-misc{gap:var(--spacer-2);flex-direction:column;display:flex}.c-channels-list{padding:var(--spacer-4);& .header{margin-bottom:var(--spacer-4);justify-content:space-between;align-items:center;display:flex;& h2{font-size:var(--font-b);color:var(--text-1);margin:0;font-weight:600}}}@keyframes light-1{0%,85%{fill:var(--brand-accent);opacity:0}to{fill:hsl(var(--accent-h)var(--s-3)var(--dl-1));opacity:1}}@keyframes light-2{0%,65%{opacity:0}to{opacity:1}}@keyframes blink{0%{fill:#0000;opacity:.2}50%{fill:hsl(var(--surface-h)var(--s-1)var(--l-2))}52%{fill:hsl(var(--brand-h)var(--s-3)var(--l-2))}60%{fill:hsl(var(--surface-h)var(--s-1)var(--l-2))}65%{fill:hsl(var(--brand-h)var(--s-3)var(--l-2))}70%{fill:hsl(var(--surface-h)var(--s-1)var(--l-2))}75%{fill:hsl(var(--brand-h)var(--s-3)var(--l-2))}80%{fill:hsl(var(--surface-h)var(--s-3)var(--l-2));opacity:.2}83%{fill:hsl(var(--brand-h)var(--s-3)var(--l-2))}85%{fill:hsl(var(--surface-h)var(--s-1)var(--l-2))}87%{fill:hsl(var(--brand-h)var(--s-3)var(--l-2))}to{fill:hsl(var(--brand-h)var(--s-3)var(--l-2));opacity:1}}.dark{fill:hsl(var(--accent-h)var(--s-3)var(--l-2))}.primary{fill:var(--brand-accent)}.logo-animated{& .shard.primary{animation:1.75s ease-in-out light-1}& .shard.dark{animation:1.5s light-2}& .pupil{fill:hsl(var(--accent-h)var(--s-1)var(--l-2));animation:1.5s ease-in-out blink}}.icon-chat-unread-path{color:var(--bg-secondary)}.icon-chat-unread-text{color:var(--bg-secondary);font:600 9px sans-serif}.c-icon{fill:currentColor;outline:none;&.disabled{cursor:not-allowed;opacity:.2}&.type-success{color:var(--success-6)}&.type-warning{color:var(--warning-6)}&.error{color:var(--error-4)}&.icon-xs{height:calc(var(--spacer-1)*1.75);width:calc(var(--spacer-1)*1.75)}&.icon-s{height:calc(var(--spacer-1)*2.5);width:calc(var(--spacer-1)*2.5)}&.icon-d{height:calc(var(--spacer-1)*3.5);width:calc(var(--spacer-1)*3.5)}&.icon-l{width:50px;height:50px}&.icon-xxl{width:100px;height:100px}&.type-default{color:var(--surface-5);&:not(.disabled):hover{color:var(--info-7);cursor:pointer}}&.type-danger{color:var(--danger-5);&.click:not(.disabled):hover{color:var(--danger-7);cursor:pointer}}&.type-info{color:var(--info-5);&.click:not(.disabled):hover{color:var(--info-7);cursor:pointer}}}.icon{fill:currentColor;height:var(--icon-d);width:var(--icon-d);flex-shrink:0;display:inline-block}.icon.success{color:var(--success-6)}.icon.warning{color:var(--warning-6)}.icon.danger{color:var(--danger-6)}.icon.info{color:var(--info-6)}.icon.xs{height:var(--icon-xs);width:var(--icon-xs)}.icon.s{height:var(--icon-s);width:var(--icon-s)}.icon.l{height:var(--icon-l);width:var(--icon-l)}.icon.xl{height:var(--icon-xl);width:var(--icon-xl)}.c-context-select{& .c-field-select{min-width:200px;& .input-container{& .button-wrapper{display:none}& .options{margin:0;position:relative}}}}.c-button-group{gap:var(--spacer-2);width:100%;transition:background .3s;display:flex;&:hover,&.active{background:var(--text-secondary)}& .c-button{flex:1;& .active-group{opacity:.5}}}.c-profile-settings.content{background:var(--surface-1);color:var(--surface-7);flex-direction:column;height:100%;display:flex}.c-profile-settings{& .settings-header{background:var(--surface-1);border-bottom:1px solid var(--surface-3);align-items:center;gap:var(--spacer-1);min-height:60px;padding:var(--spacer-2)var(--spacer-3);flex-shrink:0;display:flex;& .notice{flex-shrink:0}& .title{align-items:center;gap:var(--spacer-1);display:flex;& span{color:var(--surface-8);font-size:var(--font-l);margin:0;font-weight:600;line-height:1.2}& .item-icon{color:var(--surface-6);flex-shrink:0}}}& .settings-content{gap:var(--spacer-4);padding:var(--spacer-4)var(--spacer-3);flex-direction:column;flex:1;display:flex;overflow-y:auto}& .settings-section{gap:var(--spacer-2);flex-direction:column;display:flex;& .section-title{color:var(--surface-7);font-size:var(--font-l);font-weight:var(--font-weight-semibold,600);margin:0}}& .theme-toggle-wrapper{gap:var(--spacer-1);flex-direction:column;display:flex;& label{color:var(--surface-7);font-size:var(--font-d);font-weight:var(--font-weight-semibold,600)}& .help-text{color:var(--surface-5);font-size:var(--font-s);margin:0}}& .settings-actions{gap:var(--spacer-2);margin-top:var(--spacer-2);padding-top:var(--spacer-3);justify-content:flex-end;display:flex}}.field{margin-bottom:var(--spacer-3);& .label{color:var(--surface-8);font-size:var(--font-s);letter-spacing:.01em;margin-bottom:var(--spacer-1);padding-bottom:0;font-weight:600;transition:color .25s cubic-bezier(.4,0,.2,1);& .indicator{color:var(--danger-5);font-size:var(--font-xxs);padding-left:2px;font-weight:600;position:absolute}}& input:not([type=checkbox]):not([type=radio]),& textarea,& select{background:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--border-radius-s);color:var(--input-text);font-family:inherit;font-size:var(--font-d);padding:var(--spacer-1)var(--spacer-2);width:100%;line-height:1.5;transition:all .25s cubic-bezier(.4,0,.2,1);&::placeholder{color:var(--input-placeholder);font-size:var(--font-s);opacity:.6;font-weight:400}&:hover:not(:disabled):not([readonly]){border-color:var(--surface-5);box-shadow:0 1px 3px oklch(0% 0 0/.08)}&:focus{border-color:var(--primary-5);box-shadow:0 0 0 3px var(--primary-2),0 2px 6px oklch(0% 0 0/.12);outline:none}&:disabled{background:var(--input-disabled-bg);border-color:var(--input-disabled-border);color:var(--input-disabled-text);cursor:not-allowed;opacity:.5}&[readonly]{background:var(--input-disabled-bg);border-color:var(--input-disabled-border);cursor:default;opacity:.7}}& input:not([type=checkbox]):not([type=radio]),& select{height:var(--spacer-5)}& textarea{resize:vertical;min-height:80px;line-height:1.5}& select{cursor:pointer;& option{background:var(--input-bg);color:var(--input-text);padding:var(--spacer-1)}}& input[type=number]{max-width:120px}&.is-invalid{& .label,& .label .indicator{color:var(--danger-5)}&.is-touched{& input:not([type=checkbox]):not([type=radio]),& textarea,& select{border-color:var(--danger-5);&:focus{box-shadow:0 0 0 3px var(--danger-1),0 2px 4px var(--danger-2)}}}}& .help,& .validation{font-size:var(--font-xxs);margin-top:var(--spacer-025);padding-top:0;transition:opacity .25s cubic-bezier(.4,0,.2,1)}& .help{color:var(--surface-6);font-size:var(--font-xs);opacity:1;font-style:normal;font-weight:400;line-height:1.4}& .validation{color:var(--danger-5);font-weight:500}}.c-field-radio-group{flex-direction:column;display:flex;& .label{color:var(--surface-8);font-size:var(--font-s);letter-spacing:.01em;margin-bottom:var(--spacer-1);padding-bottom:0;font-weight:600;transition:color .25s cubic-bezier(.4,0,.2,1)}& .options{gap:var(--spacer-1);flex-direction:column;display:flex;& .option{align-items:center;gap:var(--spacer-2);display:flex;& input[type=radio]{appearance:none;background:var(--surface-3);border:1px solid var(--surface-4);cursor:pointer;border-radius:50%;flex-shrink:0;width:20px;height:20px;transition:all .25s cubic-bezier(.4,0,.2,1);position:relative;&:hover:not(:disabled){background:var(--surface-4);border-color:var(--surface-5);box-shadow:0 1px 2px oklch(0% 0 0/.05)}&:focus{border-color:var(--primary-5);box-shadow:0 0 0 3px var(--primary-1);outline:none}&:checked{background:var(--surface-8);border-color:var(--primary-5);box-shadow:0 1px 3px var(--primary-3);&:after{background:var(--primary-5);content:"";border-radius:50%;width:10px;height:10px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}}&:disabled{background:var(--surface-7);border-color:var(--surface-6);cursor:not-allowed;opacity:.5;&:checked:after{background:var(--surface-4)}}}& label{color:var(--surface-7);cursor:pointer;font-size:var(--font-d);user-select:none}& input:checked+label{color:var(--primary-5);font-weight:500}}}&.is-invalid .options .option input[type=radio]{border-color:var(--danger-5);&:focus{box-shadow:0 0 0 3px var(--danger-1),0 1px 3px var(--danger-2)}}}.c-field-textarea{flex-direction:column;display:flex;overflow:auto;& .icon{transition:color .2s;&:hover{color:var(--primary-5);cursor:pointer}&.active{color:var(--primary-5)}}}.c-field-checkbox{flex-direction:row;align-items:center;display:flex;& .wrapper{align-items:center;gap:var(--spacer-2);flex-direction:row;width:100%;display:flex;& label.label{color:var(--surface-7);cursor:pointer;font-size:var(--font-d);user-select:none;margin-bottom:0}}& input[type=checkbox]{appearance:none;background:var(--surface-2);border:1px solid var(--surface-3);border-radius:var(--border-radius-xs);cursor:pointer;flex-shrink:0;width:20px;height:20px;transition:all .25s cubic-bezier(.4,0,.2,1);position:relative;&:hover:not(:disabled){background:var(--surface-8);border-color:var(--surface-5);box-shadow:0 1px 2px oklch(0% 0 0/.05)}&:focus{border-color:var(--primary-5);box-shadow:0 0 0 3px var(--primary-1);outline:none}&:checked{background:var(--primary-5);border-color:var(--primary-5);box-shadow:0 1px 3px var(--primary-3);&:after{border:solid var(--white);content:"";border-width:0 2px 2px 0;width:5px;height:10px;position:absolute;top:2px;left:6px;transform:rotate(42deg)}}&:disabled{background:var(--surface-7);border-color:var(--surface-6);cursor:not-allowed;opacity:.5;&:checked{background:var(--surface-4);box-shadow:none}}}&.is-invalid input[type=checkbox]{border-color:var(--danger-5);&:focus{box-shadow:0 0 0 3px var(--danger-1),0 1px 3px var(--danger-2)}}}.c-field-number{flex-direction:column;display:flex}.c-field-slider{height:var(--spacer-6);outline:none;justify-content:center;align-items:center;display:flex;overflow:hidden;& .track{background:var(--surface-2);border:1px solid var(--surface-3);border-radius:var(--border-radius-s);height:var(--spacer-6);width:8px;transition:all .2s;position:relative;overflow:visible;&:hover{background:var(--surface-3);cursor:ns-resize}}& .thumb{background:var(--primary-5);border:2px solid var(--white);height:var(--spacer-2);margin-left:calc(-1*var(--spacer-05));width:var(--spacer-2);border-radius:50%;transition:all .2s;position:absolute;box-shadow:0 2px 4px #00000026;&:hover{transform:scale(1.1);box-shadow:0 2px 6px #00000040}}& .icon.locked{color:var(--primary-5);margin-inline-start:-3px;z-index:1000;margin-bottom:-18px;transition:color .2s;position:absolute;bottom:0;&:hover{color:var(--primary-6);cursor:pointer}}&.active{& .track{background:var(--primary-2);border-color:var(--primary-3)}& .thumb{background:var(--primary-6);box-shadow:0 0 0 3px var(--primary-1)}}&:focus-within .track{border-color:var(--primary-5);box-shadow:0 0 0 3px var(--primary-1)}}.c-field-checkbox-group{flex-direction:column;display:flex;& .label{color:var(--surface-8);font-size:var(--font-s);letter-spacing:.01em;margin-bottom:var(--spacer-1);padding-bottom:0;font-weight:600;transition:color .25s cubic-bezier(.4,0,.2,1)}& .options{gap:var(--spacer-1);flex-direction:column;display:flex}& .c-field-checkbox{height:20px;margin-top:0!important;margin-bottom:0!important;padding:0!important;& .wrapper{gap:var(--spacer-2)}}}.c-field-upload{flex-direction:column;display:flex;& .upload-wrapper{width:100%;position:relative;& input[type=file]{cursor:pointer;opacity:0;z-index:2;width:100%;height:100%;position:absolute;top:0;left:0;&:disabled{cursor:not-allowed}&:focus+.file-path{border-color:var(--primary-5);box-shadow:0 0 0 3px var(--primary-2),0 2px 6px oklch(0% 0 0/.12)}}& .file-path{background:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--border-radius-s);color:var(--input-text);font-family:inherit;font-size:var(--font-d);height:var(--spacer-5);padding:var(--spacer-1)var(--spacer-2);align-items:center;width:100%;line-height:1.5;transition:all .25s cubic-bezier(.4,0,.2,1);display:flex;&[data-empty=true]:after{color:var(--input-placeholder);content:attr(data-placeholder);font-size:var(--font-s);opacity:.6;font-weight:400}&:hover{border-color:var(--surface-5);box-shadow:0 1px 3px oklch(0% 0 0/.08)}}&:has(input:disabled) .file-path{background:var(--input-disabled-bg);border-color:var(--input-disabled-border);color:var(--input-disabled-text);cursor:not-allowed;opacity:.5}}&.is-invalid .upload-wrapper .file-path{border-color:var(--danger-5)}&.is-invalid .upload-wrapper input[type=file]:focus+.file-path{box-shadow:0 0 0 3px var(--danger-1),0 2px 4px var(--danger-2)}}.c-field-select{flex-direction:column;min-width:120px;max-width:250px;display:flex}.c-field-multiselect{flex-direction:column;display:flex;& .label-container{& .field-label{color:var(--surface-7);font-size:var(--font-xs);letter-spacing:.02em;margin-bottom:var(--spacer-05);padding-bottom:0;font-weight:500;transition:color .25s cubic-bezier(.4,0,.2,1)}}& select[multiple]{background:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--border-radius-s);color:var(--input-text);font-family:inherit;font-size:var(--font-d);min-height:96px;padding:var(--spacer-1)var(--spacer-2);width:100%;transition:all .25s cubic-bezier(.4,0,.2,1);&:hover:not(:disabled){border-color:var(--surface-5);box-shadow:0 1px 2px oklch(0% 0 0/.05)}&:focus{border-color:var(--primary-5);box-shadow:0 0 0 3px var(--primary-2),0 2px 4px oklch(0% 0 0/.08);outline:none}&:disabled{background:var(--input-disabled-bg);border-color:var(--input-disabled-border);color:var(--input-disabled-text);cursor:not-allowed;opacity:.5}& option{background:var(--input-bg);color:var(--input-text);padding:var(--spacer-05)var(--spacer-1)}& option:checked{background:var(--primary-5);color:var(--white)}}&.is-invalid{& .label-container .field-label{color:var(--danger-5)}& select[multiple]{border-color:var(--danger-5);&:focus{box-shadow:0 0 0 3px var(--danger-1),0 2px 4px var(--danger-2)}}}}.c-field-text{flex-direction:column;flex:1;max-width:500px;display:flex;& .field-wrapper{flex:1;height:100%;display:flex;& input{z-index:1000}& .c-button{border-radius:0 var(--border-radius-s)var(--border-radius-s)0;height:32px;margin-left:calc(-1*var(--border-radius-s));padding:0 var(--spacer-1);& svg{color:var(--surface-6);height:16px;transition:color .2s}&:hover svg{color:var(--primary-5)}}}}:root{--l-0:.12;--l-1:.16;--l-2:.22;--l-3:.32;--l-4:.45;--l-5:.6;--l-6:.72;--l-7:.84;--l-8:.96;--c-0:.015;--c-1:.02;--c-2:.025;--c-3:.032;--c-4:.04;--c-5:.05;--c-6:.055;--c-7:.07;--c-8:.09;--c-9:.11;--c-10:.13;--h-surface:230;--h-primary:230;--h-success:140;--h-danger:15;--h-warning:60;--surface-0:oklch(var(--l-0)var(--c-0)var(--h-surface));--surface-1:oklch(var(--l-1)var(--c-1)var(--h-surface));--surface-2:oklch(var(--l-2)var(--c-2)var(--h-surface));--surface-3:oklch(var(--l-3)var(--c-3)var(--h-surface));--surface-4:oklch(var(--l-4)var(--c-4)var(--h-surface));--surface-5:oklch(var(--l-5)var(--c-5)var(--h-surface));--surface-6:oklch(var(--l-6)var(--c-4)var(--h-surface));--surface-7:oklch(var(--l-7)var(--c-3)var(--h-surface));--surface-8:oklch(var(--l-8)var(--c-1)var(--h-surface));--primary-0:oklch(var(--l-0)var(--c-6)var(--h-primary));--primary-1:oklch(var(--l-1)var(--c-6)var(--h-primary));--primary-2:oklch(var(--l-2)var(--c-7)var(--h-primary));--primary-3:oklch(var(--l-3)var(--c-7)var(--h-primary));--primary-4:oklch(var(--l-4)var(--c-8)var(--h-primary));--primary-5:oklch(var(--l-5)var(--c-7)var(--h-primary));--primary-6:oklch(var(--l-6)var(--c-6)var(--h-primary));--primary-7:oklch(var(--l-7)var(--c-6)var(--h-primary));--primary-8:oklch(var(--l-8)var(--c-2)var(--h-primary));--success-0:oklch(var(--l-0)var(--c-6)var(--h-success));--success-1:oklch(var(--l-1)var(--c-7)var(--h-success));--success-2:oklch(var(--l-2)var(--c-7)var(--h-success));--success-3:oklch(var(--l-3)var(--c-8)var(--h-success));--success-4:oklch(var(--l-4)var(--c-9)var(--h-success));--success-5:oklch(var(--l-5)var(--c-7)var(--h-success));--success-6:oklch(var(--l-6)var(--c-7)var(--h-success));--success-7:oklch(var(--l-7)var(--c-6)var(--h-success));--success-8:oklch(var(--l-8)var(--c-6)var(--h-success));--danger-0:oklch(var(--l-0)var(--c-8)var(--h-danger));--danger-1:oklch(var(--l-1)var(--c-9)var(--h-danger));--danger-2:oklch(var(--l-2)var(--c-9)var(--h-danger));--danger-3:oklch(var(--l-3)var(--c-10)var(--h-danger));--danger-4:oklch(var(--l-4)var(--c-10)var(--h-danger));--danger-5:oklch(var(--l-5)var(--c-9)var(--h-danger));--danger-6:oklch(var(--l-6)var(--c-7)var(--h-danger));--danger-7:oklch(var(--l-7)var(--c-7)var(--h-danger));--danger-8:oklch(var(--l-8)var(--c-6)var(--h-danger));--warning-0:oklch(var(--l-0)var(--c-7)var(--h-warning));--warning-1:oklch(var(--l-1)var(--c-7)var(--h-warning));--warning-2:oklch(var(--l-2)var(--c-8)var(--h-warning));--warning-3:oklch(var(--l-3)var(--c-9)var(--h-warning));--warning-4:oklch(var(--l-4)var(--c-10)var(--h-warning));--warning-5:oklch(var(--l-5)var(--c-8)var(--h-warning));--warning-6:oklch(var(--l-6)var(--c-7)var(--h-warning));--warning-7:oklch(var(--l-7)var(--c-6)var(--h-warning));--warning-8:oklch(var(--l-8)var(--c-6)var(--h-warning));--black:oklch(0% 0 0);--white:oklch(100% 0 0);--spacer-1:8px;--spacer-025:calc(var(--spacer-1)*.25);--spacer-05:calc(var(--spacer-1)*.5);--spacer-2:calc(var(--spacer-1)*2);--spacer-3:calc(var(--spacer-1)*3);--spacer-4:calc(var(--spacer-1)*4);--spacer-5:calc(var(--spacer-1)*5);--spacer-6:calc(var(--spacer-1)*6);--spacer-7:calc(var(--spacer-1)*7);--spacer-8:calc(var(--spacer-1)*8);--spacer-15:calc(var(--spacer-1)*15);--font-xxs:.61rem;--font-xs:.74rem;--font-s:.8rem;--font-d:.9rem;--font-l:1.05rem;--font-xl:1.3rem;--font-xxl:3rem;--icon-xs:calc(var(--spacer-1)*1.75);--icon-s:calc(var(--spacer-1)*2);--icon-m:calc(var(--spacer-1)*2.5);--icon-d:var(--spacer-3);--icon-l:var(--spacer-4);--icon-xl:calc(var(--spacer-1)*4.5);--border-radius-xs:var(--spacer-05);--border-radius-s:var(--spacer-05);--border-radius-d:var(--spacer-1);--border-radius-l:calc(var(--spacer-1)*1.5);--border-radius-xl:var(--spacer-2);--shadow-soft:0 2px var(--spacer-2)oklch(var(--l-1)var(--c-2)var(--h-surface)/.15);--shadow-d:0 4px var(--spacer-1)oklch(var(--l-0)var(--c-2)var(--h-surface)/.25);--shadow-hard:0 8px var(--spacer-3)oklch(var(--l-0)var(--c-2)var(--h-surface)/.35);--panel-width:450px;--panel-context-width:600px;--panel-collapsed-width:calc(var(--spacer-6) + var(--spacer-05));--breakpoint-sm:500px;--breakpoint-md:750px;--breakpoint-lg:1400px;--breakpoint-xl:1550px;--breakpoint-xxl:1920px;--input-height:32px;--input-bg:var(--surface-1);--input-border:var(--surface-3);--input-text:var(--surface-7);--input-placeholder:var(--surface-5);--input-label:var(--surface-7);--input-margin:var(--spacer-3);--input-disabled-bg:var(--surface-3);--input-disabled-text:var(--surface-5);--input-disabled-border:var(--surface-4);--validation-default:1px solid var(--surface-4);--validation-valid:1px solid var(--success-3);--validation-invalid:1px solid var(--danger-3);--focus-outline:1px solid var(--primary-4);--focus-outline-invalid:var(--danger-2);--table-header-bg:var(--primary-8);--table-header-text:var(--primary-2);--table-header-height:var(--spacer-6);--info-0:var(--primary-0);--info-1:var(--primary-1);--info-2:var(--primary-2);--info-3:var(--primary-3);--info-4:var(--primary-4);--info-5:var(--primary-5);--info-6:var(--primary-6);--info-7:var(--primary-7);--info-8:var(--primary-8)}:root.light{--h-surface:240;--c-0:.01;--c-1:.015;--c-2:.02;--l-0:.98;--l-1:.96;--l-2:.92;--l-3:.75;--l-4:.55;--l-5:.45;--l-6:.32;--l-7:.2;--l-8:.18;--input-bg:var(--surface-1);--input-text:var(--surface-8);--input-border:var(--surface-3);--input-placeholder:var(--surface-5);--input-label:var(--surface-8);--input-disabled-bg:var(--surface-2);--input-disabled-text:var(--surface-5);--input-disabled-border:var(--surface-3);--shadow-soft:0 2px var(--spacer-2)oklch(var(--l-7)var(--c-2)var(--h-surface)/.15);--shadow-d:0 4px var(--spacer-1)oklch(var(--l-8)var(--c-2)var(--h-surface)/.25);--shadow-hard:0 8px var(--spacer-3)oklch(var(--l-8)var(--c-2)var(--h-surface)/.35);--table-header-bg:var(--primary-1);--table-header-text:var(--primary-7);--white:oklch(100% 0 0)}.mt-1{margin-top:var(--spacer-1)}.mt-2{margin-top:var(--spacer-2)}.mt-3{margin-top:var(--spacer-3)}.mt-4{margin-top:var(--spacer-4)}.mt-5{margin-top:var(--spacer-5)}.mb-1{margin-bottom:var(--spacer-1)}.mb-2{margin-bottom:var(--spacer-2)}.mb-3{margin-bottom:var(--spacer-3)}.mb-4{margin-bottom:var(--spacer-4)}.mb-5{margin-bottom:var(--spacer-5)}.ml-1{margin-inline-start:var(--spacer-1)}.ml-2{margin-inline-start:var(--spacer-2)}.ml-3{margin-inline-start:var(--spacer-3)}.ml-4{margin-inline-start:var(--spacer-4)}.ml-5{margin-inline-start:var(--spacer-5)}.mr-1{margin-inline-end:var(--spacer-1)}.mr-2{margin-inline-end:var(--spacer-2)}.mr-3{margin-inline-end:var(--spacer-3)}.mr-4{margin-inline-end:var(--spacer-4)}.mr-5{margin-inline-end:var(--spacer-5)}html,body{background:var(--surface-1);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:var(--font-d);height:100vh;margin:0;padding:0;line-height:1.6}html[data-hmr-updating=true] *,html[data-hmr-updating=true] :before,html[data-hmr-updating=true] :after,body[data-hmr-updating=true] *,body[data-hmr-updating=true] :before,body[data-hmr-updating=true] :after{transition:none!important;animation:none!important}html.hmr-complete *,html.hmr-complete :before,html.hmr-complete :after,body.hmr-complete *,body.hmr-complete :before,body.hmr-complete :after{animation:none!important}html[data-hmr-updating=true] .fade-in,body[data-hmr-updating=true] .fade-in,html.hmr-complete .fade-in,body.hmr-complete .fade-in{opacity:1}*{box-sizing:border-box}.fade-in{opacity:0;animation:.2s ease-in forwards fade-in}.card{background:oklch(from var(--surface-2)l c h/.8);border:1px solid var(--surface-2);border-radius:var(--border-radius-l);box-shadow:0 0 var(--spacer-2)var(--spacer-1)oklch(from var(--surface-0)l c h/.3);padding:var(--spacer-4)}.card--solid{background:var(--surface-2)}.card--transparent{background:oklch(from var(--surface-2)l c h/.6)}.card__header{align-items:center;gap:var(--spacer-2);padding:var(--spacer-2)0;flex-direction:column;justify-content:center;display:flex}.card__title{color:var(--surface-8);font-size:var(--font-xl);font-weight:500}.card__content{color:var(--surface-7)}.card__footer{margin-top:var(--spacer-4)}.container{background-color:var(--surface-1);gap:var(--spacer-1);padding:var(--spacer-1);flex-direction:column;display:flex}.container__section{background:var(--surface-2);border:1px solid var(--surface-3);padding:var(--spacer-1)}.list-container{background:var(--surface-1);border:1px solid var(--surface-3);flex-direction:column;display:flex}.list-container__item{color:var(--surface-5);cursor:pointer;padding:var(--spacer-05)var(--spacer-1);transition:all .2s}.list-container__item:hover{background:var(--surface-2);color:var(--surface-7)}.list-container__item--active{background:var(--surface-3);color:var(--surface-8)}.form{gap:var(--spacer-3);flex-direction:column;display:flex}.form__field{margin-bottom:var(--spacer-3)}.form__label{color:var(--surface-5);font-size:var(--font-s);margin-bottom:var(--spacer-1);display:block}.form__input{background:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--border-radius-s);color:var(--input-text);font-size:var(--font-d);height:var(--input-height);padding:0 var(--spacer-2);width:100%;transition:all .2s}.form__input:focus{border-color:var(--primary-4);outline:none}.form__input::placeholder{color:var(--input-placeholder)}.form__input:disabled{background:var(--input-disabled-bg);border-color:var(--input-disabled-border);color:var(--input-disabled-text);cursor:not-allowed}.form__textarea{min-height:calc(var(--input-height)*3);padding:var(--spacer-1)var(--spacer-2);resize:vertical}.form__select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 9L1 4h10z'/%3E%3C/svg%3E");background-position:right var(--spacer-1)center;cursor:pointer;padding-right:var(--spacer-4);background-repeat:no-repeat}.form__input-group{gap:var(--spacer-1);display:flex}.form__input-group .form__input{flex:1}.form__field--with-button{position:relative}.form__field--with-button button{background:var(--surface-2);border-radius:var(--border-radius-xs);height:calc(var(--input-height) - var(--spacer-2));right:var(--spacer-1);width:var(--spacer-4);border:none;position:absolute;top:50%;transform:translateY(-50%)}.form__help{color:var(--surface-5);font-size:var(--font-xs);margin-top:var(--spacer-05)}.form__field--error .form__input{border-color:var(--danger-4)}.form__error{color:var(--danger-6);font-size:var(--font-xs);margin-top:var(--spacer-05)}.form__field--success .form__input{border-color:var(--success-4)}.form__fieldset{border:1px solid var(--surface-3);border-radius:var(--border-radius-s);margin-bottom:var(--spacer-3);padding:var(--spacer-2)}.form__legend{color:var(--surface-6);font-size:var(--font-l);padding:0 var(--spacer-1);font-weight:500}.panel{background:oklch(from var(--surface-1)l c h/.8);border-right:1px solid var(--surface-2);box-shadow:0 0 var(--spacer-2)var(--spacer-1)oklch(from var(--surface-0)l c h/.4);opacity:0;flex-direction:column;animation:.2s ease-in forwards fade-in;display:flex}.panel--left{border-right:1px solid var(--surface-2)}.panel--right{border-left:1px solid var(--surface-2);border-right:none}.panel--top{border-bottom:1px solid var(--surface-2);border-right:none}.panel--bottom{border-right:none;border-top:1px solid var(--surface-2)}.panel__section{background:var(--surface-1);flex:1;width:100%}.panel__header{background:var(--surface-1);align-items:center;gap:var(--spacer-1);padding:var(--spacer-05)var(--spacer-1);justify-content:flex-start;display:flex}.panel__title{color:var(--surface-8);letter-spacing:.01em;font-size:1.125rem;font-weight:500}.panel__nav a{color:var(--surface-6);align-items:center;gap:var(--spacer-1);padding:var(--spacer-1);justify-content:flex-start;width:100%;text-decoration:none;transition:all .3s;display:flex}.panel__nav a:hover{background:var(--surface-2)}.panel__nav a.active{background:var(--surface-3);color:var(--surface-8)}.panel__actions{gap:var(--spacer-1);padding:var(--spacer-1);width:100%;display:flex}.panel__footer{color:var(--surface-6);padding:var(--spacer-1);width:100%}.panel--collapsed{max-width:0;overflow:hidden}.btn{border-radius:var(--border-radius-s);cursor:pointer;font-size:var(--font-d);align-items:center;gap:var(--spacer-1);height:var(--input-height);padding:0 var(--spacer-2);user-select:none;border:none;justify-content:center;font-weight:400;transition:all .2s;display:inline-flex}.btn:disabled{cursor:not-allowed;opacity:.5}.btn--primary{background:var(--primary-5);color:var(--primary-8)}.btn--primary:hover:not(:disabled){background:var(--primary-6)}.btn--primary:active:not(:disabled){background:var(--primary-4)}.btn--secondary{background:var(--surface-2);color:var(--surface-7)}.btn--secondary:hover:not(:disabled){background:var(--surface-3)}.btn--secondary:active:not(:disabled){background:var(--surface-1)}.btn--success{background:var(--success-5);color:var(--success-8)}.btn--success:hover:not(:disabled){background:var(--success-6)}.btn--danger{background:var(--danger-5);color:var(--danger-8)}.btn--danger:hover:not(:disabled){background:var(--danger-6)}.btn--warning{background:var(--warning-5);color:var(--warning-8)}.btn--warning:hover:not(:disabled){background:var(--warning-6)}.btn--ghost{border:1px solid var(--surface-4);color:var(--surface-6);background:0 0}.btn--ghost:hover:not(:disabled){background:var(--surface-2);border-color:var(--surface-5)}.btn--outline{background:0 0;border:1px solid}.btn--outline:hover:not(:disabled){background:oklch(from currentColor l c h/.1)}.btn--icon{aspect-ratio:1;padding:var(--spacer-1);width:var(--icon-xl);border-radius:50%}.btn--icon-sm{padding:var(--spacer-05);width:var(--icon-d)}.btn--sm{font-size:var(--font-s);height:calc(var(--input-height)*.75);padding:0 var(--spacer-1)}.btn--lg{font-size:var(--font-l);height:calc(var(--input-height)*1.5);padding:0 var(--spacer-4)}.btn--block{width:100%}.btn-group{gap:var(--spacer-1);display:flex}.btn-group .btn{flex:1}.icon-btn{background:var(--surface-3);border:1px solid var(--surface-4);cursor:pointer;height:var(--icon-xl);width:var(--icon-xl);border-radius:50%;padding:6px;transition:all .3s}.icon-btn:hover{background:var(--surface-4)}.toolbar-btn{background:var(--surface-1);color:var(--surface-6);cursor:pointer;align-items:center;gap:var(--spacer-05);height:var(--spacer-5);padding:0 var(--spacer-2);border:none;justify-content:center;transition:background .2s;display:flex}.toolbar-btn:hover{background:var(--surface-2)}.toolbar-btn:active{background:var(--surface-3)}.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{background-color:var(--info-6);color:var(--info-2);white-space:normal;border-radius:4px;outline:0;font-size:14px;line-height:1.4;transition-property:transform,visibility,opacity;position:relative}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{border-top-color:initial;transform-origin:top;border-width:8px 8px 0;bottom:-7px;left:0}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{border-bottom-color:initial;transform-origin:bottom;border-width:0 8px 8px;top:-7px;left:0}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-left-color:initial;transform-origin:0;border-width:8px 0 8px 8px;right:-7px}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{border-right-color:initial;transform-origin:100%;border-width:8px 8px 8px 0;left:-7px}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{color:var(--info-6);width:16px;height:16px}.tippy-arrow:before{content:"";border-style:solid;border-color:#0000;position:absolute}.tippy-content{z-index:1;padding:5px 9px;position:relative}.c-markdown-page{color:var(--surface-7);max-width:900px;padding:var(--spacer-6);width:100%;line-height:1.7;@media (width<=768px){overflow-wrap:break-word;max-width:100%;padding:var(--spacer-3)var(--spacer-2);word-wrap:break-word;width:100%;overflow-x:hidden}}.c-markdown-page h1{border-bottom:1px solid var(--surface-3);color:var(--surface-8);font-size:var(--font-xxl);margin:var(--spacer-6)0 var(--spacer-3)0;overflow-wrap:break-word;padding-bottom:var(--spacer-2);word-wrap:break-word;font-weight:700;line-height:1.2;@media (width<=768px){font-size:var(--font-xl);margin:var(--spacer-2)0 var(--spacer-2)0}}.c-markdown-page h2{color:var(--surface-8);font-size:var(--font-xl);margin:var(--spacer-5)0 var(--spacer-2)0;overflow-wrap:break-word;padding-top:var(--spacer-3);word-wrap:break-word;font-weight:600;line-height:1.3;@media (width<=768px){font-size:var(--font-l)}}.c-markdown-page h3{color:var(--surface-8);font-size:var(--font-l);margin:var(--spacer-4)0 var(--spacer-2)0;overflow-wrap:break-word;word-wrap:break-word;font-weight:600;line-height:1.4}.c-markdown-page h4{color:var(--surface-7);font-size:var(--font-d);margin:var(--spacer-3)0 var(--spacer-1)0;overflow-wrap:break-word;word-wrap:break-word;font-weight:600;line-height:1.4}.c-markdown-page h5,.c-markdown-page h6{color:var(--surface-7);font-size:var(--font-d);margin:var(--spacer-2)0 var(--spacer-1)0;overflow-wrap:break-word;word-wrap:break-word;font-weight:600;line-height:1.4}.c-markdown-page p{color:var(--surface-7);margin:var(--spacer-2)0;overflow-wrap:break-word;word-wrap:break-word}.c-markdown-page a{color:var(--primary-4);overflow-wrap:break-word;word-wrap:break-word;text-decoration:none;transition:color .2s}.c-markdown-page a:hover{color:var(--primary-3);text-decoration:underline}.c-markdown-page a:visited{color:var(--primary-5)}.c-markdown-page ul,.c-markdown-page ol{color:var(--surface-7);margin:var(--spacer-2)0;overflow-wrap:break-word;padding-left:var(--spacer-4);word-wrap:break-word;@media (width<=768px){padding-left:var(--spacer-2)}}.c-markdown-page li{margin:var(--spacer-1)0;overflow-wrap:break-word;word-wrap:break-word;line-height:1.6}.c-markdown-page li p{margin:var(--spacer-1)0}.c-markdown-page code{background-color:var(--surface-2);border:1px solid var(--surface-3);border-radius:var(--border-radius-s);color:var(--primary-5);overflow-wrap:break-word;word-wrap:break-word;padding:.2em .4em;font-family:Fira Code,Consolas,Monaco,monospace;font-size:.9em}.c-markdown-page pre{background-color:var(--surface-1);border:1px solid var(--surface-3);border-radius:var(--border-radius-d);color:var(--surface-8);font-family:Fira Code,Consolas,Monaco,monospace;font-size:var(--font-s);margin:var(--spacer-3)0;overflow-wrap:break-word;padding:var(--spacer-3);word-wrap:break-word;line-height:1.6;overflow-x:auto;@media (width<=768px){padding:var(--spacer-2);font-size:.85em}}.c-markdown-page pre code{color:inherit;font-size:inherit;background:0 0;border:none;padding:0}.c-markdown-page blockquote{background-color:var(--surface-1);border-left:4px solid var(--primary-4);border-radius:var(--border-radius-s);color:var(--surface-4);margin:var(--spacer-3)0;overflow-wrap:break-word;padding:var(--spacer-05)var(--spacer-2);word-wrap:break-word;font-style:italic;@media (width<=768px){padding:var(--spacer-2);margin-left:0;margin-right:0}}.c-markdown-page table{border-collapse:collapse;margin:var(--spacer-3)0;overflow-wrap:break-word;word-wrap:break-word;width:100%;@media (width<=768px){-webkit-overflow-scrolling:touch;display:block;overflow-x:auto}}.c-markdown-page th{background-color:var(--surface-2);border:1px solid var(--surface-3);color:var(--surface-8);overflow-wrap:break-word;padding:var(--spacer-2);text-align:left;word-wrap:break-word;font-weight:600;@media (width<=768px){padding:var(--spacer-1)var(--spacer-05);font-size:.9em}}.c-markdown-page td{border:1px solid var(--surface-3);color:var(--surface-7);overflow-wrap:break-word;padding:var(--spacer-2);word-wrap:break-word;@media (width<=768px){padding:var(--spacer-1)var(--spacer-05);font-size:.9em}}.c-markdown-page tr:nth-child(2n){background-color:var(--surface-1)}.c-markdown-page hr{border:none;border-top:1px solid var(--surface-3);margin:var(--spacer-4)0}.c-markdown-page img{border-radius:var(--border-radius-d);height:auto;margin:var(--spacer-3)0;max-width:100%}.c-markdown-page a img{vertical-align:middle;margin:0;display:inline-block}.c-markdown-page a:hover img{opacity:.9}.c-markdown-page p:has(>a:only-child>img),.c-markdown-page p:has(>a:only-child img){margin:0;display:inline}.c-markdown-page p:has(>a:only-child>img)+p:has(>a:only-child>img),.c-markdown-page p:has(>a:only-child img)+p:has(>a:only-child img){margin-left:var(--spacer-1)}.c-markdown-page strong{color:var(--surface-8);font-weight:600}.c-markdown-page em{color:var(--surface-7);font-style:italic}.c-markdown-page h1+p,.c-markdown-page h2+p,.c-markdown-page h3+p{color:var(--surface-6);font-size:var(--font-l);margin-top:var(--spacer-2);overflow-wrap:break-word;word-wrap:break-word}.c-markdown-page .mermaid{background-color:var(--surface-1);border:1px solid var(--surface-3);border-radius:var(--border-radius-d);margin:var(--spacer-4)0;padding:var(--spacer-4);text-align:center;overflow-x:auto}.c-markdown-page .mermaid svg{max-width:100%;height:auto}@media (width<=768px){.c-markdown-page .mermaid{margin:var(--spacer-3)0;padding:var(--spacer-2)}}.c-components{& .icon-grid{gap:var(--spacer-1);grid-template-columns:repeat(auto-fill,minmax(70px,1fr));display:grid;& .item{background:var(--surface-1);border:1px solid var(--surface-6);border-radius:var(--border-radius-d);padding:var(--spacer-2);flex-direction:column;align-items:center;transition:all .2s;display:flex;&:hover{border-color:var(--primary-5);box-shadow:var(--shadow-soft);transform:translateY(-2px)}& svg,& .icon{height:var(--spacer-5);width:var(--spacer-5)}}& .label{color:var(--surface-2);font-size:var(--font-s);margin-top:var(--spacer-2);text-align:center;word-break:break-word;font-weight:500}}}.form-demo{background:var(--surface-2);border:1px solid var(--surface-3);border-radius:var(--border-radius-l);box-shadow:var(--shadow-soft);margin:var(--spacer-6)0;max-width:1200px;position:relative;overflow:hidden}.form{padding:var(--spacer-5)}.form-section{border:none;border-bottom:1px solid var(--surface-4);margin-bottom:var(--spacer-4);padding-bottom:var(--spacer-3);background:0 0;border-radius:0;transition:none;position:relative;overflow:visible;&:first-child{animation-delay:.1s}&:nth-child(2){animation-delay:.2s}&:nth-child(3){animation-delay:.3s}&:nth-child(4){animation-delay:.4s}&:last-of-type{border-bottom:none}&:hover{box-shadow:none;border-color:#0000;transform:none}& .header{border-bottom:1px solid var(--surface-4);color:var(--primary-5);font-size:var(--font-d);margin:0 0 var(--spacer-2)0;padding:0 0 var(--spacer-1)0;background:0 0;font-weight:600;position:relative;&:after{display:none}}& .content{padding:0}}.form-row{gap:var(--spacer-2);margin-bottom:var(--spacer-3);grid-template-columns:1fr 1fr;display:grid}.form-row:last-child{margin-bottom:0}.form-actions{background:var(--surface-2);border-top:1px solid var(--surface-3);gap:var(--spacer-2);margin:var(--spacer-4)calc(-1*var(--spacer-5))calc(-1*var(--spacer-5));padding:var(--spacer-3)var(--spacer-5);justify-content:flex-end;display:flex}.form-slider-container{align-items:center;gap:var(--spacer-2);flex-direction:column;justify-content:center;min-height:100px;display:flex;position:relative}.form-actions .button-group{gap:var(--spacer-2);display:flex}.form-actions .button{min-width:120px}.validation-state{background:oklch(.98 .002 var(--h-surface));border:1px solid var(--surface-6);border-radius:var(--border-radius-s);margin-top:var(--spacer-6);padding:var(--spacer-4);& .title{color:var(--surface-2);font-size:var(--font-l);margin:0 0 var(--spacer-3)0;font-weight:600}& .content{gap:var(--spacer-3);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));display:grid}& .item{gap:var(--spacer-2);display:flex}& .label{color:var(--surface-3);font-size:var(--font-s);font-weight:600}& .value{color:var(--surface-2);font-size:var(--font-s);&.valid{color:var(--success-5)}&.invalid{color:var(--danger-5)}}& .errors{color:var(--danger-5);font-size:var(--font-s);margin:var(--spacer-2)0 0 0;padding:0;list-style:none;& li{margin-bottom:var(--spacer-1)}}}@media (width<=768px){.form-demo{margin:var(--spacer-2)0}.form{padding:var(--spacer-4)}.form-section{margin-bottom:var(--spacer-4);padding:var(--spacer-3);& .header{font-size:var(--font-d);margin:calc(-1*var(--spacer-3))calc(-1*var(--spacer-3))var(--spacer-3)calc(-1*var(--spacer-3));padding:var(--spacer-2)var(--spacer-3)}}.form-row{gap:var(--spacer-2);margin-bottom:var(--spacer-2);grid-template-columns:1fr}.form-slider-container{min-height:80px}.validation-state{margin-top:var(--spacer-4);padding:var(--spacer-3);& .grid{gap:var(--spacer-1);grid-template-columns:1fr}& .item,& .field{gap:var(--spacer-1);text-align:center;flex-direction:column}}}@media (width<=480px){.form{padding:var(--spacer-3)}.form-section{padding:var(--spacer-2);& .header{font-size:var(--font-s);margin:calc(-1*var(--spacer-2))calc(-1*var(--spacer-2))var(--spacer-2)calc(-1*var(--spacer-2));padding:var(--spacer-1)var(--spacer-2)}}.validation-state{padding:var(--spacer-2)}}.c-tokens{& h2{color:var(--surface-7);font-size:var(--font-xl);margin-bottom:var(--spacer-3);margin-top:0;font-weight:600}& h3{color:var(--surface-6);font-size:var(--font-l);margin-bottom:var(--spacer-2);margin-top:var(--spacer-4);font-weight:600}& .token-section{background:var(--surface-2);border:1px solid var(--surface-3);border-radius:var(--border-radius-l);box-shadow:0 2px 8px oklch(from var(--surface-0)l c h/.1);margin-bottom:var(--spacer-6);padding:var(--spacer-5)}& .color-grid{gap:var(--spacer-3);margin-bottom:var(--spacer-4);grid-template-columns:repeat(auto-fill,minmax(100px,1fr));display:grid}& .c-color-swatch{gap:var(--spacer-1);flex-direction:column;display:flex;& .color{aspect-ratio:1;border:1px solid var(--surface-4);border-radius:var(--border-radius-d);box-shadow:0 2px 4px oklch(from var(--surface-0)l c h/.2);width:100%;transition:transform .2s;&:hover{transform:scale(1.05)}}& .label{& code{background:var(--surface-3);border-radius:var(--border-radius-xs);color:var(--surface-6);font-family:SF Mono,Monaco,Cascadia Code,Roboto Mono,Consolas,Courier New,monospace;font-size:var(--font-xs);padding:var(--spacer-025)var(--spacer-05)}}}& .typography-scale{gap:var(--spacer-3);flex-direction:column;display:flex}& .typography-item{border-bottom:1px solid var(--surface-3);padding-bottom:var(--spacer-3);&:last-child{border-bottom:none}& .typography-example{color:var(--surface-7);margin-bottom:var(--spacer-1)}& code{background:var(--surface-3);border-radius:var(--border-radius-xs);color:var(--surface-5);font-family:SF Mono,Monaco,Cascadia Code,Roboto Mono,Consolas,Courier New,monospace;font-size:var(--font-xs);padding:var(--spacer-025)var(--spacer-1)}}& .spacing-scale{gap:var(--spacer-3);flex-direction:column;display:flex}& .spacing-item{align-items:center;gap:var(--spacer-3);display:flex;& .spacing-visual{background:var(--primary-5);border-radius:var(--border-radius-xs);flex-shrink:0}& .spacing-info{gap:var(--spacer-05);flex-direction:column;display:flex;& code{background:var(--surface-3);border-radius:var(--border-radius-xs);color:var(--primary-5);font-family:SF Mono,Monaco,Cascadia Code,Roboto Mono,Consolas,Courier New,monospace;font-size:var(--font-s);padding:var(--spacer-025)var(--spacer-1);font-weight:600}& .spacing-value{color:var(--surface-5);font-size:var(--font-xs)}}}& .icon-scale{gap:var(--spacer-3);flex-direction:column;display:flex}& .icon-size-item{align-items:center;gap:var(--spacer-3);display:flex;& .icon-size-visual{background:var(--success-5);border-radius:var(--border-radius-xs);flex-shrink:0}& .icon-size-info{gap:var(--spacer-05);flex-direction:column;display:flex;& code{background:var(--surface-3);border-radius:var(--border-radius-xs);color:var(--success-5);font-family:SF Mono,Monaco,Cascadia Code,Roboto Mono,Consolas,Courier New,monospace;font-size:var(--font-s);padding:var(--spacer-025)var(--spacer-1);font-weight:600}& .icon-size-value{color:var(--surface-5);font-size:var(--font-xs)}}}& .radius-scale{gap:var(--spacer-3);flex-direction:column;display:flex}& .radius-item{align-items:center;gap:var(--spacer-3);display:flex;& .radius-visual{background:var(--warning-5);border:2px solid var(--warning-4);height:var(--spacer-6);width:var(--spacer-6);flex-shrink:0}& .radius-info{gap:var(--spacer-05);flex-direction:column;display:flex;& code{background:var(--surface-3);border-radius:var(--border-radius-xs);color:var(--warning-5);font-family:SF Mono,Monaco,Cascadia Code,Roboto Mono,Consolas,Courier New,monospace;font-size:var(--font-s);padding:var(--spacer-025)var(--spacer-1);font-weight:600}& .radius-value{color:var(--surface-5);font-size:var(--font-xs)}}}}.c-component-demo{background:var(--surface-2);border:1px solid var(--surface-3);border-radius:var(--border-radius-l);box-shadow:0 1px 3px oklch(from var(--surface-0)l c h/.1),0 1px 2px oklch(from var(--surface-0)l c h/.06);height:fit-content;transition:box-shadow .2s,transform .2s;overflow:hidden;&:hover{box-shadow:0 4px 12px oklch(from var(--surface-0)l c h/.15),0 2px 4px oklch(from var(--surface-0)l c h/.1);transform:translateY(-2px)}& .header{background:var(--surface-1);border-bottom:1px solid var(--surface-3);padding:var(--spacer-3)var(--spacer-4);justify-content:space-between;align-items:center;display:flex}& .title{color:var(--surface-7);font-size:var(--font-l);margin:0;font-weight:600}& .component-name{background:oklch(from var(--primary-5)l c h/.15);border:1px solid oklch(from var(--primary-5)l c h/.3);border-radius:var(--border-radius-s);color:var(--primary-5);font-family:SF Mono,Monaco,Cascadia Code,Roboto Mono,Consolas,Courier New,monospace;font-size:var(--font-xs);padding:var(--spacer-05)var(--spacer-2);font-weight:500}& .content{padding:var(--spacer-4)}& .demo-grid,& .item-container{gap:var(--spacer-2);flex-direction:column;display:flex}& .item-label{color:var(--surface-6);font-size:var(--font-s);margin-bottom:var(--spacer-1);text-transform:uppercase;font-weight:600}& .item-variant{gap:var(--spacer-2);flex-wrap:wrap;display:flex}}.c-state-view{background:oklch(from var(--surface-1)l c h/.5);border:1px solid var(--surface-3);border-radius:var(--border-radius-d);margin-top:var(--spacer-4);overflow:hidden;& .header{background:oklch(from var(--warning-5)l c h/.1);border:none;border-bottom:1px solid var(--surface-3);cursor:pointer;align-items:center;gap:var(--spacer-1);padding:var(--spacer-2)var(--spacer-3);text-align:left;width:100%;transition:background .2s;display:flex;&:hover{background:oklch(from var(--warning-5)l c h/.15)}}& .icon{color:var(--warning-5);font-size:var(--font-d);transition:transform .2s;display:inline-block}& .title{color:var(--surface-6);font-size:var(--font-s);align-items:center;gap:var(--spacer-1);letter-spacing:.02em;margin:0;font-weight:600;display:flex}& .content{background:var(--surface-1);gap:var(--spacer-1);padding:var(--spacer-3);flex-direction:column;display:flex}& .entry{font-family:SF Mono,Monaco,Cascadia Code,Roboto Mono,Consolas,Courier New,monospace;font-size:var(--font-xs);gap:var(--spacer-2);display:flex}& .key{color:var(--warning-4);min-width:120px;font-weight:600}& .value{color:var(--surface-6);white-space:pre-wrap;word-break:break-all;flex:1;&:empty:after{color:var(--surface-5);content:"<empty>";font-style:italic}}}
/*# sourceMappingURL=components.bd0hmvbmh5r9e7g47rou6i.css.map */