.motion-template-preview {
    display: block;
    position: relative;
    height: 48px;
    overflow: hidden;
    contain: layout paint;
    isolation: isolate;
    background-color: #070708;
    background-image:
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
    background-size: 12px 12px;
}

.motion-template-svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    color: #777;
    pointer-events: none;
}


.motion-template-svg path,
.motion-template-svg ellipse,
.motion-template-svg rect {
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.45px !important;
    vector-effect: non-scaling-stroke;
}

.motion-template-svg rect {
    fill: #101012 !important;
}

.motion-template-card.active .motion-template-svg rect {
    fill: var(--primary-dim) !important;
}

.motion-showcase-title svg path,
.motion-showcase-title svg rect,
.motion-refresh-selection svg path,
.motion-render svg path {
    fill: none !important;
    stroke: currentColor !important;
}

.motion-template-card:hover .motion-template-svg {
    color: #aaa;
}

.motion-template-card.active .motion-template-svg {
    color: var(--primary);
}

.motion-template-svg .motion-preview-cards,
.motion-template-svg .motion-preview-stack {
    transform-box: fill-box;
    transform-origin: center;
    animation: akiraMotionPreviewFloat 3.2s ease-in-out infinite;
}

.motion-template-card[data-template="helix"] .motion-template-svg .motion-preview-cards {
    animation-delay: -.8s;
}

.motion-template-card[data-template="depth"] .motion-template-svg .motion-preview-stack {
    animation-name: akiraMotionPreviewDepth;
}

.content-area,
.view,
#view-shapes,
#shape-subview-layout,
#shape-subview-templates,
#shape-subview-morph,
#shape-subview-tools {
    overflow-x: hidden !important;
}

#shape-subview-layout,
#shape-subview-templates,
#shape-subview-morph,
#shape-subview-tools {
    overflow-y: auto !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

#shape-subview-layout {
    padding: 2px 6px 10px 6px !important;
}

#shape-subview-layout .motion-showcase-shell {
    flex: 0 0 auto;
    margin: 6px 6px 12px 6px !important;
    box-sizing: border-box !important;
    width: auto !important;
    max-width: calc(100% - 12px) !important;
    overflow-x: hidden !important;
}


.motion-template-card {
    white-space: normal !important;
    min-width: 0 !important;
}

.motion-template-copy {
    word-break: break-word !important;
}


.motion-control input[type="range"] {
    min-width: 0 !important;
    width: 100% !important;
}


@media (max-width: 360px) {
    .motion-template-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 4px !important;
    }
    .motion-template-card {
        padding: 4px !important;
    }
    .motion-template-name {
        font-size: 6.8px !important;
    }
    .motion-template-copy {
        font-size: 5.8px !important;
        line-height: 1.1 !important;
    }
    .motion-control {
        grid-template-columns: 66px minmax(0, 1fr) 28px !important;
        gap: 4px !important;
    }
    .motion-control label {
        font-size: 6.5px !important;
    }
    .motion-control output {
        font-size: 6.5px !important;
    }
    .motion-ratio-row,
    .motion-duration-row {
        gap: 2px !important;
    }
    .motion-choice {
        font-size: 6.5px !important;
        padding: 0 2px !important;
    }
    .motion-action-row {
        grid-template-columns: 1.2fr 1fr 26px !important;
        gap: 3px !important;
    }
    .motion-action-row button {
        font-size: 7px !important;
        height: 26px !important;
    }
}

#layout-presets-grid {
    flex: none !important;
    height: auto !important;
    min-height: auto !important;
    overflow-y: visible !important;
}


.layout-preset-card {
    background: rgba(255, 255, 255, 0.015) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 6px !important;
    padding: 6px !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.layout-preset-card:hover {
    border-color: var(--accent) !important;
    background: rgba(255, 255, 255, 0.035) !important;
    transform: translateY(-1.5px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.layout-preset-card svg {
    background: rgba(0, 0, 0, 0.45) !important;
    border: 1px solid rgba(255, 255, 255, 0.02) !important;
    border-radius: 4px !important;
}

.layout-preset-card .layout-rect {
    fill: var(--accent) !important;
    fill-opacity: 0.12 !important;
    stroke: var(--accent) !important;
    stroke-width: 1px !important;
    vector-effect: non-scaling-stroke;
    transition: all 0.2s ease !important;
}

.layout-preset-card:hover .layout-rect {
    fill-opacity: 0.22 !important;
    stroke-width: 1.5px !important;
}

.layout-preset-name {
    font-size: 8px !important;
    color: #888 !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    transition: color 0.25s ease !important;
}

.layout-preset-card:hover .layout-preset-name {
    color: #eee !important;
}

@keyframes akiraMotionPreviewFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

@keyframes akiraMotionPreviewDepth {
    0%, 100% { transform: translate(-1px, 1px); }
    50% { transform: translate(2px, -1px); }
}


.sub-tab-bar {
    display: flex !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    flex-wrap: nowrap !important;
}

.sub-tab-btn {
    flex: 1 1 0% !important;
    padding: 6px 2px !important;
    font-size: 7.5px !important;
    letter-spacing: 0.2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0 !important;
    text-align: center !important;
}


.global-footer {
    --footer-btn-size: 34px !important;
    --footer-divider-margin: 6px !important;
    min-height: 42px !important;
}

.global-footer .icon-btn svg {
    width: calc(var(--footer-btn-size) * 0.48) !important;
    height: calc(var(--footer-btn-size) * 0.48) !important;
}

.global-footer .divider {
    height: calc(var(--footer-btn-size) * 0.48) !important;
}

@media (max-width: 510px) {
    .global-footer {
        --footer-btn-size: 31px !important;
        --footer-divider-margin: 5px !important;
        --align-group-gap: 2px !important;
        min-height: 38px !important;
        padding: 3px 6px !important;
    }
}

@media (max-width: 450px) {
    .global-footer {
        --footer-btn-size: 28px !important;
        --footer-divider-margin: 4px !important;
        --align-group-gap: 1.5px !important;
        min-height: 34px !important;
        padding: 2px 6px !important;
    }
}

@media (max-width: 390px) {
    .global-footer {
        --footer-btn-size: 25px !important;
        --footer-divider-margin: 3px !important;
        --align-group-gap: 1px !important;
        min-height: 31px !important;
        padding: 2px 4px !important;
    }
}

@media (max-width: 330px) {
    .global-footer {
        --footer-btn-size: 22px !important;
        --footer-divider-margin: 2px !important;
        --align-group-gap: 0.5px !important;
        min-height: 28px !important;
        padding: 2px 3px !important;
    }
}

@media (max-width: 270px) {
    .global-footer {
        --footer-btn-size: 19px !important;
        --footer-divider-margin: 1px !important;
        --align-group-gap: 0px !important;
        min-height: 24px !important;
        padding: 1px 2px !important;
    }
}