:root{--observer-ink:#3b3222;--observer-muted:#76684d;--observer-paper:#f7f1dd;--observer-paper-deep:#ece2c6;--observer-line:rgba(75,57,29,0.18);--observer-accent:#5f6f3d;--observer-accent-dark:#46552b;--observer-danger:#9d4038;--observer-radius:10px}html[data-app="observer"],html[data-app="observer"] body{min-height:100%;height:auto;overflow:auto}body.observerPage{display:block;align-items:initial;justify-content:initial;user-select:text;-webkit-user-select:text}.observerPage [hidden]{display:none !important}.observerApp{position:relative;z-index:1;isolation:isolate;width:100%;min-height:100dvh;margin:0 auto;padding:18px}.observerHeader{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:58px;padding:10px 14px;color:var(--observer-ink);background:linear-gradient(180deg,var(--observer-paper),var(--observer-paper-deep));border:1px solid rgba(75,57,29,0.2);border-radius:var(--observer-radius);box-shadow:0 5px 14px rgba(30,15,5,0.28),inset 0 1px 0 #fffdf4}.observerBrand{display:flex;min-width:0;align-items:baseline;gap:10px;color:inherit;text-decoration:none}.observerBrand strong{font-family:"Segoe Print","Comic Sans MS",cursive;font-size:17px;letter-spacing:0.06em}.observerBrand span{color:var(--observer-muted);font-size:14px}.observerHeaderMeta,.observerSectionHeading,.observerTransportRow,.observerButtonGroup{display:flex;align-items:center}.observerHeaderMeta{flex-shrink:0;gap:14px}.observerTextLink{display:inline-flex;min-height:24px;align-items:center;color:var(--observer-ink);font-size:14px;text-underline-offset:3px}.observerSoundButton{min-height:32px;padding:0 10px;color:var(--observer-ink);background:rgba(255,255,255,0.45);border:1px solid var(--observer-line);border-radius:6px;font:600 13px/1 "Segoe UI",system-ui,sans-serif;cursor:pointer}.observerSoundButton:focus-visible{outline:2px solid var(--observer-accent);outline-offset:2px}.observerBadge{max-width:250px;overflow:hidden;padding:4px 8px;color:var(--observer-muted);background:rgba(255,255,255,0.45);border:1px solid var(--observer-line);border-radius:999px;font-size:12px;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}.observerBadge.is-valid{color:#34451f;background:rgba(113,139,69,0.13);border-color:rgba(70,85,43,0.28)}.observerBadge.is-invalid{color:#752d28;background:rgba(157,64,56,0.1);border-color:rgba(157,64,56,0.28)}.observerMain{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:16px;padding-top:16px}.observerWorkspace,.observerSidebar{min-width:0}.observerDropPanel{position:relative;display:grid;min-height:min(620px,calc(100dvh - 110px));place-content:center;justify-items:start;gap:18px;padding:clamp(28px,7vw,92px);background:repeating-linear-gradient(0deg,rgba(110,150,200,0.09) 0,rgba(110,150,200,0.09) 1px,transparent 1px,transparent 26px),repeating-linear-gradient(90deg,rgba(110,150,200,0.09) 0,rgba(110,150,200,0.09) 1px,transparent 1px,transparent 26px),linear-gradient(145deg,rgba(248,244,230,0.99),rgba(236,226,198,0.97));border:1px solid rgba(75,57,29,0.28);border-radius:4px;box-shadow:0 8px 22px rgba(30,15,5,0.35)}.observerDropPanel.is-dragging{outline:3px dashed rgba(95,111,61,0.6);outline-offset:-12px}.observerTape{position:absolute;z-index:1;width:92px;height:26px;background:rgba(233,222,190,0.85);border:1px solid rgba(160,140,95,0.4);box-shadow:0 1px 3px rgba(54,31,13,0.18)}.observerTapeTL{top:-9px;left:26px;transform:rotate(-38deg)}.observerTapeTR{top:-9px;right:26px;transform:rotate(38deg)}.observerTapeBL{bottom:-9px;left:26px;transform:rotate(38deg)}.observerTapeBR{bottom:-9px;right:26px;transform:rotate(-38deg)}.observerDropRow{display:flex;flex-wrap:wrap;align-items:center;gap:14px}.observerDropSlot{display:inline-flex;align-items:center;gap:9px;padding:8px 14px;color:var(--observer-muted);border:2px dashed rgba(75,57,29,0.35);border-radius:8px;font-size:14px}.observerDropGlyph{color:var(--observer-accent-dark);font-size:19px;line-height:1}.observerDragOverlay{position:fixed;z-index:40;inset:0;display:grid;place-items:center;background:rgba(59,50,34,0.32);border:4px dashed rgba(247,241,221,0.85);border-radius:6px;pointer-events:none}.observerDragOverlay[hidden]{display:none}.observerDragChip{display:flex;align-items:center;gap:12px;padding:16px 26px;color:var(--observer-ink);background:linear-gradient(180deg,var(--observer-paper),var(--observer-paper-deep));border:1px solid rgba(75,57,29,0.35);border-radius:10px;box-shadow:0 10px 26px rgba(30,15,5,0.4);font-size:18px}.observerDragChip .observerDropGlyph{font-size:26px}.observerDeco{position:fixed;z-index:0;pointer-events:none;display:none}@media (min-width:1200px){.observerDeco{display:block}}.observerDropPanel h1{max-width:18ch;color:var(--observer-ink);font-size:clamp(30px,4vw,52px);font-weight:600;letter-spacing:-0.035em}.observerDropPanel p{max-width:58ch;margin-top:10px;color:var(--observer-muted);font-size:16px;line-height:1.55}.observerEyebrow{margin:0 !important;color:var(--observer-muted);font-family:ui-monospace,"Cascadia Mono",monospace;font-size:12px !important;letter-spacing:0.12em;text-transform:uppercase}#reportFile{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;clip-path:inset(50%)}.observerPrimaryButton,.observerSecondaryButton,.observerTransport button,.observerSpeed select,.observerField select{min-height:34px;border-radius:6px;font:600 14px/1 "Segoe UI",system-ui,sans-serif}.observerPrimaryButton,.observerSecondaryButton{display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.observerPrimaryButton{min-height:38px;padding:0 14px;color:#fffdf4;background:var(--observer-accent-dark);outline-color:var(--observer-accent)}.observerSecondaryButton{min-height:30px;padding:0 9px;color:var(--observer-ink);background:rgba(255,255,255,0.45);border:1px solid var(--observer-line)}.observerPrimaryButton:focus-visible,.observerSecondaryButton:focus-visible,.observerTransport button:focus-visible{outline:2px solid var(--observer-accent);outline-offset:2px}.observerHint{font-size:14px !important}.observerHint code{color:var(--observer-ink);font-family:ui-monospace,"Cascadia Mono",monospace}.observerBoardPanel{container-type:inline-size;overflow:hidden;background:var(--observer-paper);border:1px solid rgba(75,57,29,0.2);border-radius:var(--observer-radius)}.observerMetrics{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));padding:12px 14px;border-bottom:1px solid var(--observer-line)}.observerMetrics div{min-width:0;padding:0 12px;border-left:1px solid var(--observer-line)}.observerMetrics div:first-child{padding-left:0;border-left:0}.observerMetrics div:last-child{padding-right:0}.observerMetrics span,.observerMetrics strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.observerMetrics span{color:var(--observer-muted);font-size:12px}.observerMetrics strong{padding-top:3px;color:var(--observer-ink);font-size:19px;font-variant-numeric:tabular-nums;font-weight:600}@container (max-width:620px){.observerMetrics{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:12px}.observerMetrics div:nth-child(4){padding-left:0;border-left:0}}.observerCanvasWrap{position:relative;overflow:hidden;background:#8a5c33}#observerBoard{display:block;width:100% !important;height:auto !important;aspect-ratio:4 / 3}@media (min-width:1041px){html[data-app="observer"],html[data-app="observer"] body{height:100%;overflow:hidden}.observerApp{display:grid;grid-template-rows:auto minmax(0,1fr);height:100dvh;min-height:0}.observerMain{min-height:0}.observerWorkspace{display:grid;min-height:0;grid-template-rows:minmax(0,1fr)}.observerDropPanel{min-height:0}.observerBoardPanel{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;min-height:0}.observerMetrics{grid-row:1}.observerReplayNotice{grid-row:2}.observerCanvasWrap{grid-row:3}.observerBoardPanel .observerTransport{grid-row:4}.observerBoardPanel .observerReplayNotice{min-height:33px}.observerBoardPanel .observerReplayNotice:empty{display:block;visibility:hidden}.observerCanvasWrap{container-type:size;display:grid;place-items:center;min-height:0}#observerBoard{width:min(100%,calc(100cqh * 4 / 3)) !important;height:auto !important}.observerSidebar{min-height:0;overflow:hidden auto;padding-right:2px}}.observerReplayNotice{margin:0 auto 8px;max-width:calc(100% - 24px);width:fit-content;padding:6px 10px;color:var(--observer-ink);background:rgba(247,241,221,0.92);border:1px solid rgba(75,57,29,0.18);border-radius:6px;font-size:13px;text-align:center}.observerReplayNotice:empty{display:none}.observerReplayNotice.is-error{color:#752d28;border-color:rgba(157,64,56,0.35)}.observerTransport{display:grid;gap:10px;padding:13px 14px 14px;border-top:1px solid var(--observer-line)}.observerTransport>label,.observerField>span,.observerSpeed>span{color:var(--observer-muted);font-size:13px}.observerTransport input[type="range"]{width:100%;accent-color:var(--observer-accent-dark)}.observerTransportRow{justify-content:space-between;gap:16px}.observerButtonGroup{min-width:0;gap:7px}.observerTransport button{padding:0 10px;color:var(--observer-ink);background:rgba(255,255,255,0.48);border:1px solid var(--observer-line);cursor:pointer}.observerTransport button.is-primary{min-width:72px;color:#fffdf4;background:var(--observer-accent-dark);border-color:var(--observer-accent-dark)}#findStrategyButton{color:#fffdf4;background:#6b623e;border-color:#5a5234}.observerTransport button:disabled{cursor:default;opacity:0.45}.observerSpeed{display:flex;flex-shrink:0;align-items:center;gap:8px}.observerSpeed select,.observerField select{padding:0 28px 0 9px;color:var(--observer-ink);background:rgba(255,255,255,0.7);border:1px solid var(--observer-line)}.observerSidebar{display:grid;align-content:start;gap:12px}.observerSection{padding:15px;color:var(--observer-ink);background:linear-gradient(180deg,var(--observer-paper),var(--observer-paper-deep));border:1px solid rgba(75,57,29,0.2);border-radius:var(--observer-radius)}.observerSectionHeading{justify-content:space-between;gap:12px}.observerSection h2{padding-top:2px;font-size:18px;font-weight:600}.observerField{display:grid;gap:6px;padding-top:14px}.observerField select{width:100%;min-width:0}.observerDefinitionList{display:grid;gap:8px;padding-top:14px}.observerDefinitionList div{display:grid;grid-template-columns:86px minmax(0,1fr);gap:10px;padding-top:8px;border-top:1px solid var(--observer-line)}.observerDefinitionList dt{color:var(--observer-muted);font-size:13px}.observerDefinitionList dd{min-width:0;overflow:hidden;font-size:13px;font-variant-numeric:tabular-nums;text-align:right;text-overflow:ellipsis;white-space:nowrap}.observerCheckList,.observerActionList{display:grid;padding-top:10px;list-style:none}.observerCheckList li,.observerActionList li{border-top:1px solid var(--observer-line)}.observerCheckList li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px;padding:9px 0}.observerCheckState{min-width:34px;color:var(--observer-accent-dark);font-family:ui-monospace,"Cascadia Mono",monospace;font-size:11px}.observerCheckState.is-fail{color:var(--observer-danger)}.observerCheckCopy{min-width:0}.observerCheckCopy strong,.observerCheckCopy span{display:block}.observerCheckCopy strong{overflow:hidden;font-size:13px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.observerCheckCopy span{padding-top:3px;color:var(--observer-muted);font-size:12px;line-height:1.35}.observerActionSection{min-height:260px}.observerActionList li{display:grid;grid-template-columns:50px minmax(0,1fr);gap:9px;padding:8px 0;color:var(--observer-muted);font-size:12px}.observerActionList li.is-current{color:var(--observer-ink)}.observerActionList li.is-past{opacity:0.58}.observerActionTime{font-family:ui-monospace,"Cascadia Mono",monospace;font-variant-numeric:tabular-nums}.observerActionCopy{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (max-width:1040px){.observerMain{grid-template-columns:minmax(0,1fr)}.observerSidebar{grid-template-columns:repeat(2,minmax(0,1fr))}.observerActionSection{grid-column:1 / -1}}@media (max-width:680px){.observerApp{padding:10px}.observerHeader{align-items:flex-start}.observerBrand{display:grid;gap:1px}.observerHeaderMeta{display:grid;justify-items:end;gap:7px}.observerBadge{max-width:145px}.observerMain{padding-top:10px}.observerDropPanel{min-height:calc(100dvh - 96px);padding:28px 20px}.observerDropPanel h1{font-size:34px}.observerDropPanel p{font-size:16px}.observerPrimaryButton{min-height:44px}.observerTransportRow,.observerButtonGroup{align-items:stretch}.observerTransportRow{display:grid}.observerButtonGroup{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}#findStrategyButton{grid-column:1 / -1}.observerTransport button,.observerSpeed select{min-height:42px;font-size:16px}.observerSpeed{justify-content:space-between}.observerSidebar{grid-template-columns:minmax(0,1fr)}.observerActionSection{grid-column:auto}}