* {
    margin: 0;
    padding: 0;
}

html,
body {
    overflow: hidden;
}

.webgl {
    position: fixed;
    top: 0;
    left: 0;
    outline: none;
}

.jitter {
    animation-duration: 0.3s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: jittery;
    z-index: -10;
}

.interface-wrapper {
    width: 100%;
    top: 64px;
    left: 64px;
}

.icon-control-container {
    height: 26.5px;
    width: 26.5px;
}

@media only screen and (max-width: 768px) {
    .interface-wrapper {
        width: 100%;
        top: 24px;
        left: 24px;
    }

    .icon-control-container {
        height: 19.5px;
        width: 19.5px;
    }
}

@keyframes jittery {
    10% {
        transform: translate(-0.1px, -0.15px) scale(1, 1);
    }

    20% {
        transform: translate(0.15px, 0.1px) scale(1, 1);
    }

    30% {
        transform: translate(-0.2px, -0.25px) scale(1, 1);
    }

    40% {
        transform: translate(0.05px, 0.1px) scale(1, 1);
    }

    50% {
        transform: translate(-0.025px, -0.05px) scale(1, 1);
    }

    60% {
        transform: translate(0px, 0.075px) scale(1, 1);
    }

    70% {
        transform: translate(-0.075px, -0.1px) scale(1, 1);
    }

    80% {
        transform: translate(0.075px, 0.125px) scale(1, 1);
    }

    90% {
        transform: translate(-0.125px, -0.075px) scale(1, 1);
    }

    100% {
        transform: translate(0.075px, 0.025px) scale(1, 1);
    }
}

h1,
h2,
h3,
h4,
h5,
p {
    /* font-family: ocr-a-std, monospace; */
    font-family: monospace;
    font-weight: 400;
    font-style: normal;
    color: white;
    /* mobile friendly font size */
    font-size: 16px;
}

/* if on mobile */
@media only screen and (max-width: 768px) {
    h1,
    h2,
    h3,
    h4,
    h5,
    p {
        font-size: 10px;
    }
}

br {
    padding-top: 8px;
    padding-bottom: 8px;
    height: 16px;
}

.loading::after {
    display: inline-block;
    animation: dotty steps(1, end) 1s infinite;
    content: '';
}

@keyframes dotty {
    0% {
        content: '   ';
    }
    25% {
        content: '. ';
    }
    50% {
        content: '.. ';
    }
    75% {
        content: '...';
    }
    100% {
        content: '   ';
    }
}
.blinking-cursor {
    background-color: #fff;
    width: 0.8em;
    height: 0.15em;
    -webkit-animation: 0.65s blink step-end infinite;
    -moz-animation: 0.65s blink step-end infinite;
    -ms-animation: 0.65s blink step-end infinite;
    -o-animation: 0.65s blink step-end infinite;
    animation: 0.65s blink step-end infinite;
}

@keyframes blink {
    from,
    to {
        background-color: transparent;
    }
    50% {
        background-color: white;
    }
}

@-moz-keyframes blink {
    from,
    to {
        background-color: transparent;
    }
    50% {
        background-color: white;
    }
}

@-webkit-keyframes blink {
    from,
    to {
        background-color: transparent;
    }
    50% {
        background-color: white;
    }
}

@-ms-keyframes blink {
    from,
    to {
        background-color: transparent;
    }
    50% {
        background-color: white;
    }
}

@-o-keyframes blink {
    from,
    to {
        background-color: transparent;
    }
    50% {
        background-color: white;
    }
}

.bios-start-button {
    background-color: #000;
    border: 4px solid #fff;
    border-width: 4px 3px 4px 3px;
}

.bios-start-button p {
    box-sizing: border-box;
    padding: 8px;
}

.bios-start-button:hover p {
    background-color: #fff;
    cursor: pointer;
    color: #000;
}

.loading-screen-header {
    padding: 48px;
}

.loading-screen-body {
    padding-left: 48px;
    padding-right: 48px;
}

.loading-screen-footer {
    padding: 48px;
    padding-bottom: 64px;
}

.info-wrapper {
    top: 64px;
    left: 64px;
}

