:root{font:16px 'Source Sans Pro','Segoe UI',Arial,sans-serif;color:#343a40;background:#eef1f4;--blue:#007bff;--border:#d9dfe4;--green:#237a42}*{box-sizing:border-box}body{margin:0;height:100dvh;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto}button,input,select,textarea{font:inherit}button{cursor:pointer;background:white;border:1px solid #bcc5cd;border-radius:4px;padding:9px 13px;color:#35424e;min-height:40px}button:hover{background:#edf3f8}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid #007bff;outline-offset:3px}button:disabled{cursor:default;opacity:.45}.review-head{padding:13px 26px;display:flex;gap:20px;align-items:center;background:#fff;border-bottom:1px solid var(--border)}.review-head strong{color:#213c31}.review-head strong span{font-weight:400;color:#64717b}.prototype{margin-left:auto;font-size:13px;color:#596773}#chapters{display:flex;gap:6px;padding:9px 26px;border-bottom:1px solid var(--border);overflow:auto}#chapters button{white-space:nowrap;border:0;background:transparent;font-size:14px;min-height:36px;padding:6px 12px}#chapters button[aria-current]{background:#dce9f7;color:#084a8b}main{padding:18px 26px 12px;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:12px;min-height:0;max-width:1680px;width:100%;margin:auto}.intro{display:flex;align-items:center;gap:40px}.intro>div{flex:1}.intro small{font-size:12px;text-transform:uppercase;letter-spacing:1.2px;color:#677682}h1{font-size:27px;font-weight:600;margin:5px 0}p{line-height:1.5}.intro p{max-width:540px;font-size:15px;margin:0}#stage{border:1px solid #c9d0d7;border-radius:5px;background:#f4f6f9;overflow:auto;min-height:0;position:relative;box-shadow:0 2px 7px #1b293015}.admin{min-height:100%;display:grid;grid-template-columns:195px minmax(0,1fr);position:relative;font-size:14px}.sidebar{background:#343a40;color:#c2c7d0;padding:0 10px}.brand{font-size:24px;font-weight:700;color:#fff;letter-spacing:-.7px;padding:18px 10px;border-bottom:1px solid #58616a}.brand span{color:#85b057}.region{padding:12px;color:#e8edef;font-size:13px}.side-link{padding:11px 12px;margin:3px 0;border-radius:4px}.side-link.active{background:#007bff;color:white}.admin-main{min-width:0}.admin-nav{background:#fff;display:flex;align-items:center;gap:4px;min-height:58px;padding:5px 12px;border-bottom:1px solid #dee2e6;flex-wrap:wrap}.nav-item{padding:10px 6px;color:#59636d;white-space:nowrap}.nav-current{color:#1e4b74}.nav-right{margin-left:auto;display:flex;gap:8px;align-items:center}.search{border:1px solid #ced4da;padding:7px 10px;color:#7a8791;min-width:125px}.account{font-size:12px}.content{padding:18px}.content h2{font-size:22px;font-weight:400;margin:0 0 15px}.card{background:white;border:1px solid #dee2e6;border-radius:4px;margin-bottom:16px}.card-head{border-bottom:1px solid #dee2e6;padding:12px 16px;font-size:17px}.card-body{padding:16px}.muted{color:#65727d}.tabs{display:flex;gap:23px;border-bottom:1px solid #dee2e6;padding:12px 0;margin:15px 0}.tabs span:first-child{color:#007bff}.filters{display:flex;gap:18px}.field label{display:block;font-size:12px;font-weight:600;margin-bottom:5px}.field select,.field input,textarea{border:1px solid #bdc7d0;border-radius:3px;padding:8px;background:white;color:#343a40}.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.kpi{border:1px solid #e0e5e9;padding:15px}.kpi strong{display:block;font-size:26px;margin-top:10px;font-weight:400}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:13px}th,td{text-align:left;padding:12px 10px;border:1px solid #dee2e6;white-space:nowrap}th{background:#fafbfc}tbody tr:nth-child(even){background:#f7f8fa}.clock{display:inline-flex;gap:8px;align-items:center;border:1px solid #b8c8bc;color:#285c38;background:#f7fbf8;font-variant-numeric:tabular-nums;white-space:nowrap;padding:8px 10px}.clock.running{border-color:#8ab79a;background:#edf7f0}.clock.offline{background:#fff7e5;color:#735514;border-color:#d7bd7a}.clock .dot{width:7px;height:7px;border-radius:50%;background:currentColor}.strip{display:flex;justify-content:space-between;align-items:center;background:#fff;border-bottom:1px solid #d7e1db;padding:8px 18px;gap:12px}.side-clock{margin:20px 0;padding:10px 5px;border-top:1px solid #69716c}.side-clock .clock{width:100%;justify-content:center}.placement-note{font-size:12px;color:#65727d}.panel{position:absolute;top:65px;right:18px;width:320px;background:white;border:1px solid #b8c4ce;border-radius:5px;box-shadow:0 8px 28px #16263635;z-index:5;padding:18px}.panel h3{font-size:17px;margin:0 0 12px}.timer-big{font-size:32px;font-variant-numeric:tabular-nums;margin:10px 0}.panel p{font-size:13px}.panel-actions{display:flex;gap:8px;margin:12px 0;flex-wrap:wrap}.primary{background:#007bff;color:#fff;border-color:#007bff}.primary:hover{background:#0065d2}.stop{color:#a13232;border-color:#c49292}.text-button{background:transparent;border:0;padding:8px 0;text-decoration:underline;color:#2e6298}.notice{background:#fff8e7;border:1px solid #dfc37d;padding:13px 16px;margin-bottom:16px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}.notice p{margin:0;flex:1;min-width:200px}.notice strong{display:block}.notice .panel-actions{margin:0}.success{background:#edf7f0;border:1px solid #b7d3bf;padding:12px}.toast{padding:10px 14px;background:#eaf3fc;border-left:3px solid #007bff;margin-bottom:12px;font-size:13px}.highlight{outline:2px solid #48885d;outline-offset:3px}#workbench{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:14px;background:#fff;border:1px solid var(--border);padding:11px 14px;border-radius:4px}#workbench:empty{display:none}#workbench p{margin:0;flex:1;min-width:180px}.options{display:flex;gap:7px;flex-wrap:wrap}.selected{background:#dce9f7;border-color:#6795bd}.scenario-label{font-size:11px;letter-spacing:.8px;text-transform:uppercase;color:#677682}.choice{display:block;padding:10px;border:1px solid #d9dfe4;margin-bottom:8px}.choice input{margin-right:8px}.review-form{max-width:950px;margin:auto;padding:22px;background:white}.review-form h2{font-size:20px}.review-form fieldset{border:0;border-top:1px solid #e0e5ea;margin:16px 0;padding:15px 0}.review-form legend{font-weight:600;padding-top:12px}.review-form textarea{width:100%;min-height:65px}.decision-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.review-form label{display:block;line-height:1.5;padding:5px}.review-form select{max-width:100%;padding:7px}.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:25px}.flow>article{background:#fff;border-top:3px solid #398456;padding:24px}.flow h2{font-size:20px}.flow li{margin:12px 0;line-height:1.5}footer{display:flex;align-items:center;justify-content:space-between;background:#fff;border-top:1px solid #cfd6dc;padding:11px 26px;gap:15px}#progress{font-size:13px;color:#67727c;text-align:center}dialog{max-width:800px;width:calc(100% - 30px);max-height:85dvh;border:1px solid #aebbc6;border-radius:6px;padding:24px}dialog::backdrop{background:#16253188}dialog p,dialog li{line-height:1.6}dialog code{overflow-wrap:anywhere}dialog a{color:#0867b3}.mobile-only{display:none}@media(max-width:1100px){.admin{grid-template-columns:155px 1fr}.nav-item{font-size:12px;padding:8px 4px}.search{min-width:90px;font-size:12px}.account{display:none}.intro{gap:20px}.intro p{max-width:440px}.admin-nav{gap:0}}@media(max-width:700px){.review-head{padding:9px 12px;gap:8px}.review-head strong{font-size:14px}.review-head strong span{display:none}.prototype{font-size:11px}.review-head button{font-size:12px;padding:6px}#chapters{padding:5px 8px}main{padding:10px;gap:8px}.intro{display:block}.intro small{font-size:10px}h1{font-size:21px;margin:4px 0}.intro p{font-size:13px;max-width:none;line-height:1.4}.admin{grid-template-columns:1fr}.sidebar{display:none}.admin-nav{padding:6px;gap:0}.nav-item{font-size:11px;padding:7px 4px}.nav-right{margin-left:auto}.search,.account{display:none}.clock{font-size:12px;padding:8px}.content{padding:12px}.content h2{font-size:19px}.card-body{padding:12px}.kpis{gap:7px}.kpi{padding:8px;font-size:11px}.kpi strong{font-size:20px}.filters{gap:8px;flex-wrap:wrap}.tabs{font-size:11px;gap:10px}.panel{width:calc(100% - 20px);right:10px;top:105px;padding:15px}.panel p{margin:7px 0}.timer-big{font-size:26px}.strip{padding:7px;font-size:12px}.notice{padding:10px;gap:8px}.notice p{font-size:12px;min-width:150px}.notice button{font-size:12px}.flow{grid-template-columns:1fr;padding:12px;gap:12px}.flow>article{padding:14px}.flow li{margin:8px 0;font-size:13px}#workbench{font-size:12px;padding:8px;gap:7px}#workbench button{font-size:12px;min-height:36px;padding:6px 9px}footer{padding:8px 12px}footer button{font-size:13px}#progress{font-size:11px}.decision-grid{grid-template-columns:1fr}.review-form{padding:14px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
/* Keep the illustrated screen inside the frame; only its contents scroll. */
main{margin:0 auto;height:100%;overflow:hidden}footer{position:relative;z-index:6}
noscript article{position:fixed;inset:0;background:white;padding:40px;overflow:auto;z-index:20}

/* Original screenshot pixels are cropped into header, sidebar and content.
   Proposed UI inserts rows without painting over existing controls. */
.capture-frame{width:100%;position:relative;overflow:hidden}.real-canvas{width:var(--source-width);position:relative;transform-origin:top left;font-size:14px;min-height:var(--source-height);background:#f4f6f9}.real-header{height:57px;background-image:var(--capture);background-size:var(--source-width) var(--source-height);position:relative}.real-side{position:absolute;left:0;top:57px;width:200px;bottom:0;background:#343a40}.sidebar-capture{height:843px;background-image:var(--capture);background-size:var(--source-width) var(--source-height);background-position:0 -57px}.real-main{margin-left:var(--content-x)}.real-screen-body{height:calc(var(--source-height) - 57px);background-image:var(--capture);background-size:var(--source-width) var(--source-height);background-position:calc(-1 * var(--content-x)) -57px;background-repeat:no-repeat}.header-clock{position:absolute;left:350px;top:9px}.real-canvas .clock{font-size:14px;min-height:36px;padding:6px 10px}.proposal-row{height:48px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 15px;background:white;border-bottom:1px solid #d7e1db}.sidebar-proposal{height:48px;padding:6px 8px;background:#343a40}.sidebar-proposal .clock{width:100%;justify-content:center;font-size:12px}.proposal-feedback{padding:15px 15px 1px}.real-canvas .panel{top:52px;left:350px;right:auto;width:320px;font-size:14px}.real-canvas .panel button{font-size:14px}.real-canvas .content{padding:20px 15px}.real-canvas .content h2{font-size:24px}.proposed-hours{min-height:787px}.proposed-hours>small{display:block;color:#65727d;margin-bottom:12px}.capture-mobile .proposal-row{height:48px;padding:5px 12px;font-size:12px}.capture-mobile .clock{font-size:13px}.capture-mobile .panel{left:10px;top:101px;width:370px;padding:16px}.capture-mobile .notice p{font-size:14px}.capture-mobile .notice button{font-size:14px}.capture-mobile .filters{flex-wrap:wrap}.capture-mobile .content{padding:15px}.layout-sidebar .panel{left:205px;top:57px}

/* Empty explanatory slots should leave room for the screen. */
#narration[hidden]{display:none}

/* Dock within the illustrated admin viewport, independent of screenshot scroll. */
.floating-dock{position:absolute;right:10px;z-index:5;display:flex;align-items:center;gap:10px;font-size:14px}.floating-dock>.clock{box-shadow:0 5px 18px #16263625;background:#f7fbf8;min-height:40px}.bug-reporter-example{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid #cfd4da;background:white;color:#6c757d;box-shadow:0 10px 22px #0000001f;font-size:20px}.floating-dock .panel{left:auto;right:0;top:auto;bottom:50px;width:320px;max-width:calc(100vw - 44px);max-height:calc(100% + 280px);overflow:auto;font-size:14px}.floating-dock .panel button{font-size:14px}

/* One short entry cue. No automatic slide changes or repeated flashing. */
#nav-hint{position:absolute;right:14px;bottom:calc(100% + 15px);max-width:min(300px,calc(100vw - 28px));padding:12px 15px;background:#204c38;color:white;border-radius:6px;font-size:14px;line-height:1.4;box-shadow:0 5px 18px #16263630;pointer-events:none;z-index:9}#nav-hint[hidden]{display:none}#nav-hint::after{content:'';position:absolute;right:28px;bottom:-10px;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #204c38}.nav-attention{animation:nav-bar-cue 1.2s ease-in-out 3}.nav-attention #next{animation:nav-next-cue 1.2s ease-in-out 3}.nav-attention #nav-hint{animation:nav-label-cue 1.2s ease-in-out 3}@keyframes nav-bar-cue{50%{background:#e0f1e6;box-shadow:0 -3px 0 #5a9870}}@keyframes nav-next-cue{50%{background:#237a42;color:white;border-color:#237a42;box-shadow:0 0 0 5px #237a4225}}@keyframes nav-label-cue{50%{transform:translateY(-4px)}}@media(prefers-reduced-motion:reduce){.nav-attention,.nav-attention #next,.nav-attention #nav-hint{animation:none}.nav-attention{background:#e0f1e6}.nav-attention #next{border:2px solid #237a42}}

/* Preview the adjacent build without adding another navigation row. */
footer{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}footer #back{justify-self:start;text-align:left}footer #next{justify-self:end;text-align:right}footer #back,footer #next{max-width:100%;display:flex;flex-direction:column;gap:3px}footer button small{font-size:12px;line-height:1.25;font-weight:400;white-space:normal;color:inherit}@media(max-width:700px){footer{grid-template-columns:minmax(0,1fr) 70px minmax(0,1fr);gap:8px}footer #back,footer #next{width:100%;padding:7px 9px}footer button small{font-size:11px}}

/* Each start-rule button plays one complete example, with no settings step. */
.start-choices{display:flex;align-items:center;gap:10px;flex-wrap:wrap;width:100%}.start-choices button[aria-pressed=true]{background:#dce9f7;border-color:#6795bd}.start-choices>.muted{font-size:12px}.start-example{padding:14px 16px;background:#fff;border-bottom:1px solid #d9dfe4}.start-example p{margin:0 0 10px;font-size:15px}.start-example>p:only-child{margin:0}.demo-action-area{display:flex;align-items:center;gap:12px;position:relative}.demo-target{border-color:#7fa5c8;color:#215781}.demo-cursor{font-size:30px;color:#215781;position:relative;pointer-events:none;opacity:0}.phase-action .demo-cursor{opacity:1;animation:demo-pointer .8s ease both}.phase-action .demo-target{animation:demo-click .8s ease both}.demo-outcome{font-size:13px;color:#5b6873}.phase-result .demo-outcome{font-weight:600;color:#237a42}.phase-result .demo-target{border-color:#237a42}.capture-mobile .start-example{padding:12px}.capture-mobile .start-example p{font-size:14px}.capture-mobile .demo-target{font-size:13px;max-width:220px}.capture-mobile .demo-outcome{font-size:12px}.capture-mobile .demo-action-area{gap:8px}@keyframes demo-pointer{from{transform:translate(45px,12px)}to{transform:translate(-12px,0)}}@keyframes demo-click{70%{background:#dce9f7;box-shadow:0 0 0 4px #007bff25}}@media(prefers-reduced-motion:reduce){.phase-action .demo-cursor,.phase-action .demo-target{animation:none}}

/* Explain each placement at the clock, once, rather than repeating footer copy. */
.placement-annotation{position:absolute;z-index:4;width:235px;max-width:calc(100% - 20px);padding:10px 12px;border:1px solid #78a48a;border-radius:5px;background:#f4fbf6;color:#204c38;font-size:13px;line-height:1.4;box-shadow:0 3px 12px #1626361a;pointer-events:none}.placement-arrow{position:absolute;left:0;z-index:4;pointer-events:none;overflow:hidden}.placement-annotation[hidden],.placement-arrow[hidden]{display:none}.placement-target{outline:2px solid #237a42;outline-offset:3px}@media(max-width:700px){.placement-annotation{width:215px;font-size:12px;padding:9px 11px}}

/* Guide the real manual controls, rather than a substitute example button. */
.manual-demo-target{position:relative;outline:3px solid #237a42;outline-offset:4px}.manual-demo-target::after{content:'↖';position:absolute;right:-24px;bottom:-22px;font-size:32px;line-height:1;color:#237a42;pointer-events:none;text-shadow:0 1px white}

/* Functional local controls aligned to their original admin capture. */
.demo-admin-home{position:absolute;left:270px;top:8px;width:70px;height:40px;border-radius:3px;z-index:2}.demo-admin-search{position:absolute;left:1049px;top:10px;width:215px;height:33px;border:1px solid #ced4da;background:white;border-radius:3px;color:#495057;font-size:14px;padding:6px 10px;z-index:2}.capture-mobile .demo-admin-home{left:70px;width:65px}.capture-mobile .demo-admin-search{left:157px;width:58px}.demo-tab-list{display:flex;gap:5px;padding:8px 15px;background:#e9edf1}.demo-tab-list button{font-size:13px;padding:5px 10px;min-height:34px}.demo-tab-list button[aria-selected=true]{background:#fff;border-color:#6795bd;color:#215781}.demo-admin-home.manual-demo-target{background:#dce9f755}.demo-admin-search.manual-demo-target{box-shadow:0 0 0 4px #237a4220}.real-header:has(.demo-admin-search.manual-demo-target)::after{content:'↖';position:absolute;left:1265px;top:30px;color:#237a42;font-size:32px;z-index:3;pointer-events:none;animation:admin-pointer-in .7s ease both}.capture-mobile .real-header:has(.demo-admin-search.manual-demo-target)::after{left:217px}@keyframes admin-pointer-in{from{transform:translate(55px,25px)}to{transform:translate(0,0)}}@media(prefers-reduced-motion:reduce){.real-header:has(.demo-admin-search.manual-demo-target)::after{animation:none}}

/* Guided actions use the status walkthrough's target/reveal/result pattern. */
.demo-result-flash{animation:timer-change .9s ease-out}@keyframes timer-change{from{box-shadow:0 0 0 3px #d2aa39;background:#fff1bd}to{box-shadow:0 0 0 0 transparent}}
.shared-demo{padding:18px;max-width:1300px;margin:auto}.shared-status{padding:12px 0 18px;font-size:16px}.shared-windows{display:grid;grid-template-columns:1fr 1fr;gap:20px}.shared-window{min-width:0;background:#fff;border:1px solid #bcc5cd;border-radius:5px;overflow:hidden}.shared-window h2{margin:0;padding:10px 14px;background:#e6ebf0;font-size:15px;font-weight:600}.shared-clock-row{display:flex;gap:12px;align-items:center;min-height:66px;padding:10px 14px;border-bottom:1px solid #d9dfe4;font-size:14px;font-variant-numeric:tabular-nums}.shared-clock-row button{margin-left:auto}.shared-window img{width:100%;height:230px;object-fit:cover;object-position:top;display:block}.shared-session{margin:18px 0 0;font-size:15px}.shared-window .manual-demo-target::after{right:8px;bottom:-20px;z-index:2}.review-head #notes{margin-left:auto}
@media(max-width:700px){.shared-demo{padding:12px}.shared-windows{grid-template-columns:1fr;gap:12px}.shared-status{font-size:14px;padding-bottom:12px}.shared-window img{height:95px}.shared-clock-row{min-height:56px;font-size:13px;padding:8px 12px}.shared-clock-row button{font-size:13px;min-height:36px}.shared-window h2{font-size:13px;padding:7px 12px}.shared-session{font-size:13px;margin-top:12px}}
@media(prefers-reduced-motion:reduce){.demo-result-flash{animation:none;outline:2px solid #d2aa39}}

.action-rule-note{position:absolute;z-index:6;top:78px;left:270px;width:335px;max-width:calc(100% - 24px);padding:12px 15px;background:#214f3a;color:#fff;border-radius:5px;box-shadow:0 4px 12px #18382925;font-size:15px;line-height:1.45;pointer-events:none}.action-rule-note::before{content:'';position:absolute;top:-25px;left:28px;height:25px;border-left:2px solid #214f3a}.action-rule-note::after{content:'';position:absolute;top:-32px;left:23px;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:8px solid #214f3a}.capture-mobile .action-rule-note{top:122px;left:12px;width:366px;font-size:14px}.capture-mobile .action-rule-note::before{top:-63px;left:85px;height:63px}.capture-mobile .action-rule-note::after{top:-70px;left:80px}

/* One explanation before each start-rule demo. */
#start-intro{max-width:480px}#start-intro h2{font-size:22px;margin:0 0 14px}#start-intro p{margin:0 0 22px}.start-intro-actions{display:flex;gap:10px;flex-wrap:wrap}

/* Presentation commentary lives outside the illustrated admin. */
.demo-context-label{display:block;font-size:12px;color:#65727d;margin-bottom:5px}#workbench>.start-example{width:100%;padding:0 0 10px;border-bottom:1px solid #d9dfe4;background:transparent}#workbench>.start-example p{font-size:14px;margin:0}

/* Presentation pointer: actual travel and press, independent of admin UI. */
.demo-playback-cursor{position:fixed;z-index:30;pointer-events:none;width:26px;height:32px;filter:drop-shadow(0 2px 2px #0005)}
.demo-playback-cursor::before{content:'';position:absolute;left:-10px;top:-10px;width:24px;height:24px;border:3px solid #237a42;border-radius:50%;opacity:0}
.demo-playback-cursor.is-clicking::before{opacity:1;animation:demo-press .26s ease-out}
@keyframes demo-press{from{transform:scale(.4)}to{transform:scale(1.3);opacity:0}}
body:has(.demo-playback-cursor) .manual-demo-target::after,body:has(.demo-playback-cursor) .real-header:has(.demo-admin-search.manual-demo-target)::after{display:none}
@media(prefers-reduced-motion:reduce){.demo-playback-cursor{display:none}}


#export{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:9px 13px;border:1px solid #007bff;border-radius:4px;text-decoration:none;cursor:pointer}

.decision-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.decision-grid>label{min-width:0;display:flex;flex-direction:column;gap:6px}.decision-grid select{width:100%;min-width:0}@media(max-width:700px){.decision-grid{grid-template-columns:minmax(0,1fr)}}