@layer apple {
  .settings-disclosure .disclosure-title { margin: 0; font-size: .88rem; font-weight: 600; }
  .disclosure-body { display: flex; flex-direction: column; gap: 1rem; }
  .wiki-page { padding-block-start: clamp(2rem,1rem + 3vw,5rem); }
  .wiki-hero { display: flex; flex-direction: column; align-items: start; gap: 1.5rem; padding-block-end: clamp(3rem,2rem + 3vw,6rem); }
  .wiki-hero h1 { font-size: clamp(2.5rem,1.8rem + 3vw,4.7rem); letter-spacing: -.055em; }
  .wiki-hero > p { max-inline-size: 44rem; color: var(--muted); }
  .wiki-demo-note { padding-block: .8rem; padding-inline: 1rem; background: color-mix(in oklch,var(--blue) 7%,var(--surface)); border-radius: 14px; font-size: .78rem; }
  .wiki-layout { display: flex; align-items: start; flex-wrap: wrap; gap: clamp(2rem,1rem + 3vw,4rem); container-type: inline-size; }
  .wiki-toc { flex: 1 1 13rem; display: flex; flex-direction: column; gap: .9rem; padding: 1.3rem; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); font-size: .78rem; }
  .wiki-toc nav { display: flex; flex-direction: column; gap: .15rem; }
  .wiki-toc a { padding-block: .35rem; color: var(--muted); }
  .wiki-toc a span { display: inline-block; inline-size: 1.7rem; color: var(--blue); font-family: var(--mono); font-size: .65rem; }
  .wiki-articles { flex: 999 1 35rem; display: flex; flex-direction: column; gap: clamp(3rem,2rem + 3vw,5rem); }
  .wiki-article { display: grid; grid-template-columns: 2.2rem minmax(0,1fr); gap: .8rem; scroll-margin-block-start: 7rem; }
  .wiki-step-number { display: grid; place-items: center; align-self: start; aspect-ratio: 1; background: color-mix(in oklch,var(--blue) 10%,var(--surface)); border-radius: 50%; color: var(--blue); font-family: var(--mono); font-size: .75rem; }
  .wiki-article > div:last-child, .wiki-reference { display: flex; flex-direction: column; align-items: start; gap: 1rem; }
  .wiki-article h2, .wiki-reference h2 { font-size: clamp(1.35rem,1.1rem + .8vw,1.8rem); letter-spacing: -.035em; }
  .wiki-article p, .wiki-reference p, .wiki-article li { color: var(--muted); font-size: .87rem; }
  .wiki-article .wiki-goal { color: var(--fg); font-size: .9rem; }
  .wiki-article :is(ul,ol) { margin-block: 0; padding-inline-start: 1.2rem; display: flex; flex-direction: column; gap: .65rem; line-height: 1.75; }
  .wiki-article p + p, .wiki-reference p + p { margin-block-start: 0; }
  .wiki-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
  .wiki-reference { scroll-margin-block-start: 7rem; border-block-start: 1px solid var(--border); padding-block-start: 2rem; }
  .wiki-module-list { display: flex; flex-direction: column; gap: 1rem; margin: 0; }
  .wiki-module-list dt { font-weight: 600; }
  .wiki-module-list dd { margin-inline-start: 0; margin-block-start: .35rem; color: var(--muted); font-size: .87rem; }
  .wiki-permissions { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,16rem),1fr)); gap: .8rem; inline-size: 100%; }
  .wiki-permissions > div { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 1.1rem; }
  .wiki-permissions h3 { font-size: .95rem; margin-block-end: .5rem; }
  .wiki-reference > details { inline-size: 100%; border: 1px solid var(--border); background: var(--surface); border-radius: 14px; padding-block: .8rem; padding-inline: 1.1rem; }
  .wiki-reference summary { cursor: pointer; font-size: .86rem; font-weight: 600; }
  .wiki-reference details p { margin-block-start: .75rem; }
  .wiki-reference summary:active { color: var(--blue); }
  .wiki-reference a { color: var(--blue); text-decoration: underline; text-underline-offset: .2em; }
}
@container (min-width: 56rem) {
  .wiki-toc { position: sticky; inset-block-start: 7rem; }
}
@media (hover: hover) and (pointer: fine) {
  .wiki-toc a:hover { color: var(--blue); }
}

