:root {
    --app-viewport-width: 100vw;
    --app-viewport-height: 100vh;
    --app-viewport-scale: 1;
    font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;
    line-height: 1.5;
    font-weight: 400;
    color: #e5e7eb;
    background: #020617;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

* {
    box-sizing: border-box
}

html,body,#root {
    height: 100%;
    margin: 0
}

body {
    min-width: 320px;
    min-height: 100vh;
    min-height: var(--app-viewport-height);
    overflow: hidden;
    background: radial-gradient(circle at top,rgba(59,130,246,.25),transparent 30%),linear-gradient(180deg,#0f172a,#020617)
}

button,input,textarea,select {
    font: inherit
}

code,pre {
    font-family: SFMono-Regular,SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace
}

.app-shell {
    display: flex;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    height: 100vh;
    height: var(--app-viewport-height);
    min-height: 100vh;
    min-height: var(--app-viewport-height);
    gap: 0;
    overflow: hidden;
    background: #94a3b82e
}

.app-shell--resizing {
    cursor: col-resize
}

.app-shell__panel {
    min-width: 0;
    min-height: 100vh;
    min-height: var(--app-viewport-height);
    overflow: hidden
}

.app-shell__panel--left-dock {
    flex: 0 0 auto;
    min-width: 0;
    transition: width .28s ease
}

.app-shell__left-dock {
    display: flex;
    align-items: stretch;
    height: 100%;
    min-width: 0
}

.app-shell__panel--left {
    flex: 0 0 auto;
    background: #0f172af0;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    transition: transform .28s ease,opacity .22s ease
}

.app-shell__panel--left-dock-collapsed .app-shell__panel--left {
    transform: translate(-100%);
    opacity: 0;
    pointer-events: none
}

.app-shell__left-toggle {
    display: inline-flex;
    flex: 0 0 3rem;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: .9rem;
    width: 3rem;
    min-height: 11rem;
    margin-left: auto;
    padding: .9rem .45rem;
    border: 0;
    border-left: 1px solid rgba(96,165,250,.18);
    background: linear-gradient(180deg,#0f172af5,#0f172ad1);
    box-shadow: inset -1px 0 #ffffff08;
    color: #dbeafe;
    cursor: pointer;
    transition: background .18s ease,border-color .18s ease
}

.app-shell__left-toggle:hover {
    border-left-color: #60a5fa5c;
    background: linear-gradient(180deg,#1e293bfa,#0f172ae0)
}

.app-shell__left-toggle-arrow {
    font-size: 1.1rem;
    color: #60a5fa
}

.app-shell__left-toggle-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    letter-spacing: .16em;
    font-size: .72rem;
    text-transform: uppercase
}

.app-shell__left-toggle-label--cjk {
    transform: none;
    text-orientation: upright;
    letter-spacing: .08em
}

.app-shell__panel--right {
    flex: 1 1 auto;
    min-width: 0;
    background: #020617
}

.app-shell__resize-handle {
    position: relative;
    flex: 0 0 14px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: #94a3b814;
    cursor: col-resize
}

.app-shell__resize-handle:before {
    content: "";
    position: absolute;
    inset: 0
}

.app-shell__resize-grip {
    width: 4px;
    height: 64px;
    border-radius: 999px;
    background: linear-gradient(180deg,#60a5fa33,#60a5facc,#60a5fa33)
}

.panel {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    height: 100%;
    padding: 1.25rem
}

.panel--preview {
    border-right: 1px solid rgba(148,163,184,.08)
}

.panel--embedded-preview {
    height: auto;
    padding: 0;
    border-right: 0
}

.panel__content {
    display: flex;
    flex: 1;
    min-height: 0;
    flex-direction: column;
    gap: 1rem
}

.panel__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem
}

.panel__header-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .75rem
}

.panel__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem
}

.panel__meta span {
    padding: .35rem .75rem;
    border: 1px solid rgba(96,165,250,.18);
    border-radius: 999px;
    background: #0f172aad;
    color: #bfdbfe;
    font-size: .8rem
}

