:root {
        --paper: #f4f0df;
        --paper-deep: #d9d1bd;
        --ink: #111111;
        --cyan: #1ecaf0;
        --acid: #f5ff3b;
        --red: #ff4e42;
        --green: #75f28b;
        --white: #fffef7;
        --line: 3px solid var(--ink);
        --shadow-sm: 4px 4px 0 var(--ink);
        --shadow-lg: 9px 9px 0 var(--ink);
        --display: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
        --mono: "Courier New", Courier, ui-monospace, monospace;
        --body: Arial, Helvetica, sans-serif;
      }

      *,
      *::before,
      *::after {
        box-sizing: border-box;
      }

      html {
        background: var(--paper);
      }

      body {
        min-height: 100vh;
        margin: 0;
        overflow-x: hidden;
        background-color: var(--paper);
        background-image:
          linear-gradient(rgba(17, 17, 17, 0.08) 1px, transparent 1px),
          linear-gradient(90deg, rgba(17, 17, 17, 0.08) 1px, transparent 1px);
        background-size: 28px 28px;
        color: var(--ink);
        font-family: var(--body);
      }

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

      button:focus-visible,
      input:focus-visible,
      select:focus-visible,
      textarea:focus-visible {
        outline: 4px solid var(--cyan) !important;
        outline-offset: 2px;
      }

      .app-shell {
        width: min(1560px, calc(100% - 40px));
        max-width: none;
        margin: 0 auto !important;
        padding: 28px 0 72px;
      }

      .app-header {
        position: relative;
        display: flex;
        align-items: stretch;
        justify-content: space-between;
        gap: 24px;
        min-height: 132px;
        margin-bottom: 32px !important;
        padding: 18px;
        border: 4px solid var(--ink);
        background: var(--acid);
        box-shadow: var(--shadow-lg);
        color: var(--ink) !important;
      }

      .brand-lockup {
        display: flex;
        min-width: 0;
        align-items: center;
        gap: 18px;
      }

      .app-logo {
        width: 88px;
        height: 88px;
        flex: 0 0 auto;
        border: var(--line);
        background: var(--cyan);
        object-fit: cover;
      }

      .brand-kicker,
      .deck-label,
      .artboard-label,
      .utility-kicker,
      .header-meta {
        margin: 0;
        font-family: var(--mono);
        font-size: 0.72rem;
        font-weight: 900;
        letter-spacing: 0.12em;
        line-height: 1.2;
        text-transform: uppercase;
      }

      .app-title {
        margin: 0;
        font-family: var(--display);
        font-size: clamp(3rem, 6vw, 5.8rem);
        font-weight: 900;
        letter-spacing: -0.045em;
        line-height: 0.82;
        text-transform: uppercase;
      }

      .header-meta {
        display: grid;
        min-width: 180px;
        align-content: space-between;
        justify-items: end;
        text-align: right;
      }

      .header-meta .badge {
        padding: 0.55rem 0.7rem;
        border: var(--line);
        border-radius: 0;
        background: var(--red) !important;
        box-shadow: var(--shadow-sm);
        color: var(--ink) !important;
        font-family: var(--mono);
        font-size: 0.8rem;
        text-transform: uppercase;
      }

      .canvas-container {
        display: grid;
        grid-template-columns: minmax(300px, 350px) minmax(0, 1fr);
        align-items: start;
        gap: 32px;
      }

      .controls {
        display: flex !important;
        width: 100%;
        min-width: 0;
        flex-direction: column;
        align-items: stretch !important;
        gap: 16px;
      }

      .source-panel {
        width: 100%;
        margin: 0 !important;
        padding: 16px;
        border: var(--line);
        background: var(--white);
        box-shadow: var(--shadow-sm);
      }

      .source-panel .form-label {
        margin-bottom: 10px;
      }

      .source-panel + .source-revert {
        margin-bottom: 4px !important;
      }

      .control-stack {
        display: flex;
        width: 100%;
        min-width: 0;
        flex-direction: column;
        gap: 14px;
      }

      .control-module.container,
      #detect-holder.container {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
      }

      .control-module > .btn-info {
        display: flex;
        width: 100% !important;
        min-height: 52px;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 0.7rem 0.85rem;
        border: var(--line);
        border-radius: 0;
        background: var(--cyan);
        box-shadow: var(--shadow-sm);
        color: var(--ink);
        font-family: var(--mono);
        font-size: 0.82rem;
        font-weight: 900;
        letter-spacing: 0.035em;
        text-align: left !important;
        text-transform: uppercase;
      }

      .control-module:nth-of-type(even) > .btn-info {
        background: var(--acid);
      }

      .control-module > .btn-info::after {
        content: "+";
        display: grid;
        width: 26px;
        height: 26px;
        flex: 0 0 auto;
        place-items: center;
        border: 2px solid var(--ink);
        background: var(--white);
        font-size: 1.2rem;
        line-height: 1;
      }

      .control-module > .btn-info[aria-expanded="true"]::after {
        content: "−";
        background: var(--red);
      }

      .control-module > .collapse {
        padding: 0 4px 4px 0;
      }

      .control-module > .collapse > .card-body {
        gap: 12px;
        margin-top: 3px;
        padding: 16px;
        border: var(--line);
        border-top: 0;
        border-radius: 0;
        background: var(--white);
        box-shadow: var(--shadow-sm);
      }

      .card,
      .modal-content {
        border-radius: 0 !important;
      }

      .card {
        border: 0;
        background: transparent;
      }

      .card .card {
        margin: 12px 0;
        padding: 10px;
        border: 2px solid var(--ink);
        background: var(--paper);
      }

      .form-label,
      .form-check-label,
      .card label {
        color: var(--ink);
        font-family: var(--mono);
        font-size: 0.72rem !important;
        font-weight: 900;
        letter-spacing: 0.06em;
        text-transform: uppercase;
      }

      .form-control,
      .form-select {
        min-height: 46px;
        border: 2px solid var(--ink);
        border-radius: 0;
        background-color: var(--white);
        color: var(--ink);
        box-shadow: none !important;
      }

      textarea.form-control {
        min-height: 104px;
        resize: vertical;
      }

      .form-control::placeholder {
        color: #5f5a50;
        opacity: 1;
      }

      .form-control[type="file"] {
        padding: 0;
        font-family: var(--mono);
        font-size: 0.74rem;
      }

      .form-control[type="file"]::file-selector-button {
        height: 42px;
        margin-right: 10px;
        padding: 0 12px;
        border: 0;
        border-right: 2px solid var(--ink);
        background: var(--acid);
        color: var(--ink);
        font-family: var(--mono);
        font-weight: 900;
        text-transform: uppercase;
      }

      .form-check-input {
        border: 2px solid var(--ink);
        border-radius: 0 !important;
        box-shadow: none !important;
      }

      .form-check-input:checked {
        border-color: var(--ink);
        background-color: var(--cyan);
      }

      .form-range {
        min-height: 34px;
      }

      .form-range::-webkit-slider-runnable-track {
        height: 8px;
        border: 2px solid var(--ink);
        border-radius: 0;
        background: var(--white);
      }

      .form-range::-webkit-slider-thumb {
        width: 20px;
        height: 20px;
        margin-top: -8px;
        border: 2px solid var(--ink);
        border-radius: 0;
        background: var(--red);
        box-shadow: 2px 2px 0 var(--ink);
      }

      .btn {
        min-height: 44px;
        min-width: 0;
        border: 2px solid var(--ink) !important;
        border-radius: 0 !important;
        color: var(--ink);
        font-family: var(--mono);
        font-size: 0.78rem;
        font-weight: 900;
        white-space: normal;
        text-transform: uppercase;
        transition: transform 80ms ease, box-shadow 80ms ease;
      }

      .btn:hover {
        z-index: 2;
        color: var(--ink);
        transform: translate(-2px, -2px);
        box-shadow: 4px 4px 0 var(--ink);
      }

      .btn:active {
        transform: translate(0, 0);
        box-shadow: none;
      }

      .btn-danger {
        background: var(--red);
      }

      .btn-info,
      .btn-primary {
        background: var(--cyan);
      }

      .btn-warning {
        background: var(--acid);
      }

      .btn-success {
        background: var(--green);
      }

      .btn-secondary,
      .btn-outline-primary,
      .btn-outline {
        background: var(--white);
      }

      .btn-dark {
        background: var(--ink);
        color: var(--white);
      }

      .btn-dark:hover {
        color: var(--acid);
      }

      .btn.active,
      .btn[aria-pressed="true"] {
        background: var(--red) !important;
        color: var(--ink) !important;
        box-shadow: inset 0 0 0 2px var(--white);
      }

      .btn-group {
        width: 100%;
        min-width: 0;
      }

      .btn-group > .btn {
        flex: 1 1 0;
        box-shadow: none;
      }

      .btn-group > .btn + .btn {
        margin-left: -2px;
      }

      .source-revert {
        min-height: 52px;
        box-shadow: var(--shadow-sm);
      }

      #mainControls {
        position: static;
        order: -1;
        z-index: auto;
        width: 100%;
        min-width: 0;
        max-height: none;
        margin: 0;
        padding: 12px;
        overflow: visible;
        border: var(--line);
        border-radius: 0;
        background: var(--cyan) !important;
        box-shadow: var(--shadow-sm);
      }

      #mainControlsHeader {
        display: flex;
        width: 100%;
        min-height: 48px;
        margin-bottom: 12px;
        padding: 10px 12px;
        align-items: center;
        justify-content: space-between;
        border: var(--line);
        border-radius: 0;
        background: var(--acid);
        color: var(--ink);
        cursor: default;
        font-family: var(--mono);
        font-size: 0.84rem;
        font-weight: 900;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        touch-action: auto;
        user-select: none;
      }

      #mainControls .btn-group-vertical {
        gap: 8px;
        min-width: 0;
        margin: 0 !important;
      }

      #mainControls .btn-group {
        margin: 0 !important;
      }

      #mainControls .card {
        margin: 0;
        padding: 8px;
        border: 2px solid var(--ink);
        background: var(--white);
      }

      #mainControls input[type="color"] {
        width: 54px;
        height: 44px;
        margin: 0 !important;
        padding: 5px;
        flex: 0 0 54px;
        border: 2px solid var(--ink);
        border-radius: 0;
        background: var(--white);
      }

      .tool-text {
        display: inline-block;
        margin-left: 0.25rem;
        font-size: 0.68rem;
      }

      .main-canvas {
        min-width: 0;
      }

      .artboard-header,
      .artboard-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        border: var(--line);
        background: var(--ink);
        color: var(--white);
        font-family: var(--mono);
        font-size: 0.74rem;
        font-weight: 900;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .artboard-header {
        padding: 10px 12px;
        border-bottom: 0;
      }

      .artboard-header .status-mark {
        color: var(--acid);
      }

      .canvas-stage {
        position: relative;
        width: 100%;
        overflow: auto;
        border: 4px solid var(--ink);
        background-color: var(--white);
        background-image:
          linear-gradient(45deg, var(--paper-deep) 25%, transparent 25%),
          linear-gradient(-45deg, var(--paper-deep) 25%, transparent 25%),
          linear-gradient(45deg, transparent 75%, var(--paper-deep) 75%),
          linear-gradient(-45deg, transparent 75%, var(--paper-deep) 75%);
        background-position: 0 0, 0 12px, 12px -12px, -12px 0;
        background-size: 24px 24px;
        box-shadow: var(--shadow-lg);
        line-height: 0;
      }

      canvas {
        width: 100%;
        height: auto;
      }

      #myCanvas {
        position: relative;
        z-index: 1;
        display: block;
        border: 0;
        border-radius: 0;
        background: transparent;
      }

      #overlayCanvas,
      #maskCanvas {
        position: absolute;
        top: 0;
        left: 0;
        pointer-events: none;
      }

      #overlayCanvas {
        z-index: 3;
      }

      #maskCanvas {
        z-index: 2;
      }

      .artboard-footer {
        margin: 12px 0 0 12px;
        padding: 8px 10px;
        border-color: var(--ink);
        background: var(--acid);
        box-shadow: var(--shadow-sm);
        color: var(--ink);
      }

      #resolutionLabel2 {
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent !important;
        color: inherit !important;
        font: inherit;
      }

      #loading {
        width: 72px;
        height: 72px;
        border: var(--line);
        background: var(--white);
        box-shadow: var(--shadow-sm);
        object-fit: cover;
      }

      .thumbnail {
        width: 100%;
      }

      #thumbnailCanvas {
        width: 100%;
        border: var(--line);
        border-radius: 0;
        background: var(--white);
        box-shadow: var(--shadow-sm);
      }

      #imageWorkspace[hidden],
      #pixelStudioWorkspace[hidden] {
        display: none !important;
      }

      .pixel-studio-launcher {
        display: grid;
        gap: 12px !important;
      }

      .pixel-launcher-copy {
        margin: 0;
        font-size: 0.86rem;
        line-height: 1.4;
      }

      .pixel-workspace {
        min-width: 0;
        border: 4px solid var(--ink);
        background: var(--white);
        box-shadow: var(--shadow-lg);
      }

      .pixel-workspace-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        padding: 16px 18px;
        border-bottom: 4px solid var(--ink);
        background: var(--acid);
      }

      .pixel-workspace-title {
        margin: 0;
        font-family: var(--display);
        font-size: clamp(2.6rem, 5vw, 4.7rem);
        letter-spacing: -0.035em;
        line-height: 0.9;
        text-transform: uppercase;
      }

      .pixel-studio {
        --pixel-check-light: #c1c1c1;
        --pixel-check-dark: #7f7f7f;
        display: grid;
        min-width: 0;
        grid-template-columns: minmax(0, 1fr) minmax(330px, 400px);
        gap: 24px;
        padding: 20px;
        background-color: var(--paper);
        background-image:
          linear-gradient(rgba(17, 17, 17, 0.07) 1px, transparent 1px),
          linear-gradient(90deg, rgba(17, 17, 17, 0.07) 1px, transparent 1px);
        background-size: 20px 20px;
      }

      .pixel-workbench,
      .pixel-inspector {
        min-width: 0;
        padding: 16px;
        border: var(--line);
        box-shadow: var(--shadow-sm);
      }

      .pixel-workbench {
        display: grid;
        align-content: start;
        gap: 18px;
        background: var(--cyan);
      }

      .pixel-inspector {
        display: grid;
        align-content: start;
        gap: 12px;
        background: var(--white);
      }

      .pixel-workbench-heading,
      .pixel-studio-intro,
      .pixel-library-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding-bottom: 10px;
        border-bottom: 2px solid var(--ink);
      }

      .pixel-workbench-heading h3 {
        margin: 2px 0 0;
        font-family: var(--display);
        font-size: clamp(2rem, 4vw, 3.4rem);
        line-height: 0.95;
        text-transform: uppercase;
      }

      .pixel-library-heading span,
      .pixel-studio-size,
      .pixel-frame-count {
        font-family: var(--mono);
        font-size: 0.68rem;
        font-weight: 900;
        letter-spacing: 0.06em;
        text-transform: uppercase;
      }

      .pixel-visually-hidden {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
      }

      .pixel-name-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 48px;
        gap: 7px;
      }

      .pixel-name-row .btn {
        min-width: 48px;
        padding-inline: 0;
      }

      .pixel-tool-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 7px;
      }

      .pixel-tool-section {
        display: grid;
        gap: 7px;
        padding: 9px;
        border: 2px solid var(--ink);
        background: var(--paper);
      }

      .pixel-tool-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
      }

      .pixel-tool-heading span {
        font-family: var(--mono);
        font-size: 0.62rem;
        font-weight: 900;
        text-transform: uppercase;
      }

      .pixel-tool-help {
        margin: 0;
        font-size: 0.72rem;
        line-height: 1.4;
      }

      .pixel-history-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
      }

      .pixel-shape-glyph {
        display: inline-block;
        min-width: 1.1em;
        font-size: 1rem;
        line-height: 0.8;
      }

      .pixel-tool-grid .btn,
      .pixel-history-actions .btn,
      .pixel-frame-actions .btn,
      .pixel-bridge-actions .btn {
        min-height: 44px;
        padding: 0.5rem 0.4rem;
        font-size: 0.7rem;
      }

      .pixel-color-readout {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 8px 9px;
        border: 2px solid var(--ink);
        background: var(--paper);
        font-family: var(--mono);
        font-size: 0.7rem;
        font-weight: 900;
        text-transform: uppercase;
      }

      #pixelCurrentColor {
        width: 30px;
        height: 30px;
        flex: 0 0 30px;
        border: 2px solid var(--ink);
        background: #be2633;
      }

      .pixel-palette {
        display: grid;
        grid-template-columns: repeat(8, minmax(0, 1fr));
        gap: 6px;
      }

      .pixel-swatch {
        min-width: 0;
        min-height: 34px;
        aspect-ratio: 1;
        padding: 0;
        border: 2px solid var(--ink);
        border-radius: 0;
        box-shadow: none;
      }

      .pixel-swatch:hover {
        transform: translate(-1px, -1px);
        box-shadow: 2px 2px 0 var(--ink);
      }

      .pixel-swatch[aria-pressed="true"] {
        outline: 3px solid var(--red);
        outline-offset: 1px;
        box-shadow: inset 0 0 0 2px var(--white);
      }

      .pixel-canvas-shell,
      .pixel-preview-shell,
      .pixel-frame-thumbnail-shell {
        position: relative;
        overflow: hidden;
        background-color: var(--pixel-check-light);
        background-image: conic-gradient(
          var(--pixel-check-dark) 25%,
          var(--pixel-check-light) 0 50%,
          var(--pixel-check-dark) 0 75%,
          var(--pixel-check-light) 0
        );
      }

      .pixel-canvas-shell {
        width: min(100%, 672px);
        aspect-ratio: 1;
        justify-self: center;
        border: var(--line);
        background-size: 6.25% 6.25%;
        cursor: crosshair;
        box-shadow: 7px 7px 0 var(--ink);
      }

      .pixel-canvas-shell::after {
        position: absolute;
        inset: 0;
        z-index: 2;
        background-image:
          linear-gradient(to right, rgba(17, 17, 17, 0.42) 1px, transparent 1px),
          linear-gradient(to bottom, rgba(17, 17, 17, 0.42) 1px, transparent 1px);
        background-size: 3.125% 3.125%;
        content: "";
        pointer-events: none;
      }

      #pixelArtCanvas {
        position: absolute;
        inset: 0;
        z-index: 1;
        display: block;
        width: 100%;
        height: 100%;
        image-rendering: pixelated;
        touch-action: none;
      }

      .pixel-keyboard-cursor {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 3;
        display: none;
        width: 3.125%;
        height: 3.125%;
        border: 2px solid var(--acid);
        box-shadow: 0 0 0 2px var(--ink);
        pointer-events: none;
      }

      .pixel-keyboard-cursor[data-visible="true"] {
        display: block;
      }

      .pixel-preview-row,
      .pixel-bridge-actions {
        width: min(100%, 672px);
        justify-self: center;
      }

      .pixel-preview-row {
        display: grid;
        grid-template-columns: 164px minmax(0, 1fr);
        align-items: stretch;
        gap: 12px;
      }

      .pixel-preview-shell {
        width: 164px;
        height: 164px;
        border: 2px solid var(--ink);
        background-size: 20px 20px;
      }

      #pixelPreviewCanvas {
        display: block;
        width: 100%;
        height: 100%;
        image-rendering: pixelated;
      }

      .pixel-preview-meta {
        display: flex;
        min-width: 0;
        flex-direction: column;
        justify-content: space-between;
        gap: 8px;
        padding: 12px;
        border: 2px solid var(--ink);
        background: var(--acid);
        font-family: var(--mono);
        font-size: 0.74rem;
        font-weight: 900;
        text-transform: uppercase;
      }

      #pixelStudioStatus {
        min-height: 2.4em;
        margin: 0;
        line-height: 1.3;
      }

      .pixel-frame-actions,
      .pixel-bridge-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
      }

      .pixel-frame-strip {
        display: flex;
        gap: 8px;
        min-height: 101px;
        padding: 8px;
        overflow-x: auto;
        border: 2px solid var(--ink);
        background: var(--paper);
        scrollbar-width: thin;
      }

      .pixel-frame-card {
        display: flex;
        width: 78px;
        min-width: 78px;
        min-height: 82px;
        padding: 4px;
        flex: 0 0 78px;
        flex-direction: column;
        gap: 4px;
        background: var(--white);
        box-shadow: none;
      }

      .pixel-frame-card[aria-pressed="true"] {
        background: var(--cyan) !important;
        box-shadow: 3px 3px 0 var(--ink);
      }

      .pixel-frame-thumbnail-shell {
        width: 66px;
        height: 66px;
        border: 1px solid var(--ink);
        background-size: 8px 8px;
      }

      .pixel-frame-thumbnail {
        display: block;
        width: 64px;
        height: 64px;
        image-rendering: pixelated;
      }

      .pixel-frame-card span {
        overflow: hidden;
        font-size: 0.58rem;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      #pixelClearBtn {
        width: 100%;
      }

      .pixel-data-disclosure {
        border: 2px solid var(--ink);
        background: var(--paper);
      }

      .pixel-data-disclosure summary {
        padding: 8px;
        cursor: pointer;
        font-family: var(--mono);
        font-size: 0.68rem;
        font-weight: 900;
        text-transform: uppercase;
      }

      #pixelFrameData {
        width: calc(100% - 16px);
        min-height: 86px;
        margin: 0 8px 8px;
        padding: 7px;
        border: 2px solid var(--ink);
        border-radius: 0;
        background: var(--ink);
        color: var(--green);
        font-family: var(--mono);
        font-size: 0.62rem;
        line-height: 1.25;
        resize: vertical;
      }

      #detect-holder {
        border: var(--line);
        background: var(--white);
        box-shadow: var(--shadow-sm);
      }

      #detect-holder table {
        margin: 0;
        --bs-table-bg: var(--white);
        --bs-table-striped-bg: var(--paper-deep);
        --bs-table-border-color: var(--ink);
        color: var(--ink);
        font-family: var(--mono);
      }

      #detect-holder caption {
        padding: 10px;
        border-bottom: 2px solid var(--ink);
        color: var(--ink);
        font-weight: 900;
        text-transform: uppercase;
      }

      .modal-content {
        border: 4px solid var(--ink);
        background: var(--white);
        box-shadow: 12px 12px 0 var(--ink);
      }

      .modal-header {
        border-bottom: var(--line);
        background: var(--acid);
      }

      .modal-title {
        font-family: var(--display);
        font-size: 2rem;
        text-transform: uppercase;
      }

      .modal-body .card {
        margin-bottom: 12px !important;
        padding: 12px;
        border: var(--line);
        background: var(--paper);
      }

      @media (max-width: 1199.98px) {
        .pixel-studio {
          grid-template-columns: minmax(0, 1fr);
        }
      }

      @media (max-width: 991.98px) {
        .canvas-container {
          grid-template-columns: minmax(260px, 310px) minmax(0, 1fr);
          gap: 24px;
        }

        .app-header {
          min-height: 112px;
        }

        .app-logo {
          width: 72px;
          height: 72px;
        }

        .app-title {
          font-size: clamp(2.8rem, 7vw, 4.5rem);
        }
      }

      @media (max-width: 767.98px) {
        .app-shell {
          width: min(100% - 24px, 680px);
          padding-top: 12px;
        }

        .app-header {
          display: grid;
          grid-template-columns: 1fr;
          min-height: 0;
          gap: 14px;
          margin-bottom: 22px !important;
          padding: 12px;
          box-shadow: 5px 5px 0 var(--ink);
        }

        .brand-lockup {
          gap: 10px;
        }

        .app-logo {
          width: 52px;
          height: 52px;
        }

        .brand-kicker {
          font-size: 0.58rem;
        }

        .app-title {
          font-size: clamp(2.15rem, 12vw, 3.4rem);
        }

        .header-meta {
          display: flex;
          min-width: 0;
          justify-content: flex-start;
          justify-items: start;
          text-align: left;
        }

        .header-meta > span:first-child {
          display: none;
        }

        .canvas-container {
          display: flex;
          flex-direction: column;
          gap: 24px;
        }

        .main-canvas {
          order: -1;
          width: 100%;
        }

        .controls {
          width: 100%;
        }

        .canvas-stage {
          box-shadow: 5px 5px 0 var(--ink);
        }

        .artboard-footer {
          margin-left: 6px;
          box-shadow: 3px 3px 0 var(--ink);
        }

        #mainControls,
        .source-panel,
        .control-module > .btn-info,
        .control-module > .collapse > .card-body {
          box-shadow: 4px 4px 0 var(--ink);
        }

        .pixel-workspace {
          box-shadow: 5px 5px 0 var(--ink);
        }

        .pixel-workspace-header {
          align-items: stretch;
          flex-direction: column;
          gap: 12px;
          padding: 12px;
        }

        .pixel-workspace-header .btn {
          width: 100%;
        }

        .pixel-workspace-title {
          font-size: clamp(2.35rem, 12vw, 3.6rem);
        }

        .pixel-studio {
          gap: 14px;
          padding: 10px;
        }

        .pixel-workbench,
        .pixel-inspector {
          padding: 10px;
          box-shadow: 4px 4px 0 var(--ink);
        }

        .pixel-canvas-shell {
          box-shadow: 4px 4px 0 var(--ink);
        }

        .pixel-preview-row {
          grid-template-columns: 104px minmax(0, 1fr);
          gap: 8px;
        }

        .pixel-preview-shell {
          width: 104px;
          height: 104px;
          background-size: 16px 16px;
        }

        .pixel-preview-meta {
          padding: 8px;
        }
      }

      @media (max-width: 575.98px) {
        .pixel-tool-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }

      @media (max-width: 380px) {
        .control-module > .btn-info {
          font-size: 0.72rem;
        }

        #mainControls .tool-text {
          display: none;
        }

        .artboard-header,
        .artboard-footer {
          font-size: 0.64rem;
        }

        .pixel-workbench-heading,
        .pixel-studio-intro,
        .pixel-library-heading {
          align-items: flex-start;
          flex-direction: column;
        }

        .pixel-palette {
          grid-template-columns: repeat(4, minmax(0, 1fr));
        }

        .pixel-bridge-actions {
          grid-template-columns: minmax(0, 1fr);
        }

        .pixel-preview-row {
          grid-template-columns: 92px minmax(0, 1fr);
        }

        .pixel-preview-shell {
          width: 92px;
          height: 92px;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .btn {
          transition: none;
        }
      }