@layer apple {
  .settings-disclosure { padding: 0; overflow: clip; }
  .settings-disclosure > summary { display: flex; align-items: center; gap: .8rem; cursor: pointer; list-style: none; min-block-size: 4.2rem; padding-block: 1.2rem; padding-inline: 1.5rem; }
  .settings-disclosure > summary::-webkit-details-marker { display: none; }
  .settings-disclosure > summary:active { background: color-mix(in oklch,var(--blue) 7%,var(--surface)); }
  .disclosure-title { font-size: .88rem; font-weight: 600; }
  .disclosure-state { margin-inline-start: auto; flex: none; font-size: .63rem; color: var(--muted); }
  .disclosure-state.is-enabled { color: light-dark(oklch(47% .13 151),oklch(75% .13 151)); }
  .settings-disclosure > summary > .notification-chevron:last-child { margin-inline-start: auto; }
  .settings-disclosure > summary:has(.disclosure-state) > .notification-chevron:last-child { margin-inline-start: 0; }
  .settings-disclosure[open] > summary > .notification-chevron { rotate: 180deg; }
  .disclosure-body { padding-block: 0 1.5rem; padding-inline: 1.5rem; }
  .disclosure-body:empty { display: none; }
  .disclosure-body > .card-heading:empty { display: none; }
  .settings-disclosure { interpolate-size: allow-keywords; }
  .settings-disclosure::details-content { block-size: 0; overflow: clip; }
  .settings-disclosure[open]::details-content { block-size: auto; }
}
@media (prefers-reduced-motion: no-preference) {
  .settings-disclosure::details-content { transition: block-size 260ms ease-out, content-visibility 260ms allow-discrete; }
}

@layer apple {
  .saved-state.unsaved { color: light-dark(oklch(43% .12 60),oklch(82% .12 85)); }
  .sidebar { gap: .75rem; padding-block-start: 1.1rem; overflow-y: clip; }
  .sidebar .module-nav { gap: .15rem; margin-block-start: 0; min-block-size: 5rem; overscroll-behavior: contain; }
  .sidebar .module-nav .module-link { padding-block: .52rem; font-size: .75rem; flex: none; }
  .sidebar .module-link:nth-child(7) { margin-block-start: 0; }
  .sidebar-bottom { gap: .4rem; }
  .section-navigation { display: flex; flex-wrap: wrap; gap: .4rem; border-block-end: 1px solid var(--border); padding-block-end: .8rem; }
  .section-link { display: inline-flex; align-items: center; gap: .6rem; padding-block: .65rem; padding-inline: 1rem; border-radius: 999px; color: var(--muted); font-size: .75rem; background: var(--surface); }
  .section-link.selected { color: var(--blue); background: color-mix(in oklch,var(--blue) 12%,var(--surface)); }
  .section-link:active { background: color-mix(in oklch,var(--blue) 18%,var(--surface)); }
  .notification-list { gap: .7rem; }
  .notification-accordion { border: 1px solid var(--border); background: var(--surface); border-radius: 18px; overflow: clip; }
  .notification-accordion summary { display: flex; align-items: center; gap: .8rem; list-style: none; cursor: pointer; min-block-size: 4rem; padding-block: 1rem; padding-inline: 1.3rem; font-size: .85rem; font-weight: 600; }
  .notification-accordion summary::-webkit-details-marker { display: none; }
  .notification-accordion summary:active { background: color-mix(in oklch,var(--blue) 6%,var(--surface)); }
  .notification-chevron { color: var(--muted); font-size: 1rem; flex: none; }
  .notification-accordion[open] .notification-chevron { rotate: 180deg; }
  .notification-state { margin-inline-start: auto; flex: none; color: var(--muted); font-size: .6rem; font-weight: 500; }
  .notification-state.is-enabled { color: light-dark(oklch(47% .13 151),oklch(75% .13 151)); }
  .notification-content { padding-block: 0 1.3rem; padding-inline: 1.3rem; }
  .notification-content > .settings-card { border: 0; padding: 0; border-radius: 0; box-shadow: none; }
  .notification-content > .settings-card > .card-heading { display: none; }
  .notification-accordion { interpolate-size: allow-keywords; }
  .notification-accordion::details-content { block-size: 0; overflow: clip; }
  .notification-accordion[open]::details-content { block-size: auto; }
}
@media (prefers-reduced-motion: no-preference) {
  .notification-accordion::details-content { transition: block-size 260ms ease-out, content-visibility 260ms allow-discrete; }
  .notification-chevron { transition: rotate 200ms ease-out; }
}
@media (hover: hover) and (pointer: fine) {
  .section-link:hover { color: var(--blue); }
}

@layer components {
  .message-format-toolbar { display: flex; flex-wrap: wrap; gap: .2rem; margin-block-end: .5rem; }
  .message-format-toolbar .button { padding-inline: .55rem; min-block-size: 2rem; }
  .message-text-editor { min-inline-size: 0; }
  .message-text-editor textarea { inline-size: 100%; }
}

