/* Impossible Creature Generator — one stylesheet, two themes. * * theme.js picks the theme before first paint and writes it to , so every * colour here resolves once at the root. Nothing below depends on JavaScript having run: the * page is fully styled and readable with scripts blocked. * * Two variable vocabularies are declared deliberately. The app uses --ink / --surface / * --line; the docs stylesheet that ships alongside it uses --ink2 / --panel / --panel2. Both * are defined here so /api.html and /tokens.html inherit real colours instead of falling back * to their own defaults and drifting a shade away from the app they document. */ :root { --ink: #22201a; --ink-soft: #56513f; --ink-faint: #837d68; --bg: #f6f2e8; --surface: #ffffff; --surface-2: #efeadc; --line: #ded7c5; --line-strong: #c4bca4; --accent: #3d5a3f; --accent-ink: #ffffff; --accent-soft: #e5ece2; --ochre: #97622a; --ochre-soft: #f6ecdf; --warn: #8a5a12; --warn-soft: #fbf0dc; --ok: #1f6647; --ok-soft: #e2f1e9; --danger: #97303a; --danger-soft: #fbe8ea; --radius: 12px; --radius-sm: 8px; --shadow: 0 1px 2px rgba(34, 32, 26, .06), 0 8px 24px rgba(34, 32, 26, .07); --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* the docs vocabulary */ --ink2: var(--ink-soft); --ink3: var(--ink-faint); --panel: var(--surface); --panel2: var(--surface-2); } :root[data-theme="dark"] { --ink: #ece9dd; --ink-soft: #b7b3a0; --ink-faint: #8b8875; --bg: #14150f; --surface: #1d1e16; --surface-2: #26271d; --line: #34362a; --line-strong: #474a39; --accent: #a8c9a3; --accent-ink: #16180f; --accent-soft: #22281f; --ochre: #d9a469; --ochre-soft: #2e2519; --warn: #e0b276; --warn-soft: #322715; --ok: #79c9a4; --ok-soft: #142a20; --danger: #ec96a0; --danger-soft: #331a1e; --shadow: 0 1px 2px rgba(0, 0, 0, .32), 0 10px 28px rgba(0, 0, 0, .34); } * { box-sizing: border-box; } body { margin: 0; padding: 0 20px 72px; background: var(--bg); color: var(--ink); font: 16px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; } main, .topbar, .foot { max-width: 1080px; margin: 0 auto; } a { color: var(--accent); } a:hover { color: var(--ochre); } .skip { position: absolute; left: -9999px; top: 0; background: var(--surface); padding: 10px 16px; border-radius: var(--radius-sm); } .skip:focus { left: 12px; top: 12px; z-index: 40; } .hidden { display: none !important; } .mono { font-family: var(--mono); font-size: .92em; } .muted { color: var(--ink-faint); } .small { font-size: .88rem; } /* --- header --------------------------------------------------------------------------- */ .topbar { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; padding: 22px 0 18px; border-bottom: 1px solid var(--line); } .brand { display: flex; align-items: center; gap: 14px; } .brand h1 { margin: 0; font-size: 1.35rem; letter-spacing: -.01em; } .tagline { margin: 2px 0 0; color: var(--ink-faint); font-size: .9rem; } .mark { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--accent); font-size: 1.3rem; line-height: 1; } .session { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .home-link { font-size: .88rem; color: var(--ink-faint); text-decoration: none; } .home-link:hover { color: var(--accent); } .credits { font-family: var(--mono); font-size: .85rem; padding: 5px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--ink); } /* --- buttons -------------------------------------------------------------------------- */ button, .ghost, .primary { font: inherit; border-radius: var(--radius-sm); cursor: pointer; transition: background .12s ease, border-color .12s ease, color .12s ease; } .primary { background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); padding: 11px 20px; font-weight: 600; } .primary:hover:not(:disabled) { filter: brightness(1.08); } .primary:disabled { opacity: .45; cursor: not-allowed; } .ghost { background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); padding: 9px 14px; text-decoration: none; display: inline-block; } .ghost:hover { background: var(--surface-2); border-color: var(--accent); color: var(--ink); } .small-btn { padding: 6px 11px; font-size: .85rem; } .danger { color: var(--danger); border-color: var(--danger); } .danger:hover { background: var(--danger-soft); border-color: var(--danger); } input[type="text"], input[type="search"], textarea, select { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 9px 11px; width: 100%; } textarea { resize: vertical; line-height: 1.55; } input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); } /* --- layout --------------------------------------------------------------------------- */ .intro { max-width: 74ch; margin: 30px auto 8px; } .intro p { margin: 0 0 12px; } .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; margin: 22px 0; } .panel-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 10px; } .panel-head h2 { margin: 0; font-size: 1.1rem; letter-spacing: -.01em; } .head-actions { display: flex; flex-wrap: wrap; gap: 8px; } .klabel { display: inline-block; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); margin-bottom: 4px; } /* --- the seed row --------------------------------------------------------------------- */ .seed-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .seed-row .klabel { margin: 0; } .seed-input { width: auto; min-width: 210px; flex: 0 1 260px; } /* --- the axis grid -------------------------------------------------------------------- */ .axis-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); margin: 18px 0 6px; } .axis-card { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); padding: 13px 14px; } /* The two axes named in the interface copy as the steering controls get a visible edge, so * the thing the app claims is steerable looks steerable. */ .axis-card.axis-primary { border-left: 3px solid var(--ochre); } .axis-card.is-locked { background: var(--accent-soft); border-color: var(--accent); } .axis-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .axis-label { font-weight: 600; font-size: .95rem; } .axis-question { margin: 4px 0 8px; } .axis-blurb { margin: 8px 0 0; font-size: .86rem; color: var(--ink-soft); min-height: 2.6em; } .lock { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; color: var(--ink-faint); white-space: nowrap; cursor: pointer; } .lock input { width: auto; } .divergence { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); } .divergence p { margin: 0 0 4px; } #divergence { color: var(--ochre); font-weight: 600; } .tensions { margin: 10px 0 0; padding-left: 18px; } .tension-head { list-style: none; margin-left: -18px; color: var(--warn); font-size: .88rem; } .tension { font-size: .88rem; color: var(--ink-soft); } /* --- the note field ------------------------------------------------------------------- */ .note-card { border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 12px; background: var(--surface-2); } .note-card.is-blocked { border-color: var(--danger); background: var(--danger-soft); } .note-foot { display: flex; justify-content: space-between; margin-top: 6px; } .guard-panel { margin-top: 14px; padding: 14px; border: 1px solid var(--danger); border-radius: var(--radius-sm); background: var(--danger-soft); } .guard-message { margin: 0 0 8px; font-weight: 600; color: var(--danger); } .guard-list { margin: 0 0 8px; padding-left: 18px; font-size: .88rem; } .guard-item { margin-bottom: 4px; } .guard-phrase { color: var(--danger); } .guard-target { color: var(--danger); } .lint-panel { margin-top: 14px; padding: 14px; border: 1px solid var(--warn); border-radius: var(--radius-sm); background: var(--warn-soft); } .lint-head { margin: 0 0 8px; font-weight: 600; color: var(--warn); } .lint-list { margin: 0 0 8px; padding-left: 18px; font-size: .9rem; } .lint-item { margin-bottom: 8px; } .lint-phrase { color: var(--warn); } .lint-instead { margin: 2px 0 0; } /* --- the brief ------------------------------------------------------------------------ */ .brief { margin: 12px 0 8px; padding: 16px 18px; background: var(--surface-2); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); font-family: var(--mono); font-size: .87rem; line-height: 1.7; white-space: pre-wrap; word-break: break-word; max-height: 460px; overflow-y: auto; } /* --- the render panel ------------------------------------------------------------------ */ .render-controls { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; margin-bottom: 10px; } .field { flex: 0 0 auto; } .field select { width: auto; min-width: 84px; } .field-note { flex: 1 1 260px; margin: 0; align-self: center; } .meter { margin: 8px 0; padding: 10px 12px; background: var(--accent-soft); border-radius: var(--radius-sm); font-size: .87rem; color: var(--ink); min-height: 1.2em; } .gate { margin: 10px 0; padding: 13px 14px; border: 1px solid var(--line-strong); border-left: 3px solid var(--ochre); border-radius: var(--radius-sm); background: var(--ochre-soft); display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; } .gate p { margin: 0; flex: 1 1 320px; font-size: .9rem; } .run-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; } /* --- progress --------------------------------------------------------------------------- */ .progress { margin-top: 18px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); } .progress-head { display: flex; justify-content: space-between; margin-bottom: 8px; } .steps { margin: 0; padding-left: 20px; font-size: .89rem; } .step { color: var(--ink-faint); margin-bottom: 3px; } .step-doing { color: var(--accent); font-weight: 600; } .step-done { color: var(--ok); } .step-failed { color: var(--danger); font-weight: 600; } /* --- the gallery ------------------------------------------------------------------------ */ .result { margin-top: 20px; } .result-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; justify-content: space-between; margin-bottom: 12px; } .result-head h3 { margin: 0; font-size: 1.02rem; } .result-head p { margin: 3px 0 0; } .gallery { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); } .shot { margin: 0; } .shot-frame { position: relative; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; } .shot-frame img { width: 100%; height: 100%; object-fit: cover; display: block; } .shot-empty { color: var(--ink-faint); } .shot-working { border-color: var(--accent); } .shot-failed { border-color: var(--danger); background: var(--danger-soft); } .shot-idx { font-size: 1.6rem; color: var(--ink-faint); } .shot-note { margin: 0; padding: 14px; font-size: .85rem; text-align: center; color: var(--danger); } .shot-cap { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin-top: 8px; } .shot-status { font-size: .78rem; color: var(--ink-faint); } .shot-acts { display: flex; flex-wrap: wrap; gap: 6px; } /* --- history ----------------------------------------------------------------------------- */ .modal { position: fixed; inset: 0; z-index: 30; background: rgba(16, 19, 32, .55); display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; } .modal-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); width: 100%; max-width: 700px; padding: 20px; } .modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .modal-head h2 { margin: 0; font-size: 1.05rem; } .modal-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); } .history-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; } .history-tools input { flex: 1 1 200px; width: auto; } .history-list { list-style: none; margin: 10px 0 0; padding: 0; } .history-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--line); } .history-main { flex: 1 1 300px; } .history-title { margin: 0; font-weight: 600; font-size: .95rem; } .history-meta { margin: 2px 0 0; } .history-note { margin: 4px 0 0; } .history-acts { display: flex; gap: 6px; } .history-empty { padding: 18px 0; } /* --- toast and footer --------------------------------------------------------------------- */ .toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 50; max-width: 560px; padding: 12px 18px; border-radius: var(--radius-sm); box-shadow: var(--shadow); font-size: .9rem; } .toast-ok { background: var(--ok-soft); color: var(--ok); border: 1px solid var(--ok); } .toast-err { background: var(--danger-soft); color: var(--danger); border: 1px solid var(--danger); } .foot { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--ink-faint); font-size: .88rem; } .foot p { margin: 0 0 8px; max-width: 74ch; } .foot-links { display: flex; flex-wrap: wrap; gap: 8px; } /* --- the docs pages ------------------------------------------------------------------------ * api.html and tokens.html carry their own stylesheet for their own furniture, but they share * this file's header, footer and buttons. These two rules are all they need from here. */ main.doc { max-width: 900px; margin: 0 auto; } .token-box { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); padding: 14px; margin: 12px 0; } .token-val { word-break: break-all; } .theme-toggle { margin-left: 4px; } @media (max-width: 640px) { body { padding: 0 14px 56px; } .panel { padding: 16px; } .topbar { padding: 16px 0 14px; } .axis-grid { grid-template-columns: 1fr; } .gallery { grid-template-columns: 1fr; } .brief { font-size: .82rem; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } } /* --- Impossible Creature Generator: the panels this app adds ------------------------------------------------ * * The shell above (topbar, panel, axis grid, modal, toast, steps) is the fleet's shared * shape. Everything below is this app's own: the hybrid checker, the coherence report, the * derived-anatomy list and the plate itself. */ .blend-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 10px 0 6px; } .blend-input { flex: 1 1 260px; min-width: 200px; padding: 9px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font: inherit; } .blend-result { margin-top: 14px; } .blend-summary { margin: 0 0 10px; font-size: 1.05rem; font-weight: 600; } .origin-list { list-style: none; margin: 0 0 14px; padding: 0; } .origin-item { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(140px, 1.4fr) auto; gap: 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--line); } .origin-axis { color: var(--ink-faint); font-size: .9rem; } .origin-value { font-weight: 600; } .origin-free .origin-value { font-weight: 400; color: var(--ink-soft); } .blend-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; } .verdict { display: grid; gap: 12px; } .verdict-ok, .verdict-edge { margin: 0; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--ok-soft); border: 1px solid var(--ok); } .verdict-edge { background: var(--warn-soft); border-color: var(--warn); } .verdict-block, .verdict-strain { padding: 14px 16px; border-radius: var(--radius-sm); background: var(--danger-soft); border: 1px solid var(--danger); } .verdict-strain { background: var(--warn-soft); border-color: var(--warn); } .verdict-title { margin: 0 0 6px; font-weight: 700; } .verdict-problem { margin: 0 0 8px; } .verdict-why { margin: 0 0 10px; } .verdict-routes-head { margin: 0 0 6px; font-weight: 600; } .route-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; } .route-item { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; } .route-axis { color: var(--ink-soft); } .route-arrow { color: var(--ink-faint); } .route-to { font-weight: 600; } /* --- coherence ---------------------------------------------------------------------------- */ .badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .8rem; font-weight: 600; letter-spacing: .01em; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--ink-soft); } .badge-ok { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); } .badge-edge { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); } .badge-bad { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); } .coherence-list { list-style: none; margin: 12px 0 20px; padding: 0; display: grid; gap: 12px; } .coh-item { padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface-2); } .coh-ok { border-color: var(--ok); background: var(--ok-soft); } .coh-block { border-color: var(--danger); background: var(--danger-soft); } .coh-strain { border-color: var(--warn); background: var(--warn-soft); } .coh-held { border-width: 2px; border-style: dashed; } .coh-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 6px; } .coh-sev { font-family: var(--mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; padding: 2px 7px; border-radius: 4px; background: var(--surface); border: 1px solid var(--line-strong); } .coh-title { font-weight: 700; } .coh-problem { margin: 0 0 6px; } .coh-why { margin: 0; } .coh-held-note { margin: 8px 0 0; font-style: italic; } .sub { font-size: 1rem; margin: 18px 0 8px; } .derived-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .derived-item { display: grid; grid-template-columns: minmax(140px, 200px) 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); } .derived-label { color: var(--ink-faint); font-size: .9rem; } .derived-value { color: var(--ink); } /* --- spec suggestions ---------------------------------------------------------------------- */ .spec-panel { margin-top: 14px; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--accent); background: var(--accent-soft); } .spec-head { margin: 0 0 8px; font-weight: 600; } .spec-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; } .spec-item { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .spec-axis { color: var(--ink-soft); } .spec-arrow { color: var(--ink-faint); } .spec-to { font-weight: 600; } /* --- the plate ------------------------------------------------------------------------------ */ .plate-slot { margin: 16px 0 10px; } .plate { margin: 0; } .plate-frame { border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-2); padding: 14px; display: flex; justify-content: center; } .plate-img { max-width: 100%; height: auto; display: block; border-radius: 4px; } .plate-cap { margin: 8px 0 0; } .plate-tools { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; } .plate-fail { padding: 18px; border: 1px dashed var(--danger); border-radius: var(--radius-sm); background: var(--danger-soft); } .plate-fail-msg { margin: 0; } .reconcile { margin: 10px 0 4px; padding: 10px 12px; border-radius: var(--radius-sm); font-size: .92rem; border: 1px solid var(--line); background: var(--surface-2); } .reconcile-ok { border-color: var(--ok); background: var(--ok-soft); } .reconcile-bad { border-color: var(--danger); background: var(--danger-soft); } .history-sub { margin: 2px 0 0; } @media (max-width: 640px) { .origin-item, .derived-item { grid-template-columns: 1fr; gap: 2px; } .blend-form { flex-direction: column; align-items: stretch; } }