.pattern-field-shell { display: grid; place-items: center; width: 100%; height: 100dvh; min-height: 100dvh; background: #050608; color: #f4f0e7; }
.pattern-field-page { --field-ink: #f4f0e7; --field-muted: #9fa7a7; --field-line: rgb(244 240 231 / .18); --field-panel: #111518; --field-blue: #7eb7d1; --field-sand: #d8a463; display: grid; grid-template-columns: minmax(0, 1fr) 352px; width: min(100vw, calc(100dvh * 16 / 9)); height: min(100dvh, calc(100vw * 9 / 16)); aspect-ratio: 16 / 9; overflow: hidden; background: #050608; color: var(--field-ink); font-family: var(--font-sans); }
.pattern-field-stage-panel { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-width: 0; min-height: 0; padding: 28px clamp(20px, 3.8vw, 64px) 22px; }
.pattern-field-stage-header { display: grid; gap: 6px; align-content: start; padding-bottom: 20px; }
.pattern-field-eyebrow, .pattern-field-stage-header p, .pattern-field-section-heading p, .pattern-field-range, .pattern-field-stage-footer, .pattern-field-source-chip, .pattern-field-control-header, .pattern-field-select-label { font-size: 11px; letter-spacing: .04em; line-height: 1.4; }
.pattern-field-eyebrow { margin: 0; color: var(--field-blue); font-weight: 600; text-transform: uppercase; }
.pattern-field-stage-header h1 { max-width: 600px; margin: 0; font-size: clamp(32px, 5.8vw, 80px); font-weight: 600; letter-spacing: -.06em; line-height: .95; }
.pattern-field-stage-header > p:last-child { margin: 4px 0 0; color: var(--field-muted); font-size: 13px; }
.pattern-field-stage { position: relative; min-height: 0; overflow: hidden; background: #000; }
.pattern-field-stage canvas { display: block; width: 100%; height: 100%; min-height: 0; }
.pattern-field-landmark-hover-preview { position: absolute; top: 18px; right: 18px; z-index: 2; display: grid; gap: 8px; width: clamp(120px, 26%, 240px); padding: 8px; border: 1px solid rgb(244 240 231 / .3); background: rgb(5 6 8 / .86); opacity: 0; pointer-events: none; transform: translateY(6px); transition: opacity 180ms ease-out, transform 180ms ease-out; }
.pattern-field-landmark-hover-preview.is-visible { opacity: 1; transform: translateY(0); }
.pattern-field-landmark-hover-preview img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; background: #000; }
.pattern-field-landmark-hover-preview span { color: var(--field-ink); font-size: 10px; letter-spacing: .08em; line-height: 1.2; text-transform: uppercase; }
.pattern-field-stage-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; color: var(--field-muted); text-transform: uppercase; }
.pattern-field-stage-footer > div { display: flex; gap: 8px; }
.pattern-field-play, .pattern-field-quiet-button, .pattern-field-section-heading button, .pattern-field-actions button { min-height: 44px; border: 1px solid var(--field-line); background: transparent; color: var(--field-ink); cursor: pointer; font: inherit; font-size: 10px; letter-spacing: .08em; padding: 8px 10px; text-transform: uppercase; transition: border-color 150ms ease-out, background-color 150ms ease-out, color 150ms ease-out; }
.pattern-field-play { border-color: var(--field-blue); color: var(--field-blue); }
.pattern-field-play:hover, .pattern-field-quiet-button:hover, .pattern-field-section-heading button:hover, .pattern-field-actions button:hover { border-color: var(--field-ink); background: rgb(244 240 231 / .08); }
.pattern-field-control-panel { height: 100%; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-gutter: stable; background: var(--field-panel); border-left: 1px solid var(--field-line); }
.pattern-field-control-header { display: flex; align-items: center; justify-content: space-between; padding: 24px 22px 22px; border-bottom: 1px solid var(--field-line); text-transform: uppercase; }
.pattern-field-control-header a { color: inherit; text-decoration: none; }
.pattern-field-control-header a:last-child { color: var(--field-muted); }
.pattern-field-control-header a:hover, .pattern-field-control-header a:focus-visible { color: var(--field-blue); }
.pattern-field-control-section { padding: 20px 22px; border-bottom: 1px solid var(--field-line); }
.pattern-field-section-heading { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: start; gap: 10px; }
.pattern-field-section-heading > span { color: var(--field-blue); font-size: 10px; letter-spacing: .08em; }
.pattern-field-section-heading h2 { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .08em; line-height: 1.1; text-transform: uppercase; }
.pattern-field-section-heading p { margin: 8px 0 0; color: var(--field-muted); letter-spacing: 0; }
.pattern-field-section-heading button { align-self: start; padding: 5px 10px; color: var(--field-muted); }
.pattern-field-source-chip { display: flex; align-items: center; gap: 8px; margin: 18px 0 0 32px; color: var(--field-muted); font-size: 10px; }
.pattern-field-source-dot { width: 7px; height: 7px; background: var(--field-sand); border-radius: 50%; }
.pattern-field-motif-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 18px; }
.pattern-field-motif-groups { display: grid; gap: 18px; margin-top: 18px; }
.pattern-field-motif-group { display: grid; gap: 8px; }
.pattern-field-motif-group + .pattern-field-motif-group { padding-top: 14px; border-top: 1px solid rgb(244 240 231 / .08); }
.pattern-field-motif-group h3 { margin: 0 0 0 32px; color: var(--field-muted); font-size: 10px; font-weight: 600; letter-spacing: .12em; line-height: 1.2; }
.pattern-field-motif-group .pattern-field-motif-grid { margin-top: 0; }
.pattern-field-motif { display: grid; gap: 5px; min-width: 0; padding: 5px; border: 1px solid transparent; background: #0a0d0f; color: var(--field-muted); cursor: pointer; font: inherit; font-size: 9px; text-align: left; }
.pattern-field-motif img { width: 100%; aspect-ratio: 1; object-fit: contain; opacity: .72; }
.pattern-field-motif img[src*=".png"] { filter: invert(1); }
.pattern-field-motif span { min-height: 22px; line-height: 1.2; overflow-wrap: anywhere; }
.pattern-field-motif:hover, .pattern-field-motif:focus-visible, .pattern-field-motif.is-selected { border-color: var(--field-blue); color: var(--field-ink); }
.pattern-field-motif.is-selected img { opacity: 1; }
.pattern-field-select-label { display: grid; gap: 6px; margin: 18px 0 0 32px; color: var(--field-muted); text-transform: uppercase; }
.pattern-field-select-label select { width: 100%; min-height: 44px; padding: 9px 10px; border: 1px solid var(--field-line); border-radius: 0; background: #0a0d0f; color: var(--field-ink); font: inherit; font-size: 10px; letter-spacing: .03em; }
.pattern-field-control-section--ranges { display: grid; gap: 16px; }
.pattern-field-sequence-list { display: grid; gap: 6px; margin: 18px 0 0 32px; }
.pattern-field-sequence-row { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: 8px; }
.pattern-field-sequence-row--landmark { grid-template-columns: 20px minmax(0, 1fr) 52px; }
.pattern-field-sequence-row > span { color: var(--field-blue); font-size: 10px; letter-spacing: .08em; }
.pattern-field-sequence-row select { min-width: 0; min-height: 44px; padding: 8px 9px; border: 1px solid var(--field-line); border-radius: 0; background: #0a0d0f; color: var(--field-ink); font: inherit; font-size: 10px; }
.pattern-field-sequence-row--landmark img { width: 52px; height: 34px; border: 1px solid var(--field-line); background: #0a0d0f; object-fit: cover; }
.pattern-field-motif-sequence-row { display: grid; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid rgb(244 240 231 / .08); }
.pattern-field-motif-sequence-row + .pattern-field-motif-sequence-row { padding-top: 2px; }
.pattern-field-motif-motion-control { display: grid; gap: 4px; margin-left: 28px; color: var(--field-muted); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.pattern-field-motif-motion-control > span { display: flex; justify-content: space-between; gap: 10px; }
.pattern-field-motif-motion-control output { color: var(--field-ink); font-variant-numeric: tabular-nums; }
.pattern-field-motif-motion-control input { width: 100%; height: 44px; accent-color: var(--field-blue); cursor: pointer; }
.pattern-field-landmark-picker { position: relative; min-width: 0; }
.pattern-field-sequence-native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pattern-field-sequence-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; padding: 8px 9px; border: 1px solid var(--field-line); background: #0a0d0f; color: var(--field-ink); cursor: pointer; font: inherit; font-size: 10px; text-align: left; }
.pattern-field-sequence-trigger:hover, .pattern-field-sequence-trigger:focus-visible, .pattern-field-landmark-picker.is-open .pattern-field-sequence-trigger { border-color: var(--field-blue); }
.pattern-field-sequence-options { position: absolute; top: calc(100% + 5px); left: 0; z-index: 12; display: none; width: min(280px, 100%); max-height: 270px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 4px; border: 1px solid var(--field-line); background: #111518; }
.pattern-field-landmark-picker.is-open .pattern-field-sequence-options { display: grid; gap: 2px; }
.pattern-field-sequence-options button { display: grid; grid-template-columns: minmax(0, 1fr) 52px; align-items: center; gap: 8px; min-height: 44px; padding: 5px 6px; border: 1px solid transparent; background: transparent; color: var(--field-muted); cursor: pointer; font: inherit; font-size: 10px; line-height: 1.2; text-align: left; }
.pattern-field-sequence-options button:hover, .pattern-field-sequence-options button:focus-visible, .pattern-field-sequence-options button[aria-selected="true"] { border-color: var(--field-blue); color: var(--field-ink); }
.pattern-field-sequence-options button img { width: 52px; height: 34px; border: 1px solid var(--field-line); object-fit: cover; }
.pattern-field-sequence-state { display: flex; justify-content: space-between; margin: 14px 0 0 32px; color: var(--field-muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.pattern-field-sequence-state output { color: var(--field-ink); font-variant-numeric: tabular-nums; }
.pattern-field-motif-cycle { margin-top: 18px; }
.pattern-field-motif-cycle > p { margin: 0 0 10px 32px; color: var(--field-muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.pattern-field-motif-cycle .pattern-field-sequence-list { margin-top: 0; }
.pattern-field-sequence-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0 10px 32px; }
.pattern-field-sequence-heading p { margin: 0; color: var(--field-muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.pattern-field-sequence-actions { display: flex; flex: 0 0 auto; gap: 5px; }
.pattern-field-sequence-actions button { width: 44px; height: 44px; padding: 0; border: 1px solid var(--field-line); background: transparent; color: var(--field-ink); cursor: pointer; font: inherit; font-size: 18px; line-height: 1; }
.pattern-field-sequence-actions button:hover, .pattern-field-sequence-actions button:focus-visible { border-color: var(--field-blue); color: var(--field-blue); }
.pattern-field-auto-toggle { display: block; width: calc(100% - 32px); min-height: 44px; margin: 14px 0 0 32px; border: 1px solid var(--field-blue); background: rgb(126 183 209 / .08); color: var(--field-blue); cursor: pointer; font: inherit; font-size: 10px; letter-spacing: .08em; padding: 9px 10px; text-align: left; text-transform: uppercase; transition: border-color 150ms ease-out, background-color 150ms ease-out, color 150ms ease-out; }
.pattern-field-auto-toggle[aria-pressed="false"] { border-color: var(--field-line); background: transparent; color: var(--field-muted); }
.pattern-field-auto-toggle:hover, .pattern-field-auto-toggle:focus-visible { border-color: var(--field-ink); background: rgb(244 240 231 / .08); color: var(--field-ink); }
.pattern-field-range { display: grid; gap: 9px; color: var(--field-muted); text-transform: uppercase; }
.pattern-field-range > span { display: flex; justify-content: space-between; gap: 12px; }
.pattern-field-range output { color: var(--field-ink); font-variant-numeric: tabular-nums; }
.pattern-field-range input { width: 100%; height: 44px; accent-color: var(--field-blue); cursor: pointer; }
.pattern-field-color-section { padding-bottom: 22px; }
.pattern-field-tints { display: flex; gap: 9px; margin: 18px 0 0 32px; }
.pattern-field-tints button { width: 44px; height: 44px; border: 1px solid rgb(244 240 231 / .3); border-radius: 50%; background: var(--tint); cursor: pointer; }
.pattern-field-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 16px 22px 24px; }
.pattern-field-actions button:first-child { border-color: var(--field-blue); color: var(--field-blue); }
@media (max-width: 900px) { .pattern-field-shell, .pattern-field-page { width: 100%; height: auto; min-height: 0; overflow: visible; } .pattern-field-shell { display: block; } .pattern-field-page { grid-template-columns: 1fr; aspect-ratio: auto; } .pattern-field-stage-panel { min-height: 78svh; } .pattern-field-control-panel { height: auto; min-height: auto; overflow: visible; border-top: 1px solid var(--field-line); border-left: 0; } }
@media (max-width: 900px) { .pattern-field-landmark-hover-preview { position: fixed; top: 16px; right: 16px; left: auto; z-index: 50; width: min(44vw, 180px); } .pattern-field-sequence-options { top: auto; bottom: calc(100% + 5px); max-height: 220px; } }
@media (max-width: 560px) { .pattern-field-stage-panel { grid-template-rows: minmax(300px, 58svh) auto; min-height: auto; padding: 18px 14px 16px; } .pattern-field-stage canvas { min-height: 300px; } .pattern-field-stage-header h1 { font-size: clamp(34px, 12vw, 58px); } .pattern-field-control-section { padding-inline: 16px; } .pattern-field-control-header { padding-inline: 16px; } .pattern-field-actions { padding-inline: 16px; } }
@media (prefers-reduced-motion: reduce) { .pattern-field-play, .pattern-field-quiet-button, .pattern-field-section-heading button, .pattern-field-auto-toggle, .pattern-field-actions button { transition: none; } }