.panel__eyebrow,.viewer-overlay__eyebrow {
    margin: 0 0 .5rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: .75rem;
    color: #60a5fa
}

.panel__title {
    margin: 0;
    font-size: clamp(1.5rem,3vw,2rem);
    line-height: 1.1
}

.panel__title--compact {
    font-size: clamp(1.15rem,2vw,1.5rem)
}

.panel__copy {
    margin: 0;
    max-width: 40rem;
    color: #cbd5e1
}

.panel__copy code {
    color: #bfdbfe
}

.panel__visibility-button {
    white-space: nowrap
}

.panel__brand-lockup {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem
}

.panel__brand-mark {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .65rem;
    max-width: min(22rem,100%)
}

.panel__brand-copy {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    min-width: 0
}

.panel__brand-title {
    margin: 0;
    font-size: clamp(1.25rem,2vw,1.75rem);
    font-weight: 700;
    letter-spacing: .04em;
    color: #f8fafc
}

.panel__brand-subtitle {
    margin: 0;
    color: #93c5fd;
    font-size: .9rem
}

.panel__brand-logo {
    width: min(19rem,100%);
    margin-bottom: 0
}

.panel__brand-logo svg {
    display: block;
    width: 100%;
    height: auto
}

.panel__alert {
    padding: .875rem 1rem;
    border: 1px solid rgba(248,113,113,.3);
    border-radius: .85rem;
    background: #7f1d1d59;
    color: #fecaca
}

.panel__alert--success {
    border-color: #22c55e57;
    background: #14532d57;
    color: #bbf7d0
}

.panel__alert-list {
    margin: .75rem 0 0;
    padding-left: 1.1rem
}

.panel__alert-list li+li {
    margin-top: .35rem
}

.code-preview {
    flex: 1;
    min-height: 0;
    margin: 0;
    padding: 1rem;
    overflow: auto;
    border: 1px solid rgba(96,165,250,.18);
    border-radius: 1rem;
    background: #020617b8;
    box-shadow: inset 0 1px #ffffff08;
    color: #dbeafe;
    font-size: .82rem;
    line-height: 1.65;
    white-space: pre
}

.viewer-shell {
    position: relative;
    height: 100%;
    min-height: 100vh;
    min-height: var(--app-viewport-height);
    overflow: hidden
}

.viewer-canvas {
    width: 100%;
    height: 100%;
    min-height: 100vh;
    min-height: var(--app-viewport-height)
}

.viewer-canvas canvas {
    display: block
}

.viewer-hud {
    position: absolute;
    z-index: 2;
    pointer-events: none
}

.viewer-hud>* {
    pointer-events: auto
}

.viewer-hud--status {
    top: 1.25rem;
    left: 1.25rem
}

.viewer-hud--dock {
    top: 1.25rem;
    right: 1.25rem;
    bottom: 6.25rem;
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    max-width: min(32rem,calc(var(--app-viewport-width) - 1.5rem))
}

.viewer-dock {
    display: flex;
    align-items: stretch;
    gap: .8rem;
    width: min(32rem,calc(var(--app-viewport-width) - 1.5rem));
    max-height: 100%;
    transform: translate(calc(100% - 3.75rem));
    transition: transform .28s ease
}

.viewer-hud--dock-open .viewer-dock {
    transform: translate(0)
}

.viewer-dock__panel {
    flex: 1 1 auto;
    min-width: 0;
    max-height: 100%
}