/* if on mobile make all loading screen elements have a padding of 16 */
@media only screen and (max-width: 768px) {
    .loading-screen-header {
        padding: 16px;
    }

    .info-wrapper {
        top: 16px;
        left: 16px;
    }

    .blinking-cursor {
        background-color: #fff;
        width: 0.4em;
        height: 0.08em;
        -webkit-animation: 0.65s blink step-end infinite;
        -moz-animation: 0.65s blink step-end infinite;
        -ms-animation: 0.65s blink step-end infinite;
        -o-animation: 0.65s blink step-end infinite;
        animation: 0.65s blink step-end infinite;
    }
    
    .loading-screen-body {
        padding-left: 16px;
        padding-right: 16px;
    }

    .loading-screen-footer {
        padding: 16px;
        padding-bottom: 32px;
    }
}

/* Shared neutral palette. Door surfaces stay flat; perspective supplies the motion. */
:root {
    --studio-white: #ffffff;
    --studio-surface: #f5f5f3;
    --studio-line: #dededb;
    --studio-ink: #272725;
    --studio-muted: #71716d;
}
.garage-entry{position:fixed;inset:0;z-index:50;overflow:hidden;pointer-events:auto;display:grid;place-items:center}
.garage-door{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
.garage-panels{position:absolute;inset:0;perspective:140vh;perspective-origin:50% 0%;transform-style:preserve-3d}
.garage-panel{position:absolute;left:0;width:100%;height:calc(25% + 1px);background:var(--studio-surface);border-top:1px solid var(--studio-line);box-sizing:border-box;backface-visibility:visible;transform-origin:50% 50%;will-change:transform}
.garage-panel:first-child{border-top:0}
.garage-copy{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px;box-sizing:border-box;text-align:center;background:var(--studio-surface);pointer-events:none;will-change:transform,opacity}
.garage-intro{max-width:32ch;font:400 clamp(26px,3.25vw,46px)/1.4 Arial,Helvetica,sans-serif!important;letter-spacing:-.025em;color:var(--studio-ink)!important;margin:0!important;text-wrap:balance;white-space:pre-line;animation:intro-arrive .65s ease-out both}
.intro-scroll-arrow{display:inline-flex;margin-top:28px;pointer-events:none;animation:intro-arrow-pulse 2.2s ease-in-out infinite}
.intro-scroll-arrow svg{stroke:var(--studio-muted);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
@keyframes intro-arrow-pulse{0%,100%{opacity:.3}50%{opacity:.8}}
@keyframes intro-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.garage-sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.workspace-loading{position:fixed;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:var(--studio-surface);padding:28px;box-sizing:border-box;text-align:center;opacity:1;transition:opacity .32s ease}
.workspace-loading--leaving{opacity:0;pointer-events:none}
.workspace-spinner{width:40px;height:40px;overflow:visible}
.workspace-track,.workspace-progress{fill:none;stroke-width:2}
.workspace-track{stroke:var(--studio-line)}
.workspace-progress{stroke:var(--studio-ink);stroke-linecap:round}
.workspace-load-message,.workspace-load-error{font:14px/1.6 Arial,Helvetica,sans-serif!important;color:var(--studio-ink)!important;margin:0!important}
.workspace-retry{background:none;border:1px solid var(--studio-line);border-radius:6px;padding:8px 16px;color:var(--studio-ink);font:14px Arial,sans-serif;cursor:pointer}
@media(max-width:600px){.garage-copy{padding:24px}.garage-intro{letter-spacing:-.4px}}
.henry-room-prompt{position:absolute;bottom:64px;display:flex;align-items:flex-end;gap:8px;margin:0;border:0;background:var(--studio-ink);padding:4px 16px;cursor:pointer}
.henry-room-prompt p{margin:0}
.henry-room-prompt .blinking-cursor{display:inline-block;flex-shrink:0;margin-bottom:2px}
.henry-room-prompt:focus-visible{outline:2px solid var(--studio-muted);outline-offset:4px}
@media(prefers-reduced-motion:reduce){.garage-intro,.intro-scroll-arrow,.blinking-cursor{animation:none}.intro-scroll-arrow{opacity:.6}.workspace-loading{transition:none}}

/* The paper's screen projection gives keyboard users an equivalent desk object. */
.paper-access{z-index:4}
.paper-access[hidden]{display:none}
.resume-overlay{position:fixed;inset:0;z-index:100;display:grid;place-items:center;pointer-events:auto;background:rgba(245,245,243,.78);backdrop-filter:blur(3px);padding:20px;box-sizing:border-box}
.resume-sheet{position:relative;width:min(720px,calc(100vw - 40px));height:min(932px,calc(100dvh - 40px));overflow:auto;background:#fffefb;border:1px solid var(--studio-line);box-sizing:border-box;transform-origin:center;box-shadow:0 12px 50px #2727250a;color:var(--studio-ink);font:16px/32px Arial,Helvetica,sans-serif}
.resume-actions{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fffefb;padding:16px 24px;border-bottom:1px solid var(--studio-line)}
.resume-actions button,.resume-actions a{border:0;background:none;padding:6px 0;color:var(--studio-ink);font:13px/1.5 Arial,sans-serif;text-decoration:none;cursor:pointer}
.resume-actions a:hover,.resume-actions button:hover{text-decoration:underline;text-underline-offset:4px}
.resume-sheet a:focus-visible,.resume-sheet button:focus-visible{outline:2px solid var(--studio-muted);outline-offset:4px}
.resume-writing{min-height:calc(100% - 72px);box-sizing:border-box;padding:40px 56px 48px 80px;background-image:linear-gradient(90deg,transparent 55px,#d9d0c7 55px,#d9d0c7 56px,transparent 56px),repeating-linear-gradient(transparent 0,transparent 31px,#e3e4df 31px,#e3e4df 32px)}
.resume-writing h2{font:400 32px/40px Georgia,serif;color:var(--studio-ink);margin:0 0 8px}
.resume-writing h3{font:600 15px/32px Arial,sans-serif;color:var(--studio-ink);margin:32px 0 0}
.resume-writing p{font:16px/32px Arial,sans-serif;color:var(--studio-ink);margin:0 0 16px}
.resume-writing ul{padding-left:20px;margin:0}
.resume-writing li{font:16px/32px Arial,sans-serif}
.resume-writing a{color:var(--studio-ink);text-underline-offset:4px;overflow-wrap:anywhere}
.resume-writing .resume-note{font:12px/24px Arial,sans-serif;color:var(--studio-muted)}
.resume-writing .resume-footer{margin-top:48px}
@media(max-width:600px){.resume-overlay{padding:12px}.resume-sheet{width:calc(100vw - 24px);height:calc(100dvh - 24px)}.resume-actions{padding:12px 16px}.resume-writing{padding:28px 24px 32px 42px;background-image:linear-gradient(90deg,transparent 24px,#d9d0c7 24px,#d9d0c7 25px,transparent 25px),repeating-linear-gradient(transparent 0,transparent 31px,#e3e4df 31px,#e3e4df 32px)}.resume-writing h2{font-size:28px}}

/* Only identify the CAD when it is pointed at or reached with the keyboard. */
.cube-robot-access {
    position: fixed;
    transform: translate(-50%, -100%);
    border: 0;
    padding: 7px 10px;
    background: #171717;
    color: #fff;
    font: 12px monospace;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms ease;
}
.cube-robot-access.is-highlighted,
.cube-robot-access:focus-visible { opacity: 1; }
.cube-robot-access:focus-visible { outline: 2px solid #777; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
    .cube-robot-access { transition: none; }
}

.cube-robot-date { display: block; margin-top: 5px; color: #c9c9c5; font-size: 11px; }
.project-overlay { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: 28px; box-sizing: border-box; pointer-events: auto; background: rgba(245,245,243,.72); backdrop-filter: blur(4px); }
.project-card { width: min(940px, 100%); max-height: calc(100dvh - 56px); overflow: auto; border: 1px solid var(--studio-line); border-radius: 20px; background: var(--studio-white); color: var(--studio-ink); box-shadow: 0 16px 60px #2727250d; font: 15px/1.7 Arial,Helvetica,sans-serif; }
.project-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 28px 30px 24px; }
.project-card h2 { margin: 0; color: var(--studio-ink); font: 500 clamp(22px,2.5vw,28px)/1.25 Arial,Helvetica,sans-serif; letter-spacing: -.025em; }
.project-card-header p { margin: 8px 0 0; color: var(--studio-muted); font: 13px/1.5 Arial,Helvetica,sans-serif; }
.project-close { flex-shrink: 0; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--studio-line); border-radius: 50%; background: none; color: var(--studio-ink); font: 23px/1 Arial,sans-serif; cursor: pointer; }
.project-card-body { display: grid; grid-template-columns: 1.25fr 1fr; gap: 28px; padding: 0 30px 30px; align-items: start; }
.project-video { aspect-ratio: 16/10; border-radius: 12px; overflow: hidden; background: var(--studio-surface); border: 1px solid var(--studio-line); }
.project-video video { position: static; pointer-events: auto; display: block; width: 100%; height: 100%; object-fit: contain; background: #171717; }
.project-video-placeholder { width: 100%; height: 100%; display: grid; place-items: center; color: var(--studio-muted); font: 13px Arial,sans-serif; }
.project-brief h3 { margin: 0 0 12px; font: 500 14px/1.5 Arial,sans-serif; color: var(--studio-ink); }
.project-brief p { margin: 0 0 16px; font: 15px/1.7 Arial,Helvetica,sans-serif; color: var(--studio-ink); }
.project-brief .project-details { color: var(--studio-muted); }
.project-links { display: flex; flex-wrap: wrap; gap: 10px 20px; padding-top: 4px; }
.project-links a, .project-links span { font: 12px/1.6 Arial,sans-serif; color: var(--studio-ink); text-underline-offset: 4px; }
.project-links span { color: var(--studio-muted); }
.project-card button:focus-visible, .project-card a:focus-visible { outline: 2px solid var(--studio-muted); outline-offset: 4px; }
@media (max-width: 700px) {
    .project-overlay { padding: 16px; }
    .project-card { max-height: calc(100dvh - 32px); border-radius: 16px; }
    .project-card-header { padding: 22px 20px; }
    .project-card-body { grid-template-columns: 1fr; gap: 24px; padding: 0 20px 24px; }
}

/* One vertical reader, with lightweight galleries inside its chapters. */
.project-card { max-height: min(780px, calc(100dvh - 56px)); scroll-behavior: smooth; }
.project-card-header { position: sticky; top: 0; z-index: 2; background: var(--studio-white); border-bottom: 1px solid var(--studio-line); margin-bottom: 24px; }
.project-story { padding: 0 30px 32px; border-top: 1px solid var(--studio-line); }
.project-story .story-heading { margin: 28px 0 16px; font: 500 20px/1.4 Arial,sans-serif; color: var(--studio-ink); }
.story-jumps { display: flex; flex-wrap: wrap; gap: 8px 16px; padding-bottom: 28px; }
.story-jumps a { font: 12px/1.6 Arial,sans-serif; color: var(--studio-muted); text-decoration: none; }
.story-jumps a:hover { color: var(--studio-ink); text-decoration: underline; text-underline-offset: 4px; }
.story-timeline { list-style: none; padding: 0 0 0 36px; margin: 0; }
.story-stage { position: relative; padding: 0 0 30px 26px; border-left: 1px solid var(--studio-line); scroll-margin-top: 130px; }
.story-step { position: absolute; left: -15px; top: 0; width: 29px; background: var(--studio-white); color: var(--studio-muted); text-align: center; font: 12px/28px monospace; }
.project-story h4 { margin: 0 0 16px; color: var(--studio-ink); font: 500 17px/28px Arial,sans-serif; }
.story-media-empty, .story-media-frame { aspect-ratio: 16/9; border: 1px solid var(--studio-line); border-radius: 12px; background: var(--studio-surface); overflow: hidden; }
.story-media-empty { display: grid; place-items: center; color: var(--studio-muted); font: 13px Arial,sans-serif; }
.story-gallery { margin: 0; }
.story-media-frame img, .story-media-frame video { position: static; display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: auto; }
.story-gallery figcaption { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0 0; color: var(--studio-muted); font: 12px/1.6 Arial,sans-serif; }
.story-gallery-controls { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.story-gallery-controls button { background: none; color: var(--studio-ink); border: 1px solid var(--studio-line); border-radius: 6px; min-width: 32px; min-height: 32px; cursor: pointer; }
.story-gallery-controls button:disabled { opacity: .3; cursor: default; }
.project-story p { font: 14px/1.75 Arial,sans-serif; color: var(--studio-ink); margin: 14px 0 0; }
.project-story .story-pending { color: var(--studio-muted); }
.story-notes strong { display: block; font-weight: 500; margin-bottom: 4px; }
.story-reflections { border-top: 1px solid var(--studio-line); scroll-margin-top: 130px; }
.story-reflections > div { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.story-reflections h4 { font-size: 15px; margin-bottom: 0; }
@media(max-width:700px) {
    .project-card { max-height: calc(100dvh - 32px); }
    .project-story { padding: 0 20px 24px; }
    .story-timeline { padding-left: 14px; }
    .story-stage { padding-left: 22px; }
    .story-reflections > div { grid-template-columns: 1fr; gap: 22px; }
    .story-gallery figcaption { align-items: flex-start; flex-direction: column; gap: 8px; }
}
@media(prefers-reduced-motion:reduce) { .project-card { scroll-behavior: auto; } }

/* Keep each experiment's evidence beside its explanation on larger screens. */
.project-card { width: min(1080px, 100%); }
.story-stage { padding-bottom: 44px; }
.story-stage-content { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.story-stage .story-gallery { position: sticky; top: 140px; min-width: 0; }
.story-media-frame { width: 100%; box-sizing: border-box; max-height: 430px; animation: story-media-arrive .2s ease-out; }
.story-notes { min-width: 0; }
.story-notes p:first-child { margin-top: 0; }
.project-story .story-notes p { font-size: 15px; line-height: 1.8; }
.story-notes strong { font-weight: 600; }
.story-gallery-controls button { min-width: 40px; min-height: 40px; transition: background-color .15s ease, transform .15s ease; }
.story-gallery-controls button:not(:disabled):hover { background: var(--studio-surface); }
.story-gallery-controls button:not(:disabled):active { transform: scale(.94); }
.project-overlay { animation: project-backdrop-arrive .22s ease-out; }
@keyframes story-media-arrive { from { opacity: .5; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes project-backdrop-arrive { from { opacity: 0; } to { opacity: 1; } }
@media(max-width:800px) {
    .story-stage-content { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .story-stage .story-gallery { position: static; }
    .story-gallery-controls button { min-width: 44px; min-height: 44px; }
}
@media(prefers-reduced-motion:reduce) {
    .paper-access, .story-gallery-controls button { transition: none; }
    .project-overlay, .story-media-frame { animation: none; }
}
@media(max-width:800px) { .project-close { width: 44px; height: 44px; } }
.project-video img { display: block; width: 100%; height: 100%; object-fit: contain; }

.project-header-actions { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.project-expand { border:1px solid var(--studio-line); background:var(--studio-white); color:var(--studio-ink); border-radius:9px; padding:8px 12px; min-height:40px; font:13px Arial,sans-serif; cursor:pointer; }
.project-card { box-sizing:border-box; }
@media(max-width:700px) { .project-header-actions { gap:8px; } }
@media(prefers-reduced-motion:reduce) { .project-card { transition:none; } }

.project-overlay.is-expanded { padding:8px; }
.project-card.is-expanded { width:100%; height:calc(100dvh - 16px); max-height:calc(100dvh - 16px); border-radius:14px; }
.project-card.is-expanded .story-notes p, .project-card.is-expanded .project-brief p { font-size:16px; line-height:1.8; }
.cad-overlay { position:fixed; inset:0; z-index:105; padding:18px; box-sizing:border-box; pointer-events:auto; background:rgba(245,245,243,.7); backdrop-filter:blur(5px); }
.cad-workspace { height:100%; width:100%; display:flex; flex-direction:column; overflow:hidden; border:1px solid #d9dde2; border-radius:14px; background:#fff; color:#292e33; font:14px/1.6 Arial,sans-serif; box-shadow:0 12px 60px #0000000b; animation:workspace-arrive .3s cubic-bezier(.16,1,.3,1); }
.cad-header { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 18px; background:#f0f1f3; border-bottom:1px solid #d9dde2; }
.cad-header>div { display:flex; align-items:center; gap:12px; min-width:0; }
.cad-header h2 { margin:0; font:500 17px Arial,sans-serif; color:#292e33; }
.cad-monogram { font:600 12px Arial,sans-serif; border-radius:6px; background:#3976b9; color:white; padding:6px; }
.cad-document { font-size:12px; color:#7a828b; border-left:1px solid #ccd1d8; padding-left:12px; }
.cad-workspace button { cursor:pointer; color:inherit; font:inherit; }
.cad-header>button { flex-shrink:0; padding:7px 10px; border:1px solid #d0d5db; border-radius:7px; background:white; font-size:12px; min-height:40px; }
.cad-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:9px 18px; color:#69727b; border-bottom:1px solid #e1e5e9; font-size:12px; }
.cad-body { display:grid; grid-template-columns:238px minmax(0,1fr); flex:1; min-height:0; }
.cad-tree { border-right:1px solid #e1e5e9; padding:14px 8px; overflow:auto; background:#fafbfc; }
.cad-tree h3 { font:500 12px Arial,sans-serif; padding:8px 10px 14px; color:#69727b; }
.cad-tree button { display:flex; align-items:flex-start; gap:9px; width:100%; padding:12px 10px; text-align:left; background:none; border:0; border-radius:6px; font-size:13px; }
.cad-tree button[aria-current=page] { background:#e8f0fa; color:#285f99; }
.cad-tree button:hover { background:#eef2f6; }
.cad-tree small { display:block; margin-top:4px; color:#7c858e; font-size:11px; }
.cad-tree-icon { font-size:17px; color:#6686a5; }
.cad-viewport { overflow:auto; min-width:0; background:white; }
.cad-project-preview { max-width:1100px; min-height:100%; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(220px,1fr); align-items:center; gap:40px; padding:40px; box-sizing:border-box; margin:auto; }
.cad-project-preview>img { display:block; width:100%; max-height:60dvh; object-fit:contain; border-radius:10px; }
.cad-project-preview h3, .cad-document-page h3 { margin:0 0 18px; font:500 clamp(24px,3vw,36px)/1.25 Arial,sans-serif; color:#292e33; letter-spacing:-.025em; }
.cad-project-preview p, .cad-document-page p { color:#55616b; font:15px/1.8 Arial,sans-serif; margin:0 0 22px; }
.cad-workspace .cad-eyebrow { font:12px/1.6 Arial,sans-serif; color:#7c858e; margin-bottom:12px; }
.cad-workspace .cad-primary { display:inline-block; text-decoration:none; border:1px solid #3976b9; background:#3976b9; color:white; border-radius:8px; padding:10px 16px; font:14px/1.6 Arial,sans-serif; }
.cad-tabs { display:flex; border-top:1px solid #d9dde2; background:#f1f2f4; flex-shrink:0; }
.cad-tabs button { border:0; border-right:1px solid #d9dde2; border-top:2px solid transparent; padding:12px 24px; background:transparent; font-size:13px; min-height:44px; }
.cad-tabs button[aria-current=page] { background:white; color:#285f99; border-top-color:#3976b9; }
.cad-document-page { max-width:700px; padding:60px 40px; margin:auto; }
.cad-workspace button:focus-visible,.cad-workspace a:focus-visible { outline:2px solid #3976b9; outline-offset:3px; }
@keyframes workspace-arrive { from { opacity:0; transform:translateY(8px) scale(.99); } to { opacity:1; transform:none; } }
@media(max-width:800px) { .cad-project-preview { grid-template-columns:1fr; gap:24px; padding:24px; } .cad-project-preview>img { max-height:32dvh; } .cad-body { grid-template-columns:190px minmax(0,1fr); } }
@media(max-width:560px) { .cad-overlay { padding:8px; } .cad-header { padding:10px; gap:8px; } .cad-header h2 { font-size:14px; } .cad-document { display:none; } .cad-body { display:flex; flex-direction:column; } .cad-tree { max-height:150px; flex-shrink:0; border-right:0; border-bottom:1px solid #e1e5e9; } .cad-tree button { min-height:44px; padding:8px; } .cad-tree h3 { padding:4px 8px 8px; } .cad-tree small { display:none; } .cad-viewport { flex:1; } .cad-project-preview { min-height:auto; padding:22px; } .cad-toolbar { padding:8px 12px; font-size:11px; } .cad-toolbar span:last-child { flex-shrink:0; } .cad-document-page { padding:30px 22px; } }
@media(prefers-reduced-motion:reduce) { .cad-workspace { animation:none; } }
@media(max-width:560px) { .cad-tree { display:grid; grid-template-columns:1fr 1fr; max-height:none; gap:4px; padding:8px; } .cad-tree h3 { grid-column:1/-1; padding:2px 6px 4px; } .cad-tree button { font-size:12px; } }


/*# sourceMappingURL=main.css.map*/