.experience-page {
    flex: 1 0 auto;
    display: block;
    background:
        radial-gradient(circle at top left, rgba(255, 210, 120, 0.28), transparent 26%),
        linear-gradient(180deg, #f6efe4 0%, #edf4fb 100%);
    padding: 1rem 0.85rem 2.75rem;
}

.experience-shell {
    width: min(1180px, 100%);
    margin: 0 auto;
    display: grid;
    gap: var(--space-3);
}

.experience-hero,
.experience-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 24px rgba(26, 37, 48, 0.08);
}

.experience-hero {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4);
    align-items: flex-start;
}

.experience-kicker {
    margin: 0 0 0.3rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: var(--text-xs);
    color: #6f7f8f;
}

.experience-hero h1 {
    margin: 0;
    font-size: var(--text-xl);
    line-height: 1.05;
}

.experience-hero p:last-child {
    margin-bottom: 0;
    max-width: 56rem;
    color: #425569;
}

.experience-actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    justify-content: flex-end;
}

.experience-bento {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-3);
}

.experience-card {
    grid-column: span 4;
    padding: var(--space-4);
}

.experience-card h2,
.experience-card h3 {
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.experience-card p:last-child {
    margin-bottom: 0;
}

.experience-card-wide {
    grid-column: span 8;
}

.experience-card-full {
    grid-column: 1 / -1;
}

.experience-card-qr {
    display: grid;
    place-items: center;
    gap: 0.65rem;
    text-align: center;
}

.experience-qr-frame {
    display: grid;
    place-items: center;
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, #ffffff 0%, #f2f6f9 100%);
    border: 1px solid #d7e1ea;
}

.experience-qr-frame img {
    width: min(100%, 220px);
    height: auto;
    display: block;
}

.experience-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    word-break: break-word;
}

.experience-data-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem 0.8rem;
}

.experience-data-grid strong {
    color: #1f3142;
}

.experience-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0.28rem 0.72rem;
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: 0.82rem;
    background: #e7eef8;
    color: #24405d;
}

.experience-pill--warn {
    background: #fff0cf;
    color: #7a4d00;
}

.experience-pill--danger {
    background: #ffd8d8;
    color: #8a1e1e;
}

.experience-pill--success {
    background: #dff4e1;
    color: #16623b;
}

.experience-toolbar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-2);
}

.experience-field,
.experience-search {
    display: grid;
    gap: 0.35rem;
}

.experience-field label,
.experience-search label {
    font-weight: 700;
    color: #354a5e;
    font-size: var(--text-sm);
}

.experience-field input,
.experience-field select,
.experience-search input,
.experience-field textarea {
    width: 100%;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    padding: 0.72rem 0.85rem;
    font-size: var(--text-md);
    background: #fffdf9;
}

.experience-field input,
.experience-field select,
.experience-search input {
    min-height: var(--control-height);
}

.experience-field input:focus,
.experience-field select:focus,
.experience-search input:focus,
.experience-field textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(8, 35, 70, 0.12);
}

.experience-field textarea {
    resize: vertical;
}

.experience-toolbar-actions {
    display: flex;
    gap: 0.6rem;
    align-items: end;
    flex-wrap: wrap;
}

.experience-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
}

.experience-stat {
    display: grid;
    gap: 0.45rem;
    text-align: center;
}

.experience-stat-label {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #708091;
}

.experience-stat-value {
    font-size: 1.7rem;
    font-weight: 800;
    color: #243446;
}

.experience-stat-note {
    font-size: 0.9rem;
    color: #576a7c;
}

.experience-list {
    display: grid;
    gap: 0.8rem;
}

.experience-list-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: start;
}

.experience-list-main {
    display: grid;
    gap: 0.45rem;
}

.experience-list-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem 0.7rem;
}

.experience-list-actions {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.experience-order-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
}

.experience-subtle {
    color: var(--color-muted);
}

.home-page {
    display: block;
    background:
        radial-gradient(circle at top left, rgba(255, 210, 120, 0.28), transparent 26%),
        linear-gradient(180deg, #f6efe4 0%, #edf4fb 100%);
}

.home-shell {
    display: grid;
    grid-template-columns: minmax(14rem, 16rem) minmax(0, 1fr);
    gap: 0;
    min-height: calc(100vh - var(--top-chrome-height));
}

.home-main {
    display: grid;
    gap: 1rem;
    padding: var(--space-4);
}

.home-banner-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.home-banner-card {
    display: block;
    text-decoration: none;
    color: inherit;
    padding: 1.2rem;
    min-height: 10rem;
    position: relative;
    overflow: hidden;
}

.home-banner-card h2,
.home-banner-card h3 {
    margin: 0 0 0.45rem;
}

.home-banner-card p {
    margin: 0;
    max-width: 28ch;
}

.home-banner-card--brand {
    background:
        linear-gradient(145deg, rgba(255,255,255,0.95), rgba(243,248,252,0.95));
}

.home-banner-card--utility {
    background:
        linear-gradient(145deg, rgba(233,241,250,0.92), rgba(255,255,255,0.95));
}

.home-banner-card--yaskawa::after {
    content: "";
    position: absolute;
    inset: 0.75rem 0.75rem auto auto;
    width: 42%;
    height: 42%;
    background: center / contain no-repeat url("/static/img/Yaskawa_logo.svg");
    opacity: 0.18;
    pointer-events: none;
}

.home-category-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.home-category-card {
    display: flex;
    gap: 0.8rem;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

.home-category-copy h3 {
    margin: 0 0 0.25rem;
}

.home-category-copy p {
    margin: 0;
    color: #576a7c;
}

.mini-map {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #d7e1ea;
    min-height: 260px;
}

.mini-map iframe {
    display: block;
    width: 100%;
    min-height: 260px;
    border: 0;
}

@media (max-width: 1080px) {
    .experience-stat-grid,
    .home-banner-grid,
    .home-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .experience-card,
    .experience-card-wide {
        grid-column: span 6;
    }

    .home-shell {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .experience-hero,
    .experience-list-item {
        grid-template-columns: 1fr;
        display: grid;
    }

    .experience-actions,
    .experience-list-actions {
        justify-content: flex-start;
    }

    .experience-card,
    .experience-card-wide,
    .experience-card-full {
        grid-column: 1 / -1;
    }

    .experience-stat-grid,
    .experience-toolbar,
    .experience-data-grid,
    .experience-list-meta,
    .experience-order-grid,
    .home-banner-grid,
    .home-category-grid {
        grid-template-columns: 1fr;
    }
}