:root { color: #e7e6df; background: #101318; font-family: "IBM Plex Mono", "Roboto Mono", ui-monospace, monospace; font-synthesis: none; }
* { box-sizing: border-box; }
body { min-width: 320px; min-height: 100vh; margin: 0; background: radial-gradient(circle at 48% 18%, #202831 0, #101318 48%); }
.wordmark { display: flex; align-items: baseline; gap: .42em; margin: 0; color: #ecebe5; font-family: "Helvetica Neue", "Segoe UI", Arial, sans-serif; font-size: 26px; font-weight: 500; letter-spacing: -.035em; line-height: 1; }
.wordmark b { color: #aab0b4; font-size: .54em; font-weight: 600; letter-spacing: .08em; }
.section-number { color: #77828b; font-size: 10px; letter-spacing: .2em; margin: 0 0 4px; }
h2 { font-family: "Arial Narrow", "Roboto Condensed", sans-serif; margin: 0; letter-spacing: -.03em; }
.workspace { width: min(1510px, 100%); margin: 0 auto; padding: 38px clamp(20px, 4vw, 62px) 46px; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 34px; }
.preview-panel, .controls { min-width: 0; }
.preview-panel { position: sticky; top: 20px; align-self: start; }
.panel-heading, .section-title-row { display: flex; justify-content: space-between; align-items: end; }
h2 { font-size: 15px; letter-spacing: .08em; }
.image-info { color: #77828b; margin: 0; font-size: 10px; }
.monitor-frame { position: relative; margin-top: 15px; padding: 12px; border: 1px solid #3a4148; background: #090b0e; box-shadow: 0 24px 70px rgba(0,0,0,.4); }
.monitor-frame::before { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 60px rgba(0,0,0,.6); z-index: 2; }
canvas { display: block; width: 100%; aspect-ratio: 4 / 3; background-color: #161b20; background-image: linear-gradient(45deg,#20262c 25%,transparent 25%),linear-gradient(-45deg,#20262c 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#20262c 75%),linear-gradient(-45deg,transparent 75%,#20262c 75%); background-size: 24px 24px; background-position: 0 0,0 12px,12px -12px,-12px 0; }
.parameter-history-toolbar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.preview-transport { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; gap: 10px 12px; margin-top: 10px; }
.preview-playback-toggle { min-height: 54px; margin-top: 0; border-color: #eb5c36; color: #f3f1e9; background: #27231f; font-weight: 700; }
.preview-playback-toggle.is-playing { color: #101318; background: #eb5c36; }
.preview-playback-options { display: grid; grid-template-columns: repeat(3, auto); align-items: end; gap: 4px 8px; }
.preview-playback-status { grid-column: 1 / -1; color: #77828b; font-size: 9px; letter-spacing: .12em; text-align: right; }
.preview-playback-options label { color: #8f999f; font-size: 8px; letter-spacing: .06em; }
.preview-playback-options label > span { display: flex; align-items: center; gap: 3px; margin-top: 3px; }
.preview-playback-options input[type="number"] { width: 57px; padding: 4px; color: #e7e6df; border: 1px solid #464f57; background: #0e1216; font: 9px inherit; }
.preview-playback-options .preview-reverse { display: flex; min-height: 25px; align-items: center; gap: 4px; cursor: pointer; }
.preview-time-control { grid-column: 1 / -1; display: block; }
.preview-time-control > span { display: flex; justify-content: space-between; margin-bottom: 9px; color: #aeb5ba; font-size: 9px; letter-spacing: .08em; }
.preview-time-control output { color: #e8e5dc; font-weight: 600; }
.parameter-history-toolbar .secondary-button { margin-top: 0; }
.mobile-preview-hud { display: none; }
/* 走査線演出を再検討するときのために保持する。
.scanlines { position: absolute; inset: 12px; pointer-events: none; box-shadow: inset 0 0 24px rgba(0,0,0,.35); }
*/
.controls { border: 1px solid #363c43; background: rgba(21,26,32,.95); box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.control-disclosure { border-bottom: 1px solid #343a40; }
.control-disclosure > summary { display: flex; min-height: 67px; padding: 17px 25px; align-items: center; justify-content: space-between; gap: 18px; cursor: pointer; list-style: none; background: rgba(12,16,20,.45); transition: background .2s; }
.control-disclosure > summary::-webkit-details-marker { display: none; }
.control-disclosure > summary:hover { background: #242a30; }
.control-disclosure > summary:focus-visible { outline: 2px solid #eb5c36; outline-offset: -2px; }
.control-disclosure > summary .section-number { display: block; margin-bottom: 5px; }
.control-disclosure > summary strong { font-family: "Arial Narrow", "Roboto Condensed", sans-serif; font-size: 13px; letter-spacing: .08em; }
.control-disclosure:not([open]) > summary { min-height: 0; padding-block: 12px; }
.control-disclosure:not([open]) > summary .section-number { margin-bottom: 0; }
.control-disclosure:not([open]) > summary strong { display: none; }
.disclosure-icon { position: relative; width: 18px; height: 18px; flex: 0 0 auto; border: 1px solid #59636b; border-radius: 50%; }
.disclosure-icon::before, .disclosure-icon::after { content: ""; position: absolute; top: 8px; left: 4px; width: 8px; height: 1px; background: #c7cac8; transition: transform .2s; }
.disclosure-icon::after { transform: rotate(90deg); }
.control-disclosure[open] > summary .disclosure-icon::after { transform: rotate(0); }
.control-disclosure > .control-section { border-bottom: 1px solid #343a40; }
.control-disclosure > .control-section:last-child { border-bottom: 0; }
.control-section { padding: 24px 25px 26px; border-bottom: 1px solid #343a40; }
.origin-legend { margin-top: 12px; padding: 12px 14px; border: 1px solid #3a4148; background: #11171c; color: #939da5; font-size: 9px; line-height: 1.5; }
.origin-legend p { margin: 4px 0; }
.origin-legend-title { color: #d8dcde; font-weight: 700; letter-spacing: .08em; }
.origin-legend-note { padding-top: 4px; border-top: 1px solid #2f363c; }
.origin-badge { display: inline-block; padding: 1px 5px; border: 1px solid currentColor; border-radius: 2px; font-size: 8px; font-weight: 700; letter-spacing: .04em; line-height: 1.35; vertical-align: .08em; white-space: nowrap; }
.origin-historical { color: #70c59b; }
.origin-reconstruction { color: #77acd8; }
.origin-original { color: #e99b72; }
.origin-utility { color: #9da4aa; }
.control-section:last-child { border-bottom: 0; }
.upload-button { display: flex; width: 100%; align-items: center; gap: 15px; padding: 14px; color: inherit; border: 1px dashed #58616a; background: transparent; font: inherit; text-align: left; cursor: pointer; transition: border-color .2s, background .2s; }
.upload-button:hover { border-color: #eb5c36; background: #242a30; }
.upload-icon { display: grid; width: 36px; height: 36px; place-items: center; color: #101318; background: #eb5c36; font-size: 23px; }
.upload-button strong, .upload-button small { display: block; } .upload-button strong { font-size: 12px; } .upload-button small { color: #77828b; font-size: 9px; margin-top: 4px; }
#image-upload, .hidden-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.secondary-button { width:100%; margin-top:10px; padding:10px 12px; border:1px solid #59636c; color:#c9d0d4; background:#161c21; font:inherit; font-size:10px; letter-spacing:.08em; cursor:pointer; }
.secondary-button:hover, .secondary-button:focus-visible { border-color:#8e9aa3; color:#fff; background:#20272d; }
.test-pattern-buttons { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
.test-pattern-buttons .secondary-button { margin-top:0; }
.test-pattern-buttons #test-character-button, .test-pattern-buttons #test-pattern-button { grid-column:1 / -1; }
.switch { display: flex; align-items: center; gap: 8px; font-size: 9px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; }.switch span { width: 34px; height: 18px; padding: 3px; border-radius: 12px; background: #4b535a; transition: background .2s; }.switch span::after { content:""; display:block; width:12px; height:12px; border-radius:50%; background:#d7d8d5; transition:transform .2s; }.switch input:checked + span { background:#eb5c36; }.switch input:checked + span::after { transform:translateX(16px); }
.switch-row { display: flex; align-items: center; justify-content: space-between; color: #aeb5ba; font-size: 10px; }
fieldset { padding: 0; margin: 24px 0 21px; border: 0; } legend { margin-bottom: 9px; color: #969fa6; font-size: 10px; }
.segmented { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; background: #0e1216; }.segmented label { cursor:pointer; }.segmented input { position:absolute; opacity:0; }.segmented span { display:block; padding:9px 4px; color:#77828b; text-align:center; font-size:10px; }.segmented input:checked + span { color:#f3f1e9; background:#333a41; }
.segmented-four { grid-template-columns: 1fr 1fr; gap: 2px; }
.background-options { margin-bottom: 0; }
.compact-upload { margin-top: 16px; padding: 10px 12px; }
.compact-upload .upload-icon { width: 28px; height: 28px; font-size: 18px; }
.background-info { margin: 8px 0 0; overflow: hidden; color: #77828b; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.background-layout-controls { margin-top: 16px; }
.monochrome-ramp-control { grid-template-columns: 1fr; }
.color-key-controls { margin: 4px 0 22px; padding: 12px; border: 1px solid #343c43; background: #11171c; }
.color-key-color { display: block; margin-top: 16px; color: #969fa6; font-size: 9px; }
.color-key-color input { display: block; width: 100%; height: 32px; margin-top: 8px; padding: 2px; border: 1px solid #464f57; background: #0e1216; cursor: pointer; }
.color-key-color input:disabled { opacity: .3; cursor: not-allowed; }
.five-level-boundaries { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.five-level-colors { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 20px; }
.five-level-colors label { color:#969fa6; font-size:9px; }
.five-level-colors input[type="color"] { display:block; width:100%; height:32px; margin-top:8px; padding:2px; border:1px solid #464f57; background:#0e1216; cursor:pointer; }
.five-level-colors input[type="color"]:disabled { opacity:.3; cursor:not-allowed; }
.segmented input:disabled + span, .switch input:disabled + span, .switch:has(input:disabled) { opacity: .35; cursor: not-allowed; }
.select-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.background-layout-controls { grid-template-columns: 1fr; }
.select-row label { color:#969fa6; font-size:9px; }
select { width:100%; margin-top:8px; padding:9px 7px; color:#e7e6df; border:1px solid #464f57; background:#0e1216; font:10px inherit; }
.range-control { display: block; margin-top: 22px; }.range-control > span { display:flex; justify-content:space-between; margin-bottom:11px; color:#aeb5ba; font-size:10px; }.range-control output { color:#e8e5dc; font-weight:600; }
.image-padding-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.image-padding-note { margin-top: 14px; }
.raster-control-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.raster-size-control, .raster-rotation-control, .raster-depth-control, .horizontal-perspective-control, .vertical-perspective-control { grid-column: 1 / -1; }
.control-note { margin: 18px 0 0; color: #77828b; font-size: 9px; line-height: 1.6; }
input[type="range"] { --range-progress: 0%; width:100%; height:3px; appearance:none; display:block; background:linear-gradient(to right,#eb5c36 var(--range-progress),#3c444b var(--range-progress)); cursor:pointer; }input[type="range"]::-webkit-slider-thumb { appearance:none; width:13px; height:13px; border:3px solid #eb5c36; border-radius:50%; background:#13171c; }input[type="range"]:disabled { opacity:.3; cursor:not-allowed; }
.accent-y input[type="range"] { background:linear-gradient(to right,#36b6ae var(--range-progress),#3c444b var(--range-progress)); }.accent-y input[type="range"]::-webkit-slider-thumb { border-color:#36b6ae; }
.diagnostic { padding:12px; color:#ffb19d; border:1px solid #813e30; background:#2a1714; font-size:12px; }
footer { display:flex; justify-content:space-between; padding:15px clamp(24px,5vw,76px); color:#525c65; border-top:1px solid #2d3339; font-size:9px; letter-spacing:.14em; }
@media (max-width: 920px) { .workspace { grid-template-columns:1fr; }.preview-panel { position: static; }.controls { display:grid; grid-template-columns:1fr 1fr; }.control-disclosure { grid-column:1/-1; }.upload-section { grid-column:1/-1; } }
@media (max-width: 580px) { .wordmark { font-size:23px; }.workspace { padding-inline:14px; }.controls { display:block; }.image-info { display:none; }.preview-transport { grid-template-columns:1fr; }.preview-playback-options { grid-row:2; }.preview-time-control { grid-row:3; }.raster-control-grid, .five-level-boundaries, .image-padding-controls { grid-template-columns: 1fr; }.five-level-colors { grid-template-columns: repeat(3, 1fr); } }
.output-format-controls { grid-template-columns: 1fr 1fr; margin-top: 0; }
.monochrome-note { margin-top: 14px; }
.animation-controls { border-bottom: 1px solid #2d3339; }
.animation-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 20px; }
.animation-buttons[hidden], .range-control[hidden] { display: none; }
.animation-buttons .secondary-button { margin-top: 0; }
.section-final-heading { grid-column: 1 / -1; margin-top: 24px; padding-top: 14px; color: #eb5c36; border-top: 1px solid #30373d; font-size: 9px; font-weight: 700; letter-spacing: .18em; }
.test-preset-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }
.test-preset-buttons .secondary-button { margin-top: 0; }
.test-randomize-button { margin-top: 8px; color: #f5c2b4; border-color: #a44d37; }
.test-randomize-button:hover, .test-randomize-button:focus-visible { border-color: #eb5c36; }
.movie-export-fixed { margin: 0; color: #e8e5dc; font-size: 10px; line-height: 1.6; }
.movie-export-details { display: grid; grid-template-columns: auto 1fr; gap: 10px; margin: 16px 0 0; color: #969fa6; font-size: 9px; }
.movie-export-details dt, .movie-export-details dd { margin: 0; }
.movie-export-details dd { overflow-wrap: anywhere; color: #e8e5dc; text-align: right; }
.movie-export-status { min-height: 1.6em; white-space: pre-line; }
.movie-export-setting-grid { margin-top: 0; }
.movie-export-setting-grid input[type="number"] { width: 100%; margin-top: 8px; padding: 9px 7px; color: #e7e6df; border: 1px solid #464f57; background: #0e1216; font: 10px inherit; }
.movie-export-codec-label { grid-column: 1 / -1; }
.movie-export-background-note { margin-top: 12px; }
.alpha-test-disclosure { border-left: 2px solid #a44d37; }
.alpha-test-warning { color: #c5a79f; }
.secondary-button:disabled { opacity: .35; cursor: not-allowed; }
.preset-field { display: block; margin-top: 16px; color: #969fa6; font-size: 9px; }
.preset-field:first-child { margin-top: 0; }
.preset-field input[type="text"] { width: 100%; margin-top: 8px; padding: 9px 7px; color: #e7e6df; border: 1px solid #464f57; background: #0e1216; font: 10px inherit; }
.preset-action-buttons { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 16px; }
.preset-action-buttons .secondary-button { margin-top: 0; }
.url-parameter-actions { grid-template-columns: 1fr; }
.preset-status { min-height: 1.6em; white-space: pre-line; }
.preset-status-error { color: #ff9c83; }

body.mobile-preview-mode { min-width: 0; overflow: hidden; overscroll-behavior: none; background: #090b0e; }
.mobile-preview-mode .workspace { width: 100vw; height: 100dvh; padding: 0; display: block; }
.mobile-preview-mode .preview-panel { position: static; width: 100vw; height: 100dvh; display: grid; place-items: center; overflow: hidden; }
.mobile-preview-mode .panel-heading,
.mobile-preview-mode .controls,
.mobile-preview-mode .parameter-history-toolbar,
.mobile-preview-mode .diagnostic:not([hidden]),
.mobile-preview-mode footer { display: none; }
.mobile-preview-mode .monitor-frame { width: 100vw; height: 100dvh; margin: 0; padding: 0; display: grid; place-items: center; border: 0; box-shadow: none; }
.mobile-preview-mode .monitor-frame::before { display: none; }
.mobile-preview-mode canvas { width: 100vw; max-width: 100vw; height: auto; max-height: 100dvh; touch-action: none; user-select: none; -webkit-user-select: none; }
.mobile-preview-mode canvas.is-scrubbing { cursor: ew-resize; }
.mobile-preview-mode .preview-transport { position: fixed; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); left: 12px; z-index: 5; display: block; margin: 0; pointer-events: none; }
.mobile-preview-mode .preview-playback-toggle { width: min(240px, 62vw); min-height: 44px; margin: 0 auto; display: block; opacity: .82; pointer-events: auto; }
.mobile-preview-mode .preview-playback-options,
.mobile-preview-mode .preview-time-control { display: none; }
.mobile-preview-mode .mobile-preview-hud { position: fixed; top: calc(10px + env(safe-area-inset-top)); right: 10px; left: 10px; z-index: 5; display: flex; justify-content: space-between; gap: 12px; color: rgba(255,255,255,.82); font-size: 10px; letter-spacing: .04em; pointer-events: none; text-shadow: 0 1px 3px #000; }