.viewer-dock__toggle {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: .9rem;
    width: 3rem;
    min-height: 11rem;
    padding: .9rem .45rem;
    border: 1px solid rgba(96,165,250,.24);
    border-radius: 1rem;
    background: linear-gradient(180deg,#0f172aeb,#0f172aad);
    box-shadow: 0 16px 40px #02061747;
    color: #dbeafe;
    cursor: pointer;
    transition: transform .18s ease,border-color .18s ease,background .18s ease
}

.viewer-dock__toggle:hover {
    transform: translateY(-1px);
    border-color: #60a5fa70;
    background: linear-gradient(180deg,#1e293bf2,#0f172acc)
}

.viewer-dock__toggle-arrow {
    font-size: 1.1rem;
    color: #60a5fa
}

.viewer-dock__toggle-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    letter-spacing: .16em;
    font-size: .72rem;
    text-transform: uppercase
}

.viewer-dock__toggle-label--cjk {
    transform: none;
    text-orientation: upright;
    letter-spacing: .08em
}

.viewer-hud--toolbar {
    top: 1.25rem;
    left: 1.25rem;
    display: flex;
    justify-content: flex-start;
    pointer-events: none
}

.viewer-hud--toolbar-dock-open {
    right: calc(1.25rem + min(32rem,calc(var(--app-viewport-width) - 1.5rem)))
}

.viewer-hud--toolbar-dock-collapsed {
    right: 5.5rem
}

.viewer-status-card {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    padding: .6rem .85rem;
    border: 1px solid rgba(148,163,184,.14);
    border-radius: 999px;
    background: #0f172ab8;
    box-shadow: 0 12px 36px #02061747;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px)
}

.viewer-toolbar {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    max-width: min(100%,70rem);
    padding: .45rem .55rem;
    border: 1px solid rgba(148,163,184,.16);
    border-radius: 999px;
    background: #0f172ab8;
    box-shadow: 0 12px 36px #02061747;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    pointer-events: auto
}

.viewer-toolbar__section {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: .45rem
}

.viewer-toolbar__button {
    min-width: 0;
    padding: .42rem .85rem;
    border: 1px solid rgba(148,163,184,.16);
    border-radius: 999px;
    background: #1e293b8f;
    color: #cbd5e1;
    cursor: pointer;
    font-size: .75rem;
    line-height: 1.2;
    white-space: nowrap;
    transition: transform .18s ease,background .18s ease,border-color .18s ease,color .18s ease
}

.viewer-toolbar__button:hover {
    transform: translateY(-1px);
    border-color: #94a3b84d;
    background: #334155b8;
    color: #f8fafc
}

.viewer-toolbar__button--active {
    border-color: #3b82f666;
    background: linear-gradient(135deg,#2563ebeb,#0ea5e9c7);
    color: #eff6ff
}

.viewer-overlay__status {
    margin: 0;
    color: #93c5fd;
    font-size: .85rem;
    white-space: nowrap
}

.panel--editor {
    align-items: stretch;
    min-height: 0
}

.panel__content--scrollable {
    overflow-y: auto;
    padding-right: .35rem
}

.panel__header--stacked-mobile {
    align-items: flex-start
}

.editor-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: .9rem 1rem;
    border: 1px solid rgba(148,163,184,.16);
    border-radius: 1rem;
    background: #0f172a85
}

.editor-section--open {
    border-color: #60a5fa47
}

.editor-section__header,.editor-card__header,.editor-card__header--spread {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem
}

.editor-section__header--accordion {
    align-items: stretch
}

.editor-section__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    text-align: left
}

.editor-section__toggle-copy {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    min-width: 0
}

.editor-section__toggle-title,.editor-card h3,.editor-subsection h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600
}

.editor-section__toggle-meta {
    display: flex;
    align-items: center;
    gap: .75rem
}

.editor-section__chip {
    padding: .22rem .62rem;
    border-radius: 999px;
    border: 1px solid rgba(96,165,250,.18);
    background: #0f172ab8;
    color: #bfdbfe;
    font-size: .75rem
}

.editor-section__chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 999px;
    background: #60a5fa29;
    color: #dbeafe;
    font-size: 1rem;
    font-weight: 700
}

.editor-section__description,.editor-empty,.leg-list__item span,.editor-card__eyebrow {
    margin: 0;
    color: #94a3b8
}

