/* The canvas and HTML paper share a measured outlet, in CSS pixels. */
.boot-screen { display: none; }
body.printer-enabled {
    --machine-width: min(820px, 100vw);
    --outlet-width: min(634px, 82vw);
    --outlet-overlap: 75px;
}
.printer-enabled .boot-screen {
    display: block;
    position: relative;
    inset: auto;
    width: var(--machine-width);
    height: auto;
    margin: clamp(28px, calc(50svh - 210px), 160px) auto 0;
    background: none;
    z-index: 3;
    transition: none;
    place-items: normal;
}
.printer-caption {
    display: flex;
    justify-content: space-between;
    margin: 0 7% 18px;
    color: #676760;
    font-size: 10px;
    letter-spacing: .1em;
    font-weight: 400;
}
.printer-scene { position: relative; width: 100%; aspect-ratio: 2.5; pointer-events: none; }
.printer-scene::before {
    content: "";
    position: absolute;
    inset: 57% 12% 11%;
    background: #373731;
    border-radius: 50%;
    filter: blur(24px);
    opacity: .2;
}
.printer-scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.printer-static {
    position: absolute;
    inset: 15% 4% 18%;
    border-radius: 18px 18px 12px 12px;
    border: 1px solid #a6a69f;
    background: linear-gradient(#d6d5cb 0 42%, #babbb2 43%, #c9c9bf 46% 90%, #999b92);
    box-shadow: inset 0 2px #edede6, 0 10px 0 #53574f, 0 16px 0 -3px #373b35;
}
.static-lid { position: absolute; inset: 10% 8% 55%; border: 1px solid #a3a69b; border-radius: 6px; }
.static-label { position: absolute; top: 53%; left: 6%; font-size: 11px; letter-spacing: .12em; color: #51584b; }
.static-led { position: absolute; top: 55%; right: 7%; width: 5px; height: 5px; border-radius: 50%; background: #4a5146; }
.static-slot { position: absolute; left: 5.45%; right: 5.45%; height: 12px; bottom: 4%; border-radius: 4px; background: #242923; box-shadow: 0 2px #f0f0e5; }
.has-webgl .printer-static { visibility: hidden; }
body:not([data-printer-state="idle"]) .static-led { background: #759263; }
.printer-controls {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    width: 100%;
    text-align: center;
    display: grid;
    justify-items: center;
    gap: 15px;
}
#printer-status { font-size: 11px; font-weight: 400; letter-spacing: .025em; color: #5c6056; }
.power-button {
    font-family: var(--font-family);
    display: flex;
    flex-direction: row;
    gap: 12px;
    padding: 12px 20px;
    border: 1px solid #3e453b;
    border-radius: 5px;
    color: #f9faf4;
    background: #353c32;
    box-shadow: 0 3px 0 #20271f;
    min-height: 48px;
    cursor: pointer;
}
.power-button:hover { background: #424b3f; }
.power-button:hover .power-glyph { background: none; color: inherit; transform: none; }
.power-glyph { display: block; width: 20px; height: 20px; border: 0; }
.power-icon { width: 100%; height: 100%; }
.power-label { font-size: 11px; letter-spacing: .09em; }
.power-button:focus-visible, .skip-animation:focus-visible { outline: 2px solid #093ccf; outline-offset: 5px; }
.power-button:disabled { cursor: default; opacity: .75; }
.printer-hint { font-size: 10px; font-weight: 400; color: #6e7169; }
.skip-animation {
    font: 12px var(--font-family);
    color: #343c31;
    background: #f3f3ed;
    border: 1px solid #a8ada2;
    border-radius: 4px;
    min-height: 44px;
    padding: 10px 16px;
    cursor: pointer;
}
[hidden] { display: none !important; }
.printer-enabled .container {
    position: relative;
    display: block;
    width: 100%;
    min-height: 0;
    padding: 0;
    margin-top: calc(-1 * var(--outlet-overlap));
    /* Space for the tilt/shadow, without exposing the unprinted HTML. */
    height: var(--feed-height, 0px);
    overflow: clip;
    overflow-clip-margin: 0px;
}
.printer-enabled .left-half {
    flex: none;
    width: var(--outlet-width);
    min-width: 0;
    max-width: none;
    margin: 0 auto 48px;
    transform: rotate(var(--paper-tilt));
    animation: none;
}
.printer-enabled .right-half { display: none; }
/* Programmatic reading target; interactive controls retain visible focus rings. */
#portfolio:focus { outline: none; }
.printer-enabled:not(.is-on) { min-height: 100svh; padding-bottom: 180px; }
.printer-enabled:not(.is-on) .left-half { visibility: hidden; }
.printer-enabled .left-half::before {
    content: "";
    position: absolute;
    top: calc(100% - 2px);
    left: 0;
    width: 100%;
    height: 12px;
    background: var(--paper-color);
    mask: var(--tear-down) repeat-x 0 0 / 20px 12px;
}
.printer-enabled .left-half::after { display: none; }
.printer-enabled.is-on .printer-controls {
    position: fixed;
    top: auto;
    bottom: max(16px, env(safe-area-inset-bottom));
    left: 50%;
    width: max-content;
    max-width: calc(100% - 24px);
    transform: translateX(-50%);
    padding: 10px 16px;
    border: 1px solid #c0c3b9;
    border-radius: 6px;
    background: #e6e6e4;
    gap: 8px;
}
.printer-enabled.is-on .power-button, .printer-enabled.is-on .printer-hint { display: none; }
[data-printer-state="completed"] .printer-controls { position: absolute !important; top: 10px !important; bottom: auto !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
[data-printer-state="completed"] .printer-controls #printer-status { font-size: 10px; }
[data-printer-state="completed"] .container { height: auto; overflow: visible; }
.page-hidden *, .page-hidden *::before, .page-hidden *::after { animation-play-state: paused !important; }
@media (max-width: 640px) {
    .printer-caption { font-size: 8px; letter-spacing: .02em; }
    .printer-enabled .boot-screen { margin-top: clamp(24px, calc(38svh - 100px), 120px); }
    .printer-scene::before { filter: blur(12px); }
    .printer-enabled .left-half { box-shadow: 3px 5px 12px #0002; }
}
@media (prefers-reduced-motion: reduce) {
    .power-glyph { transition: none; }
}