/* Original learning-example styling. Copyright (c) 2026 StyleGallery contributors. MIT. */
* { box-sizing: border-box; }
body { margin: 0; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
button, input, select { touch-action: manipulation; }
button:focus-visible, input:focus-visible, select:focus-visible, [tabindex="-1"]:focus-visible { outline: 3px solid #307865; outline-offset: 3px; }
[hidden] { display: none !important; }
h1, h2, p { margin: 0; }
svg { display: block; }
.sr-only { block-size: 1px; clip-path: inset(50%); inline-size: 1px; overflow: hidden; position: absolute; white-space: nowrap; }
.no-script { font: 12px/1.5 system-ui, sans-serif; padding: 12px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; transition: none !important; } }

body { background: #dce4d9; color: #eaf0df; font: 13px/1.4 Arial, Helvetica, sans-serif; padding: 16px; }
.field_layout { background: #0c1814; border: 1px solid #34483b; border-radius: 17px; inline-size: 100%; margin-inline: auto; max-inline-size: 940px; overflow: hidden; }
.field_header { align-items: center; border-block-end: 1px solid #314237; display: flex; gap: 12px; justify-content: space-between; min-block-size: 45px; padding: 9px 20px; }
.field_label { align-items: center; display: flex; font-size: 10px; font-weight: 700; gap: 8px; letter-spacing: 1.7px; }
.field_mark { color: #c5ddb5; font-size: 22px; line-height: 1; }
.field_number { color: #94a18e; }
.field_edition { color: #a7b29c; font-size: 9px; letter-spacing: 1.5px; }
.field_stage { block-size: 235px; isolation: isolate; overflow: hidden; position: relative; }
.field_art { block-size: 100%; inline-size: 100%; inset: 0; position: absolute; z-index: -1; }
.field_copy { background: linear-gradient(90deg, #0c1814e8, #0c181400); block-size: 100%; inline-size: 61%; padding: 24px 26px; }
.field_kicker { color: #d0c09b; font-size: 8px; letter-spacing: 2.2px; }
.field_copy h1 { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(38px, 7.6vw, 60px); font-weight: 400; letter-spacing: -2.5px; line-height: .94; margin-block: 14px 13px; }
.field_caption { color: #b1bea8; font-size: 11px; line-height: 1.45; }
.field_coordinates { bottom: 18px; color: #abbda5; display: flex; font: 8px/1.5 monospace; gap: 17px; letter-spacing: 1px; position: absolute; right: 20px; }
.field_controls { border-block-start: 1px solid #314237; padding: 10px 20px 12px; }
.field_control_top { align-items: center; display: flex; gap: 10px; justify-content: space-between; margin-block-end: 9px; }
.field_status { color: #c4d5b9; font-size: 10px; letter-spacing: .6px; }
.field_traces { align-items: center; color: #bdcab4; display: flex; font-size: 10px; gap: 4px; }
.field_traces input { accent-color: #c7dfad; block-size: 14px; inline-size: 14px; margin: 0; }
.field_control_row { align-items: center; display: flex; gap: 16px; }
.field_play { align-items: center; background: #d3e7bb; border: 0; border-radius: 7px; color: #152717; display: flex; flex-shrink: 0; font-size: 11px; font-weight: 700; gap: 21px; justify-content: space-between; min-block-size: 35px; min-inline-size: 126px; padding: 7px 12px; }
.field_play:hover { background: #e5f3d4; }
.field_play:disabled { background: #64765e; color: #fff; }
.field_range { color: #a8b79d; display: grid; flex: 1; font-size: 9px; gap: 4px; min-inline-size: 0; }
.field_range input { accent-color: #d1dfb3; inline-size: 100%; margin: 0; }
.field_value { color: #c7d9ba; font: 11px/1 monospace; min-inline-size: 36px; }
.field_motion_note { color: #9fad94; font-size: 9px; margin-block-start: 7px; }
.field_layout :focus-visible { outline-color: #f1c979; }
@media (min-width: 900px) { .field_stage { block-size: 340px; } .field_copy { padding: 44px 36px; } .field_copy h1 { font-size: 76px; } }
@media (max-width: 420px) { body { padding: 8px; } .field_header { padding-inline: 14px; } .field_edition { display: none; } .field_stage { block-size: 270px; } .field_copy { inline-size: 85%; padding: 25px 20px; } .field_copy h1 { font-size: 48px; } .field_controls { padding-inline: 14px; } .field_control_row { flex-wrap: wrap; gap: 10px; } .field_play { inline-size: 100%; } .field_range { min-inline-size: 160px; } .field_coordinates { bottom: 15px; } }