.editor-section__body,.editor-stack,.editor-subsection {
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.editor-group {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    padding: .85rem .9rem;
    border: 1px solid rgba(148,163,184,.16);
    border-radius: .85rem;
    background: #0f172a6b
}

.editor-group--open {
    border-color: #60a5fa38;
    background: #0f172a8a
}

.editor-group__toggle {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    text-align: left
}

.editor-group__copy,.editor-group__body {
    display: flex;
    flex-direction: column;
    gap: .75rem
}

.editor-group__copy {
    min-width: 0
}

.editor-group__title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem
}

.editor-group__title {
    font-size: .95rem;
    font-weight: 600;
    color: #e2e8f0
}

.editor-group__adornment {
    display: inline-flex;
    align-items: center
}

.editor-group__description {
    color: #94a3b8;
    font-size: .82rem
}

.editor-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid rgba(96,165,250,.12);
    border-radius: .9rem;
    background: #02061780
}

.editor-card--joint {
    border-color: #22c55e2e
}

.editor-card--open {
    border-color: #22c55e52
}

.editor-card__header--accordion {
    align-items: stretch
}

.editor-card__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    text-align: left
}

.editor-card__hint {
    padding: .75rem .85rem;
    border: 1px solid rgba(96,165,250,.16);
    border-radius: .75rem;
    background: #0f172a94;
    color: #cbd5e1
}

.editor-card__hint code {
    color: #bfdbfe
}

.editor-validation-list {
    display: grid;
    gap: .35rem;
    margin-top: .65rem;
    color: #fbbf24;
    font-size: .85rem
}

.editor-field input[readonly] {
    color: #e2e8f0;
    background: #0f172ad9;
    cursor: default
}

.editor-card__eyebrow,.editor-field__label,.editor-fieldset__label {
    font-size: .75rem;
    letter-spacing: .04em;
    text-transform: uppercase
}

.editor-subsection__header--with-actions {
    align-items: flex-start
}

.editor-subsection__description {
    margin: .3rem 0 0;
    color: #94a3b8;
    font-size: .85rem
}

.editor-grid {
    display: grid;
    gap: .85rem
}

.editor-grid--single {
    grid-template-columns: 1fr
}

.editor-grid--dual {
    grid-template-columns: repeat(2,minmax(0,1fr))
}

.editor-grid--triple {
    grid-template-columns: repeat(3,minmax(0,1fr))
}

.editor-grid--quad {
    grid-template-columns: repeat(4,minmax(0,1fr))
}

.editor-field {
    display: flex;
    flex-direction: column;
    gap: .35rem
}

.numeric-field {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    gap: .35rem;
    align-items: stretch
}

.numeric-field input {
    font-variant-numeric: tabular-nums
}

.editor-fieldset {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0
}

.editor-fieldset--geometry[disabled] {
    opacity: .62
}

.editor-field input,.editor-field select,.editor-field textarea,.leg-list__item,.primary-button,.secondary-button,.ghost-button {
    border-radius: .8rem
}

.editor-field input,.editor-field select,.editor-field textarea {
    width: 100%;
    padding: .7rem .8rem;
    border: 1px solid rgba(148,163,184,.22);
    background: #0f172adb;
    color: #e2e8f0
}

.code-editor {
    min-height: 18rem;
    resize: vertical;
    font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
    line-height: 1.6
}

.editor-field input[type=color] {
    min-height: 3rem;
    padding: .35rem;
    cursor: pointer
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0
}

.editor-actions-row,.editor-section__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem
}

.editor-actions-row--workspace {
    justify-content: flex-end
}

.editor-card--workspace {
    gap: 1rem
}

.editor-card__header--workspace {
    align-items: flex-start
}

.editor-card__header--workspace>:first-child {
    flex: 1;
    min-width: 0
}

.language-switch {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem
}

.language-switch__button {
    min-width: 7rem
}

.language-switch__button--active {
    background: linear-gradient(135deg,#2563eb57,#0ea5e93d);
    border-color: #60a5fa80
}

.template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(min(180px,100%),1fr));
    gap: .75rem
}