@layer components {
  .room-demo-header { display: flex; align-items: center; gap: .75rem; }
  .room-demo-header p { margin-block-start: .3rem; }
  .room-demo-controls { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,6rem),1fr)); gap: .4rem; margin-block: 1rem; }
  .room-demo-controls .button { min-inline-size: 0; padding-inline: .65rem; white-space: normal; }
  .image-field-preview img { display: block; inline-size: min(100%,20rem); aspect-ratio: 16 / 9; object-fit: contain; border-radius: .65rem; }
  #room-preview { display: flex; flex-direction: column; gap: 1rem; }
}

@layer components {
  .member-settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
    align-items: start;
    gap: 1.2rem;
  }
  .message-editor-details { border-block-start: 1px solid var(--border); padding-block-start: .7rem; }
  .message-editor-details summary { cursor: pointer; font-weight: 600; min-block-size: 2rem; }
  .message-editor-details summary:active { color: var(--blue); }
  .message-editor-details > .fields { margin-block-start: .65rem; }
  .preview-message-image, .preview-message-thumbnail {
    display: block;
    object-fit: contain;
    border-radius: .65rem;
    margin-block-start: .6rem;
  }
  .preview-message-image { inline-size: 100%; aspect-ratio: 16 / 9; }
  .preview-message-thumbnail { inline-size: min(5rem, 100%); aspect-ratio: 1; }
  #welcome-preview, #welcome-dm-preview { min-inline-size: 0; overflow-wrap: anywhere; }
}
@layer apple {
  :root {
    --liquid-surface: color-mix(in oklch,var(--surface) 70%,transparent);
    --liquid-border: color-mix(in oklch,var(--fg) 9%,transparent);
    --liquid-reflection: light-dark(oklch(100% 0 none / .9),oklch(100% 0 none / .16));
  }
  .site-header { inset-block-start: .7rem; margin-block-start: .7rem; background: transparent; backdrop-filter: none; border: 0; }
  .site-header nav,.glass-control {
    background: var(--liquid-surface);
    border: 1px solid var(--liquid-border);
    backdrop-filter: blur(23px) saturate(170%);
    box-shadow: inset 0 1px 1px var(--liquid-reflection),0 9px 30px oklch(20% .035 270 / .08);
  }
  .site-header nav { border-radius: 100px; padding-block: .65rem; padding-inline: 1.4rem; }
  #features,#playground { scroll-margin-block-start: 6rem; }
  .showcase { padding-block-start: var(--section); display: flex; flex-direction: column; gap: 2rem; }
  .showcase-heading { text-align: center; display: flex; flex-direction: column; align-items: center; gap: .9rem; }
  .showcase-heading h2 { font-size: clamp(2rem,1.4rem + 2vw,3.4rem); }
  .showcase-heading p { color: var(--muted); font-size: .94rem; }
  .showcase-shell { padding: clamp(1rem,.6rem + 2vw,2.6rem); border-radius: 32px; border: 1px solid var(--liquid-border); background: radial-gradient(ellipse at 85% 15%,color-mix(in oklch,var(--blue) 14%,transparent),transparent 65%),var(--surface); box-shadow: var(--shadow); }
  .showcase-tabs { --slot: 0; position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin-inline: auto; padding: .32rem; border-radius: 100px; max-inline-size: 42rem; gap: 0; }
  .showcase-tabs button { display: flex; justify-content: center; align-items: center; gap: .45rem; padding-block: .75rem; padding-inline: .35rem; border-radius: 100px; font-size: .79rem; color: var(--muted); font-weight: 550; }
  .showcase-tabs button[aria-selected="true"] { color: var(--blue); }
  .showcase-tabs button svg { inline-size: 1.12em; block-size: 1.12em; }
  .glass-lens { position: absolute; z-index: -1; inset-block: .32rem; inset-inline-start: .32rem; inline-size: calc((100% - .64rem) / 4); transform: translateX(calc(var(--slot) * 100%)); border: 1px solid color-mix(in oklch,var(--blue) 12%,var(--liquid-reflection)); background: linear-gradient(155deg,var(--liquid-reflection),color-mix(in oklch,var(--blue) 12%,var(--surface))); border-radius: 100px; box-shadow: inset 0 1px 1px var(--liquid-reflection),0 5px 13px oklch(20% .045 275 / .11); pointer-events: none; }
  .showcase-panel { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(1.4rem,.6rem + 2vw,3rem); margin-block-start: 2rem; min-block-size: 16rem; }
  .showcase-copy { flex: 1 1 15rem; display: flex; flex-direction: column; gap: .9rem; }
  .showcase-copy h3 { font-size: clamp(1.65rem,1.25rem + 1.3vw,2.5rem); }
  .showcase-copy p { color: var(--muted); max-inline-size: 25rem; font-size: .9rem; }
  .showcase-demo { flex: 2 1 28rem; display: flex; flex-direction: column; gap: 1rem; }
  .demo-controls { display: flex; align-items: end; flex-wrap: wrap; gap: .75rem; }
  .demo-controls > .field { flex: 1 1 12rem; }
  .demo-options,.music-controls { display: flex; flex-wrap: wrap; gap: .5rem; }
  .demo-options button { background: var(--liquid-surface); border: 1px solid var(--liquid-border); border-radius: 100px; min-block-size: 42px; padding-inline: .95rem; font-size: .76rem; color: var(--muted); }
  .demo-options [aria-pressed="true"] { color: var(--blue); border-color: color-mix(in oklch,var(--blue) 30%,var(--border)); }
  .demo-discord { border-radius: 18px; background: var(--bg); border: 1px solid var(--liquid-border); overflow: clip; }
  .demo-channel { display: flex; gap: .4rem; align-items: center; padding-block: .75rem; padding-inline: 1.15rem; border-block-end: 1px solid var(--border); color: var(--muted); font-size: .77rem; }
  .demo-app-label { margin-inline-start: auto; color: var(--blue); font-size: .57rem; font-weight: 700; letter-spacing: .06em; }
  .demo-message,.demo-notification { display: flex; align-items: start; gap: .8rem; padding: 1.15rem; }
  .demo-message img { inline-size: 42px; block-size: 42px; flex: none; object-fit: contain; border-radius: 50%; background: var(--raised); }
  .demo-message strong { color: var(--blue); font-size: .83rem; }
  .demo-message p,.demo-embed { font-size: .84rem; white-space: pre-wrap; }
  .demo-embed { border-inline-start: 3px solid var(--blue); padding-inline-start: .8rem; margin-block-start: .35rem; }
  .demo-audio { display: flex; flex-direction: column; gap: 1rem; padding: 1.15rem; border-radius: 24px; background: var(--bg); border: 1px solid var(--liquid-border); }
  .demo-audio-header,.music-status { display: flex; align-items: center; gap: .8rem; }
  .demo-audio-header h3,.music-status h3 { margin-block-start: .3rem; font-size: 1.15rem; }
  .demo-cover,.music-disc { inline-size: 53px; block-size: 53px; display: grid; place-items: center; border-radius: 16px; color: var(--blue); background: color-mix(in oklch,var(--blue) 12%,var(--surface)); flex: none; }
  .demo-play { margin-inline-start: auto; inline-size: 46px; block-size: 46px; border-radius: 50%; color: var(--blue); font-size: 1rem; }
  .demo-wave { display: flex; gap: .2rem; align-items: center; block-size: 32px; }
  .demo-wave i { background: color-mix(in oklch,var(--blue) 65%,var(--surface)); border-radius: 10px; inline-size: 100%; block-size: 38%; }
  .demo-wave .wave-1,.demo-wave .wave-4 { block-size: 69%; }
  .demo-wave .wave-2,.demo-wave .wave-5 { block-size: 91%; }
  .demo-tracklist { display: flex; flex-direction: column; gap: .25rem; }
  .demo-tracklist button { display: flex; align-items: center; gap: .6rem; padding-block: .45rem; padding-inline: .75rem; text-align: start; border-radius: 9px; font-size: .79rem; }
  .demo-tracklist button span { color: var(--muted); font-size: .67rem; }
  .demo-tracklist button span:last-child { margin-inline-start: auto; }
  .demo-tracklist [aria-pressed="true"] { background: color-mix(in oklch,var(--blue) 9%,transparent); color: var(--blue); }
  .demo-volume,.music-volume label { display: flex; align-items: center; gap: .75rem; font-size: .73rem; color: var(--muted); }
  input[type="range"] { accent-color: var(--blue); padding: 0; min-block-size: 30px; flex: 1; }
  .demo-volume output { font-variant-numeric: tabular-nums; min-inline-size: 2.5rem; }
  .demo-social-options .demo-send { margin-inline-start: auto; display: flex; gap: .5rem; align-items: center; color: var(--blue); }
  .demo-network { inline-size: 47px; block-size: 47px; flex: none; border-radius: 13px; display: grid; place-items: center; background: oklch(52% .23 303); color: white; font-weight: 700; }
  .demo-network.vk { background: oklch(51% .2 256); }
  .demo-notification h3 { margin-block: .32rem; font-size: 1rem; }
  .demo-notification p { color: var(--muted); font-size: .8rem; }
  .demo-template-controls { display: flex; flex-direction: column; align-items: stretch; }
  .demo-template-controls > .field { flex-basis: auto; }
  .demo-template-controls textarea { font-family: var(--mono); font-size: .75rem; min-block-size: 3lh; }
  .home-faq { display: flex; flex-wrap: wrap; gap: 2rem; padding-block-start: var(--section); }
  .home-faq > div:first-child { flex: 1 1 14rem; }
  .home-faq h2 { margin-block-start: .9rem; }
  .faq-items { flex: 2 1 25rem; display: flex; flex-direction: column; gap: .65rem; }
  .faq-items details { background: var(--surface); border: 1px solid var(--liquid-border); border-radius: 17px; padding-block: .9rem; padding-inline: 1.2rem; }
  .faq-items summary,.template-help + summary { cursor: pointer; font-weight: 600; }
  .faq-items p { color: var(--muted); font-size: .86rem; padding-block-start: .65rem; }
  .source-card { display: flex; flex-direction: column; gap: .9rem; border: 1px solid var(--border); border-radius: 14px; padding: 1rem; background: var(--bg); }
  .source-card .row label { font-size: .78rem; }
  .music-play-row,.music-volume { display: flex; flex-wrap: wrap; align-items: end; gap: .7rem; }
  .music-play-row .field,.music-volume label { flex: 1 1 15rem; }
  #music-player-state { display: flex; flex-direction: column; gap: 1rem; }
  .music-queue { border-block-start: 1px solid var(--border); padding-block-start: .75rem; }
  .music-queue strong { font-size: .8rem; }
  .music-queue li { font-size: .83rem; }
  #template-preview { display: flex; flex-direction: column; gap: .65rem; }
  .rich-embed { display: flex; flex-direction: column; gap: .55rem; padding: .9rem; background: var(--bg); border-inline-start: 3px solid var(--blue); border-radius: 8px; }
  .rich-text { white-space: pre-wrap; font-size: .81rem; overflow-wrap: anywhere; }
  .rich-fields { display: flex; flex-wrap: wrap; gap: .6rem; }
  .rich-fields > div { flex: 1 1 100%; font-size: .77rem; }
  .rich-fields .inline-field { flex-basis: 40%; }
  .rich-fields span { display: block; white-space: pre-wrap; }
  .rich-embed small,.template-help { color: var(--muted); font-size: .72rem; }
  .template-help { margin-block-start: .8rem; }
  .preview-column > details { margin-block-start: 1rem; }
  @media (hover:hover) and (pointer:fine) {
    .showcase-tabs button:hover,.demo-options button:hover,.demo-tracklist button:hover { color: var(--blue); background-color: color-mix(in oklch,var(--blue) 6%,transparent); }
  }
  @media (prefers-reduced-motion:no-preference) {
    .glass-lens { transition: transform 440ms cubic-bezier(.19,.82,.24,1); }
    .demo-wave.is-playing i { animation: demo-beat 1.2s ease-in-out infinite alternate; }
    .demo-wave .wave-2,.demo-wave .wave-5 { animation-delay: -.28s; }
    .demo-wave .wave-1,.demo-wave .wave-4 { animation-delay: -.56s; }
    .demo-wave .wave-3 { animation-delay: -.84s; }
    .faq-items details[open] p { animation: faq-arrive 280ms ease-out both; }
    @keyframes demo-beat { from { transform: scaleY(.45); } to { transform: scaleY(1); } }
    @keyframes faq-arrive { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
  }
  @media (prefers-reduced-transparency:reduce),(prefers-contrast:more) {
    .site-header nav,.glass-control { background: var(--surface); backdrop-filter: none; }
  }
  @media (width < 800px) {
    .site-header nav { border-radius: 23px; padding-inline: .85rem; }
    .showcase-shell { border-radius: 24px; }
    .showcase-tabs button { font-size: .68rem; gap: .3rem; }
  }
  @media (width < 490px) {
    .showcase-tabs button { flex-direction: column; font-size: .61rem; padding-block: .55rem; }
    .showcase-tabs button svg { inline-size: 1.4em; block-size: 1.4em; }
    .showcase-panel { margin-block-start: 1.35rem; }
    .demo-social-options .demo-send { margin-inline-start: 0; }
  }
}