/* A few things Tailwind utility classes don't express cleanly. Everything else in the app is styled directly in index.html / main.js via Tailwind (loaded from the CDN in index.html's ). */ /* Guaranteed to win regardless of Tailwind's own class ordering, so it's safe to combine with layout utilities like `flex` on the same element (see e.g. #export-panel, #custom-size-row). */ .hidden { display: none !important; } body { height: 100dvh; } .brand-row { display: flex; align-items: center; } .mobile-only { display: none !important; } .empty-state { width: min(360px, 86%); display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px; border: 1px solid rgba(63, 63, 70, 0.8); border-radius: 14px; background: rgba(24, 24, 27, 0.82); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28); backdrop-filter: blur(10px); } .empty-state-icon { display: grid; place-items: center; width: 52px; height: 52px; color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.3); border-radius: 14px; background: rgba(59, 130, 246, 0.1); } /* Checkerboard backdrop behind the canvas, visible wherever the collage's background is transparent. */ .canvas-checkerboard { background: linear-gradient(45deg, #1a1c22 25%, transparent 25%) 0 0 / 24px 24px, linear-gradient(-45deg, #1a1c22 25%, transparent 25%) 0 0 / 24px 24px, linear-gradient(45deg, transparent 75%, #1a1c22 75%) 0 0 / 24px 24px, linear-gradient(-45deg, transparent 75%, #1a1c22 75%) 0 0 / 24px 24px, #101114; } @media (max-width: 760px) { .app-header { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 12px; } .brand-row { justify-content: space-between; width: 100%; } .brand-row h1 { margin-right: 0; } .mobile-only { display: flex !important; } .app-toolbar { display: grid !important; grid-template-columns: 36px 36px minmax(90px, 1fr) auto 36px; gap: 8px !important; width: 100%; } .app-toolbar #undo-btn, .app-toolbar #redo-btn, .app-toolbar #help-btn { width: 36px; height: 36px; } .app-toolbar #randomize-btn { justify-content: center; min-width: 0; padding-inline: 8px; } .seed-control { grid-column: 1 / -1; grid-row: 2; display: grid !important; grid-template-columns: auto minmax(0, 1fr); } .seed-control input { width: 100% !important; min-width: 0; } .export-menu { grid-column: 4; grid-row: 1; } .export-menu > button { height: 36px; } .help-menu { grid-column: 5; grid-row: 1; } .editor-shell, #canvas-area { min-width: 0; min-height: 0; } #controls-panel { position: fixed; inset: 0 auto 0 0; z-index: 50; width: min(88vw, 360px) !important; border-right-color: #3f3f46; box-shadow: 18px 0 50px rgba(0, 0, 0, 0.48); transform: translateX(-102%); visibility: hidden; transition: transform 180ms ease, visibility 0s linear 180ms; overscroll-behavior: contain; } #controls-panel.controls-open { transform: translateX(0); visibility: visible; transition: transform 180ms ease; } .mobile-controls-header { position: sticky; top: -12px; z-index: 1; align-items: center; justify-content: space-between; min-height: 56px; margin: -12px -12px 0; padding: 10px 12px; border-bottom: 1px solid #27272a; background: rgba(24, 24, 27, 0.96); backdrop-filter: blur(10px); } .controls-backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, 0.58); backdrop-filter: blur(2px); } #canvas-area { width: 100%; } .empty-state { padding: 20px; } } @media (prefers-reduced-motion: reduce) { #controls-panel { transition: none; } }