.template-card {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    width: 100%;
    padding: .95rem 1rem;
    border: 1px solid rgba(96,165,250,.18);
    border-radius: .9rem;
    background: linear-gradient(180deg,#0f172ad1,#0f172a99);
    color: #e2e8f0;
    cursor: pointer;
    text-align: left;
    transition: transform .15s ease,border-color .15s ease,background .15s ease
}

.template-card:hover {
    transform: translateY(-1px);
    border-color: #60a5fa61;
    background: linear-gradient(180deg,#1e293be6,#0f172aad)
}

.template-card__title {
    font-weight: 600;
    color: #dbeafe
}

.template-card__description {
    color: #94a3b8;
    font-size: .9rem
}

.primary-button,.secondary-button,.ghost-button {
    padding: .7rem .95rem;
    border: 1px solid transparent;
    color: #e2e8f0;
    cursor: pointer;
    transition: background .15s ease,border-color .15s ease,transform .15s ease
}

.primary-button:disabled,.secondary-button:disabled,.ghost-button:disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none
}

.primary-button {
    background: linear-gradient(135deg,#2563eb,#0ea5e9)
}

.secondary-button {
    background: #2563eb2e;
    border-color: #60a5fa3d
}

.ghost-button {
    background: #0f172ab3;
    border-color: #94a3b833
}

.ghost-button--active {
    border-color: #60a5fa73;
    background: #2563eb29;
    color: #dbeafe
}

.ghost-button--danger {
    border-color: #f871713d;
    color: #fecaca
}

.primary-button:hover,.secondary-button:hover,.ghost-button:hover,.leg-list__item:hover {
    transform: translateY(-1px)
}

.leg-list {
    display: grid;
    gap: .65rem
}

.leg-list__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    width: 100%;
    padding: .85rem 1rem;
    border: 1px solid rgba(148,163,184,.18);
    background: #0f172a8c;
    color: #e2e8f0;
    cursor: pointer;
    text-align: left
}

.leg-list__item--active {
    border-color: #22c55e73;
    background: #14b8a61f
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: #020617b8;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px)
}

.modal-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: min(960px,100%);
    max-height: calc(var(--app-viewport-height) - 3rem);
    padding: 1.25rem;
    overflow: hidden;
    border: 1px solid rgba(96,165,250,.2);
    border-radius: 1rem;
    background: #0f172af5;
    box-shadow: 0 24px 80px #02061773
}

.modal-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem
}

.modal-card .panel {
    min-height: 0;
    padding: 0
}

.modal-card .code-preview {
    max-height: calc(var(--app-viewport-height) - 18rem)
}

@media(max-width: 1200px) {
    .editor-grid--quad {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
}

.app-shell--compact .panel {
    padding: clamp(.85rem,1.5vw,1.05rem)
}

.app-shell--compact .panel__meta {
    gap: .4rem
}

.app-shell--compact .panel__meta span,.app-shell--compact .viewer-toolbar__button,.app-shell--compact .workspace-dock__tab {
    font-size: .74rem
}

.app-shell--compact .viewer-toolbar {
    max-width: min(100%,44rem)
}

@media(max-width: 900px) {
    body {
        overflow:auto
    }

    .app-shell {
        flex-direction: column;
        height: auto;
        min-height: var(--app-viewport-height)
    }

    .app-shell__panel--left-dock,.app-shell__panel--left,.app-shell__panel--right {
        width: 100%!important;
        min-height: auto
    }

    .app-shell__left-dock {
        flex-direction: column-reverse
    }

    .app-shell__panel--left-dock-collapsed {
        width: 100%!important
    }

    .app-shell__panel--left-dock-collapsed .app-shell__panel--left {
        display: none
    }

    .app-shell__left-toggle {
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        min-height: auto;
        padding: .7rem .9rem;
        border-left: 0;
        border-top: 1px solid rgba(96,165,250,.18)
    }

    .app-shell__left-toggle-label {
        writing-mode: initial;
        transform: none;
        letter-spacing: .06em
    }

    .app-shell__resize-handle {
        display: none
    }

    .panel {
        min-height: 50vh;
        padding: 1rem
    }

    .panel__header,.panel__header--stacked-mobile,.editor-section__header--accordion,.editor-card__header,.editor-card__header--spread,.modal-card__header {
        flex-direction: column
    }

    .panel__brand-lockup {
        align-items: stretch
    }

    .editor-actions-row--workspace {
        justify-content: flex-start
    }

    .viewer-shell,.viewer-canvas {
        min-height: 60vh
    }

    .viewer-hud--status {
        top: 1rem;
        left: 1rem
    }

    .viewer-hud--dock {
        top: auto;
        right: 1rem;
        bottom: 5.75rem;
        left: 1rem;
        max-width: none;
        justify-content: stretch
    }

    .viewer-hud--toolbar,.viewer-hud--toolbar-dock-open,.viewer-hud--toolbar-dock-collapsed {
        top: 1rem;
        right: 1rem;
        left: 1rem;
        justify-content: center
    }

    .viewer-toolbar {
        width: 100%;
        max-width: none;
        border-radius: 1.25rem
    }

    .viewer-toolbar__section {
        width: 100%
    }
}

@media(max-width: 720px) {
    .editor-grid--dual,.editor-grid--triple,.editor-grid--quad {
        grid-template-columns:1fr
    }

    .editor-section__toggle-meta {
        width: 100%;
        justify-content: space-between
    }
}

.workspace-dock {
    --workspace-dock-accent: #020617;
    display: flex;
    flex-direction: column;
    gap: .8rem;
    width: 100%;
    height: 100%;
    max-height: 100%;
    padding: .8rem;
    border: 1px solid color-mix(in srgb,var(--workspace-dock-accent) 38%,#7dd3fc 28%);
    border-radius: 1rem;
    background: linear-gradient(180deg,color-mix(in srgb,var(--workspace-dock-accent) 78%,rgba(15,23,42,.9) 22%),#0f172ae0),radial-gradient(circle at top right,color-mix(in srgb,var(--workspace-dock-accent) 46%,rgba(56,189,248,.24) 54%),transparent 55%);
    box-shadow: 0 18px 48px #02061752;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    overflow: hidden
}

.workspace-dock__topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem
}

.workspace-dock__tab-row {
    display: inline-flex;
    gap: .65rem;
    align-self: flex-start;
    flex-wrap: wrap
}

.workspace-dock__tab {
    padding: .65rem 1rem;
    border: 1px solid rgba(96,165,250,.16);
    border-radius: 999px;
    background: #0f172ab8;
    color: #cbd5e1;
    cursor: pointer;
    transition: background .15s ease,border-color .15s ease,transform .15s ease
}

.workspace-dock__tab:hover {
    transform: translateY(-1px);
    border-color: #60a5fa4d
}

.workspace-dock__tab--active {
    background: linear-gradient(135deg,#2563eb57,#0ea5e93d);
    border-color: #60a5fa80;
    color: #eff6ff
}

.workspace-dock__content {
    display: grid;
    flex: 1 1 auto;
    align-content: start;
    gap: .8rem;
    overflow: auto;
    min-height: 0;
    padding-right: .2rem
}

.workspace-dock__content--urdf {
    grid-template-rows: minmax(0,1fr)
}

.workspace-dock__card {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: .95rem 1rem;
    border: 1px solid color-mix(in srgb,var(--workspace-dock-accent) 26%,rgba(148,163,184,.26) 74%);
    border-radius: .9rem;
    background: color-mix(in srgb,var(--workspace-dock-accent) 22%,rgba(15,23,42,.68) 78%);
    box-shadow: inset 0 1px #ffffff08
}

.workspace-dock__card--urdf {
    min-height: 0;
    height: 100%
}

.workspace-dock__card--urdf .editor-field {
    flex: 1 1 auto;
    min-height: 0
}

.workspace-dock__card--urdf .urdf-editor {
    flex: 1 1 auto;
    min-height: 26rem
}

.workspace-dock__download-button {
    background: linear-gradient(135deg,#0f9f6e,#22c55e);
    box-shadow: 0 10px 24px #22c55e2e
}

.workspace-dock__simready-button {
    border-color: #34d39973;
    background: linear-gradient(135deg,#059669,#22c55e);
    box-shadow: 0 10px 24px #22c55e33;
    color: #ecfdf5;
    font-weight: 700
}

.workspace-dock__simready-button:hover {
    border-color: #86efac9e;
    background: linear-gradient(135deg,#047857,#16a34a)
}

.workspace-dock__editor-actions {
    justify-content: flex-start
}

.workspace-dock__visibility-button {
    padding-inline:.85rem;white-space: nowrap
}

.urdf-editor {
    min-height: 180px;
    border: 1px solid rgba(125,211,252,.32);
    border-radius: .95rem;
    background: linear-gradient(180deg,#020617fa,#030a1cfa);
    box-shadow: inset 0 1px #ffffff0a,0 18px 42px #02061747;
    overflow: hidden
}

.urdf-editor__host {
    min-height: inherit;
    height: 100%
}

.urdf-editor__host .cm-editor {
    height: 100%
}

.urdf-editor__host .cm-scroller {
    min-height: inherit
}

.urdf-editor__host .cm-focused {
    outline: none
}

.urdf-editor__host .cm-lineNumbers {
    color: #64748b
}

.urdf-editor__host .cm-foldPlaceholder {
    background: #1e293bb8;
    border: 1px solid rgba(148,163,184,.18);
    color: #cbd5e1
}

.workspace-dock__card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem
}

.workspace-dock__eyebrow {
    margin: 0 0 .2rem;
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #60a5fa
}

.workspace-dock__hint {
    margin: 0;
    color: #94a3b8;
    font-size: .92rem;
    line-height: 1.5
}

.workspace-dock__button-grid,.workspace-dock__color-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(min(140px,100%),1fr));
    gap: .75rem
}

.template-grid--dock {
    grid-template-columns: repeat(auto-fit,minmax(min(170px,100%),1fr))
}

.workspace-dock__code-editor {
    min-height: 180px;
    max-height: min(calc(var(--app-viewport-height) * .48),520px)
}

.workspace-dock__alert {
    margin: 0
}

.workspace-dock__service-box {
    display: grid;
    gap: .85rem;
    padding: .85rem;
    border: 1px solid rgba(125,211,252,.2);
    border-radius: .75rem;
    background: #02061759
}

.workspace-dock__service-section {
    display: grid;
    gap: .35rem
}

.workspace-dock__service-section h4,.workspace-dock__service-section p {
    margin: 0
}

.workspace-dock__service-section h4 {
    color: #e2e8f0;
    font-size: .92rem
}

.workspace-dock__service-section p,.workspace-dock__service-section li {
    color: #cbd5e1;
    line-height: 1.5;
    font-size: .88rem
}

.workspace-dock__service-group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .35rem
}

.workspace-dock__service-section ul {
    margin: 0;
    padding-left: 1.15rem;
    display: grid;
    gap: .2rem
}

@media(max-width: 900px) {
    .viewer-hud--dock {
        max-width:calc(100vw - 1rem)
    }

    .viewer-dock {
        gap: .55rem;
        width: min(28rem,calc(100vw - 1rem));
        transform: translate(calc(100% - 3.25rem))
    }

    .viewer-dock__toggle {
        min-height: 9.5rem
    }

    .workspace-dock {
        max-height: min(28rem,calc(var(--app-viewport-height) - 9rem))
    }
}

@media(max-width: 720px) {
    .viewer-toolbar {
        grid-template-columns:1fr
    }

    .workspace-dock__topbar {
        align-items: stretch;
        flex-direction: column
    }

    .workspace-dock__button-grid,.workspace-dock__color-grid,.template-grid--dock {
        grid-template-columns: 1fr
    }
}

@media(max-width: 1180px) {
    .app-shell {
        flex-direction:column;
        height: auto;
        min-height: var(--app-viewport-height)
    }

    .app-shell__panel {
        min-height: 0
    }

    .app-shell__panel--left-dock,.app-shell__panel--left,.app-shell__panel--right {
        width: 100%!important
    }

    .app-shell__left-dock {
        flex-direction: column-reverse
    }

    .app-shell__panel--left-dock-collapsed {
        width: 100%!important
    }

    .app-shell__panel--left-dock-collapsed .app-shell__panel--left {
        display: none
    }

    .app-shell__left-toggle {
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        min-height: auto;
        padding: .7rem .9rem;
        border-left: 0;
        border-top: 1px solid rgba(96,165,250,.18)
    }

    .app-shell__left-toggle-label {
        writing-mode: initial;
        transform: none;
        letter-spacing: .06em
    }

    .app-shell__panel--left {
        min-height: auto
    }

    .app-shell__panel--right {
        min-height: max(30rem,58vh)
    }

    .panel {
        min-height: auto
    }
}

@media(max-width: 900px) {
    .panel {
        padding:.9rem
    }

    .viewer-hud--dock {
        top: auto;
        right: .75rem;
        bottom: 4.75rem;
        left: .75rem;
        max-width: none;
        justify-content: stretch
    }

    .viewer-dock {
        align-items: flex-end;
        gap: .55rem;
        width: 100%;
        max-width: none;
        transform: translate(calc(100% - 3.25rem))
    }

    .viewer-dock__toggle {
        min-height: 9.5rem
    }

    .workspace-dock {
        max-height: min(32rem,calc(var(--app-viewport-height) - 8rem))
    }
}

@media(max-width: 640px) {
    .panel {
        padding:.8rem
    }

    .panel__meta {
        width: 100%
    }

    .panel__meta span {
        flex: 1 1 8rem;
        justify-content: center;
        text-align: center
    }

    .viewer-shell,.viewer-canvas {
        min-height: max(28rem,calc(var(--app-viewport-height) * .56))
    }

    .viewer-hud--toolbar,.viewer-hud--toolbar-dock-open,.viewer-hud--toolbar-dock-collapsed {
        top: auto;
        bottom: .75rem;
        right: .75rem;
        left: .75rem;
        justify-content: stretch
    }

    .viewer-toolbar {
        border-radius: 1rem
    }

    .viewer-toolbar__section {
        display: grid;
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .viewer-toolbar__button {
        min-height: 2.75rem;
        white-space: normal
    }

    .viewer-hud--dock {
        right: .5rem;
        bottom: 5.5rem;
        left: .5rem
    }

    .viewer-dock {
        flex-direction: column-reverse;
        align-items: stretch;
        transform: translateY(calc(100% - 3rem))
    }

    .viewer-hud--dock-open .viewer-dock {
        transform: translateY(0)
    }

    .viewer-dock__panel {
        width: 100%
    }

    .viewer-dock__toggle {
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        min-height: auto;
        padding: .7rem .9rem
    }

    .viewer-dock__toggle-label,.viewer-dock__toggle-label--cjk {
        writing-mode: initial;
        text-orientation: mixed;
        transform: none;
        letter-spacing: .06em
    }

    .workspace-dock {
        max-height: min(32rem,calc(var(--app-viewport-height) - 10rem));
        padding: .75rem
    }

    .workspace-dock__tab {
        flex: 1 1 calc(50% - .5rem);
        min-width: 0
    }

    .workspace-dock__visibility-button,.workspace-dock__button-grid>*,.workspace-dock__color-grid>*,.template-grid--dock>* {
        width: 100%
    }
}

@media(max-width: 420px) {
    .viewer-toolbar__section {
        grid-template-columns:1fr
    }

    .workspace-dock {
        max-height: min(30rem,calc(var(--app-viewport-height) - 9rem));
        border-radius: .9rem
    }

    .workspace-dock__card,.editor-section,.editor-group,.editor-card,.leg-list__item {
        padding-inline:.8rem}
}