@charset "UTF-8";
:root{--paper:#f4f5ef;--ink:#183c43;--muted:#587076;--line:#dce2d8;--lime:#dbe9b8;--white:#fff;--focus:#527d27;font-family:Inter,"Avenir Next",Avenir,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent}button:disabled{opacity:.4;cursor:default}button,a,input{touch-action:manipulation}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--focus);outline-offset:5px}button{border:0}button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}button:active:not(:disabled){transform:translateY(1px)}[hidden]{display:none!important}.page{max-width:1460px;margin:auto;padding:30px 52px 20px}.masthead{display:flex;justify-content:space-between;align-items:center;padding-bottom:32px;border-bottom:1px solid var(--line)}.wordmark{display:inline-flex;align-items:center;gap:11px;color:inherit;font-size:27px;font-weight:700;letter-spacing:-1.3px;text-decoration:none}.wordmark svg{width:31px;height:31px;fill:var(--ink)}.wordmark svg path{fill:var(--paper)}.wordmark-dot{color:#78a44c;margin-left:-11px}.edition{display:flex;align-items:center;gap:9px;font-size:10px;font-weight:650;letter-spacing:1.6px}.edition>span{width:6px;height:6px;background:#6d955b;border-radius:50%}.intro{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;padding:34px 0 30px}.eyebrow{font-size:10px;font-weight:650;letter-spacing:2px;margin:0 0 13px}.intro h1{font-size:clamp(36px,4.1vw,59px);font-weight:500;letter-spacing:-2.6px;line-height:1.06;margin:0}.intro-copy{color:var(--muted);font-size:14px;line-height:1.7;margin:0 0 3px}.player{background:#fafbf7;border:1px solid var(--line);border-radius:25px;overflow:hidden;box-shadow:0 16px 55px -44px #29413a60}.stage-header{height:69px;display:flex;align-items:center;justify-content:space-between;padding:13px 23px;position:relative;z-index:2}.mode-switch{display:flex;border:1px solid #e0e5dc;background:#edf0e8;border-radius:100px;padding:4px;gap:2px}.mode{display:flex;align-items:center;gap:8px;padding:9px 15px;font-size:12px;font-weight:600;color:var(--muted);background:transparent;border-radius:100px;transition:background .15s,color .15s}.mode.active{background:var(--ink);color:var(--white);box-shadow:0 2px 5px #1a3c431a}.mode svg{width:16px;height:16px}.quiet-button{display:flex;align-items:center;gap:8px;background:transparent;color:var(--ink);font-size:11px;font-weight:550;min-height:44px;padding:7px}.quiet-button:not(:disabled):hover{color:#567746}.viewport{position:relative;height:clamp(360px,48vh,620px);background:radial-gradient(ellipse at 50% 50%,#fff 0%,#f6f8f1 72%,#f1f4eb 100%)}.media-panel{position:absolute;inset:0}model-viewer{display:block;width:100%;height:100%;--poster-color:transparent;background:transparent;touch-action:pan-y}video{display:block;width:100%;height:100%;object-fit:contain;background:#edf0e8}.stage-message{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;max-width:470px;width:calc(100% - 48px);padding:22px 28px;border:1px solid #fff8;border-radius:20px;background:#f4f5efed;box-shadow:0 6px 40px #183c4307;z-index:2}.stage-message p{font-size:14px;line-height:1.6;margin:12px 0}.loading-ring{width:27px;height:27px;border:2px solid #cedac7;border-top-color:var(--ink);border-radius:50%;margin:0 auto;animation:spin 1s linear infinite}progress{width:150px;height:3px;appearance:none;border:0;border-radius:3px;overflow:hidden;background:var(--line)}progress::-webkit-progress-bar{background:var(--line)}progress::-webkit-progress-value{background:var(--ink)}progress::-moz-progress-bar{background:var(--ink)}.small-button{min-height:42px;border:1px solid var(--ink);border-radius:50px;background:transparent;color:var(--ink);font-size:12px;padding:8px 20px;margin-top:3px}.stage-caption{position:absolute;bottom:21px;left:25px;right:25px;display:flex;justify-content:space-between;gap:20px;align-items:center;pointer-events:none;color:var(--muted);font-size:10px;line-height:1.5}.view-label{border:1px solid #cad5c7;border-radius:4px;font-size:8px;letter-spacing:1.4px;padding:5px 7px;color:var(--ink);background:#f4f5efba}.transport{display:flex;align-items:center;gap:28px;padding:21px 25px 20px;background:#fff;border-top:1px solid var(--line)}.playback-buttons{display:flex;align-items:center;gap:13px}.play-button{display:flex;justify-content:center;align-items:center;gap:9px;background:var(--ink);color:#fff;min-height:46px;min-width:107px;border-radius:100px;padding:12px 20px;font-size:12px;font-weight:600}.play-button:hover:not(:disabled){background:#2c5157}.play-button svg{height:16px;width:16px;fill:currentColor;stroke-width:0}.icon-button{display:flex;align-items:center;justify-content:center;color:var(--ink);background:#f4f5ef;border-radius:50%;width:43px;height:43px;flex-shrink:0}.icon-button:hover:not(:disabled){background:#e6ecdf}.icon-button svg{width:17px;height:17px}.timeline-group{flex:1;min-width:0}.timeline{display:block;appearance:none;width:100%;height:22px;margin:0;background:transparent;cursor:pointer;--fill:0%}.timeline:disabled{cursor:default;opacity:.4}.timeline::-webkit-slider-runnable-track{height:4px;border-radius:10px;background:linear-gradient(to right,var(--ink) 0 var(--fill),#e4e9df var(--fill) 100%)}.timeline::-moz-range-track{height:4px;border-radius:10px;background:#e4e9df}.timeline::-moz-range-progress{height:4px;border-radius:10px;background:var(--ink)}.timeline::-webkit-slider-thumb{appearance:none;width:14px;height:14px;margin-top:-5px;border:3px solid #fff;border-radius:50%;background:var(--ink);box-shadow:0 0 0 1px var(--ink)}.timeline::-moz-range-thumb{width:9px;height:9px;border:3px solid #fff;border-radius:50%;background:var(--ink);box-shadow:0 0 0 1px var(--ink)}.timeline-labels{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:6px;font-size:10px;color:var(--muted)}.time-display{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}.time-display>span+span{color:var(--muted)}.footer{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:13px 2px 0;color:var(--muted);font-size:10px}.footer p{display:flex;gap:9px;align-items:center}.footer-dot{width:5px;height:5px;border-radius:50%;background:#83a45d}.footer p+ p{gap:13px}.footer p span[aria-hidden]{opacity:.65}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;top:-60px;left:15px;z-index:20;background:var(--ink);color:#fff;padding:12px 18px;border-radius:6px}.skip-link:focus{top:15px}.noscript{padding:20px}.noscript a{color:inherit}.sound-button{white-space:nowrap}.is-error .stage-message{background:#f4f5eff5}.is-error .stage-message p{font-weight:500}@keyframes spin{to{transform:rotate(360deg)}}
@media(min-width:1600px){.viewport{height:560px}}@media(max-width:800px){.page{padding:24px 25px 16px}.masthead{padding-bottom:24px}.intro{padding:29px 0 25px}.intro h1{font-size:43px;letter-spacing:-1.9px}.intro-copy{max-width:210px;font-size:12px}.desktop-break{display:none}.transport{gap:18px;padding:18px}.stage-header{padding:11px 17px}.viewport{height:460px}.stage-caption{left:18px;right:18px;font-size:9px}.timeline-labels>span:first-child{font-size:9px}.play-button{min-width:91px;padding:11px 16px}.playback-buttons{gap:8px}}
@media(max-width:540px){.page{padding:19px 15px 12px}.masthead{padding-bottom:19px}.wordmark{font-size:24px}.wordmark svg{width:28px;height:28px}.edition{font-size:8px;letter-spacing:.75px}.edition>span{display:none}.intro{display:block;padding:25px 2px 22px}.intro h1{font-size:40px;line-height:1.04}.eyebrow{font-size:8px;margin-bottom:10px}.intro-copy{font-size:12px;max-width:290px;margin:15px 0 0;line-height:1.5}.player{border-radius:19px}.stage-header{height:61px;padding:9px 12px}.mode{padding:8px 12px;font-size:11px;min-height:35px}.mode svg{width:15px;height:15px}.quiet-button{padding:5px;gap:5px}.quiet-button span{display:none}.viewport{height:370px}.stage-caption{bottom:15px;left:14px;right:14px}.view-label{font-size:7px}.stage-caption>span+span{font-size:8px;max-width:185px;text-align:right}.transport{padding:16px 14px;gap:11px;flex-wrap:wrap}.play-button{min-width:80px;min-height:42px;font-size:11px;padding:10px 13px;gap:6px}.icon-button{height:39px;width:35px;background:transparent}.playback-buttons{gap:3px}.timeline-labels>span:first-child{display:none}.timeline-labels{justify-content:flex-end;margin-top:3px}.timeline-group{min-width:140px}.footer{font-size:8px;gap:9px}.footer p{gap:5px}.footer p+ p{gap:7px}.sound-button{font-size:10px;min-height:30px;margin-left:auto}.stage-message{padding:18px}.stage-message p{font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.view-label{background:var(--paper)}#gesture-hint{background:var(--paper);padding:3px 6px;border-radius:4px}
/* Badge demonstration — keep the assembly viewer available alongside it. */
.demo-active .viewport{height:560px}.demo-active .stage-caption{bottom:18px}.demo-active .intro{padding-top:26px;padding-bottom:24px}.demo-active .intro h1{font-size:clamp(34px,4vw,54px)}.demo-active .rfid-target{display:block}.rfid-target{display:none;width:48px;height:48px;margin:0;border:1.5px solid #a66b4eb3;border-radius:50%;pointer-events:none;background:transparent;--min-hotspot-opacity:0;transition:opacity .15s}.rfid-target>span{position:absolute;inset:-6px;border:1px solid #a66b4e3d;border-radius:50%}.rfid-target.scanning{background:conic-gradient(#a66b4e var(--scan),transparent 0);border:0;mask:radial-gradient(transparent 61%,#000 63%);-webkit-mask:radial-gradient(transparent 61%,#000 63%)}.rfid-target.accepted{border-color:#548167;box-shadow:0 0 0 7px #54816715}.rfid-target.unavailable{opacity:0!important}#badge-layer{position:absolute;inset:0;pointer-events:none;z-index:3}#demo-badge{position:absolute;left:80%;top:62%;transform:translate(-50%,-50%) rotate(-10deg);width:174px;height:110px;border:1px solid #dbd9d2;border-radius:10px;padding:12px 15px;display:flex;flex-direction:column;align-items:stretch;text-align:left;color:#373530;background:linear-gradient(130deg,#fffdf8,#eae8df);box-shadow:0 14px 19px -12px #24292670,inset 0 1px 1px #fff;cursor:grab;pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;z-index:15;transition:box-shadow .18s,transform .18s}#demo-badge:disabled{opacity:.65;cursor:default}#demo-badge.dragging{transform:translate(-50%,-50%) rotate(2deg) scale(1.03);cursor:grabbing;box-shadow:0 20px 30px -12px #24292680}#demo-badge.travelling{transition:left .18s ease,top .18s ease,transform .3s ease}#demo-badge.accepted{box-shadow:0 0 0 3px #54816760,0 18px 28px -12px #24292680}.badge-top{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:700;letter-spacing:-.5px}.badge-top>span{font-size:7px;letter-spacing:1px;color:#857e70;font-weight:500}.badge-name{font-size:19px;letter-spacing:-.7px;font-weight:600;margin-top:10px}.badge-role{font-size:8px;color:#726f66;margin-top:1px}.badge-bottom{display:flex;align-items:center;justify-content:space-between;font-size:6px;letter-spacing:.9px;margin-top:auto;color:#777163}.badge-bottom svg{width:21px;height:21px;fill:none;stroke:#8b795c;stroke-width:1.7}.badge-demo{display:grid;grid-template-columns:1.15fr 1fr;gap:40px;padding:26px 30px 24px;background:#fff;border-top:1px solid var(--line)}.badge-demo h2{margin:0 0 8px;font-size:23px;line-height:1.15;font-weight:500;letter-spacing:-.6px}.badge-demo .eyebrow{font-size:8px;letter-spacing:1.8px;color:#806852;margin-bottom:11px}.demo-instructions>p:not(.eyebrow){font-size:12px;line-height:1.6;color:var(--muted);max-width:410px}.demo-actions{display:flex;gap:10px;margin-top:18px;align-items:center}.demo-actions .small-button{margin:0;border-color:#d4ddd0;font-size:11px;min-height:43px}.demo-actions .play-button{font-size:11px;min-height:43px}#demo-status{min-height:38px;margin:15px 0 0!important;font-size:11px!important;color:#486356!important}.demo-journal{border-left:1px solid var(--line);padding-left:32px}.journal-top{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:11px;font-weight:600}.text-button{background:transparent;font-size:10px;color:var(--muted);text-decoration:underline;text-underline-offset:3px;min-height:32px;padding:0 3px}.attendance{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0}.attendance dt{font-size:9px;color:var(--muted)}.attendance dd{font-size:25px;font-weight:400;letter-spacing:-1px;margin:6px 0 0;font-variant-numeric:tabular-nums}#scan-history{list-style:none;margin:0;padding:0;min-height:35px}#scan-history li{display:flex;align-items:center;gap:10px;border-top:1px solid #eef0e8;padding:8px 0;font-size:10px}#scan-history li>span:first-child{border-radius:4px;padding:4px 6px;font-size:8px;min-width:45px;text-align:center}.entry{color:#446c55;background:#e9f1eb}.exit{color:#546578;background:#ecf0f3}#scan-history time{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--muted)}#scan-history .empty-history{font-size:11px;color:#697065;padding-top:12px}.demo-disclaimer{font-size:9px;color:var(--muted);margin:17px 0 0}.demo-active .stage-header{height:67px}.mode{white-space:nowrap}
@media(max-width:800px){.demo-active .viewport{height:490px}.badge-demo{gap:24px;padding:22px}.demo-journal{padding-left:23px}#demo-badge{left:82%;top:76%;width:152px;height:98px;padding:11px 13px}.badge-name{font-size:17px;margin-top:8px}.badge-top{font-size:11px}.badge-role{font-size:7px}.badge-bottom{font-size:5px}.badge-bottom svg{height:18px;width:18px}.demo-active .intro-copy{max-width:260px}}
@media(max-width:540px){.demo-active .viewport{height:425px}.demo-active .stage-header{padding:9px;height:63px}.demo-active .mode{font-size:10px;padding:8px 10px}.mode-switch{gap:0;padding:3px}.mode svg{display:none}.badge-demo{display:block;padding:23px 18px}.demo-journal{border-left:0;padding:20px 0 0;margin-top:20px;border-top:1px solid var(--line)}.badge-demo h2{font-size:22px}#demo-badge{left:74%;top:80%;width:137px;height:88px;padding:9px 11px}.badge-name{font-size:16px;margin-top:6px}.badge-role{font-size:6px}.badge-top{font-size:10px}.badge-top>span{font-size:6px}.badge-bottom svg{height:16px;width:16px}.rfid-target{width:38px;height:38px}.demo-active .stage-caption>span+span{max-width:160px}.demo-active .intro-copy{max-width:300px}.demo-active .intro{padding-bottom:20px}.demo-active .intro h1{font-size:40px}}

.badge-top>span,.badge-role,.badge-bottom{color:#665f52}

.demo-actions{flex-wrap:wrap}.work-controls{grid-column:1/-1;padding-top:24px;border-top:1px solid var(--line)}.work-controls-title{display:flex;align-items:center;justify-content:space-between;gap:16px}.work-controls-title h3{margin:0;font-weight:500;font-size:24px;letter-spacing:-.5px}.work-controls-title .small-button{margin:0;font-size:11px}.work-cards{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px}.work-card{border:1px solid var(--line);border-radius:13px;padding:20px;background:#fcfbf7}.work-card-top{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:10px}.work-card-top span+span{background:#e9e8e1;border-radius:4px;padding:4px 7px;color:#57594e}.work-card[data-status=running] .work-card-top span+span{background:#faefe6;color:#8a4e2a}.work-card[data-status=done] .work-card-top span+span{background:#e9f1eb;color:#446c55}.work-card h4{font-size:20px;font-weight:500;letter-spacing:-.3px;margin:17px 0 7px}.work-card p{font-size:11px;color:var(--muted);line-height:1.7}.work-card .work-time{border-top:1px solid var(--line);padding-top:12px;min-height:34px}.work-card .play-button{font-size:11px;min-height:40px}.work-announcement{font-size:12px;color:#486356;line-height:1.6;min-height:20px;margin-bottom:0}@media(max-width:540px){.work-cards{grid-template-columns:1fr;gap:12px}.work-controls{margin-top:24px}.work-controls-title{align-items:flex-start}.work-controls-title h3{font-size:22px}.work-controls-title .small-button{font-size:10px;padding:8px 11px}.work-card{padding:17px}.demo-actions{gap:7px}}

/* Onboarding: the visual card moves a little; the scan logic never follows it. */
.badge-guide{position:absolute;display:flex;align-items:center;gap:10px;width:208px;padding:12px 14px;background:#183c43;color:#fff;border-radius:12px;box-shadow:0 7px 18px #183c4320;pointer-events:none;z-index:14;animation:badge-guide-reveal .18s ease-out}.badge-guide::after{content:"";position:absolute;bottom:-6px;left:calc(50% - 6px);width:12px;height:12px;background:#183c43;transform:rotate(45deg)}.badge-guide>svg{width:22px;height:22px;flex:none;fill:none;stroke:#dbe9b8;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.badge-guide strong{display:block;font-size:14px;font-weight:600;line-height:1.3}.badge-guide span>span{display:block;font-size:11px;line-height:1.4;margin-top:3px;color:#e3eadf}.badge-guide.hint-left{width:156px;padding:10px;gap:7px}.badge-guide.hint-left>svg{width:18px;height:18px}.badge-guide.hint-left strong{font-size:12px}.badge-guide.hint-left span>span{font-size:10px}.badge-guide.hint-left::after{left:auto;right:-5px;top:calc(50% - 5px);bottom:auto;width:10px;height:10px}#demo-badge.invite-nudge:not(.dragging){animation:badge-invite-nudge 1.1s ease-in-out 1}.rfid-target.invite-target{box-shadow:0 0 0 7px #a66b4e22;border-color:#956148;animation:rfid-invite-glow 1.3s ease-in-out 2}@keyframes badge-invite-nudge{0%,100%{transform:translate(-50%,-50%) rotate(-10deg)}22%{transform:translate(-50%,calc(-50% - 3px)) rotate(-13deg)}46%{transform:translate(-50%,calc(-50% - 3px)) rotate(-7deg)}70%{transform:translate(-50%,calc(-50% - 1px)) rotate(-11.5deg)}}@keyframes rfid-invite-glow{0%,100%{box-shadow:0 0 0 7px #a66b4e22}50%{box-shadow:0 0 0 12px #a66b4e12}}@keyframes badge-guide-reveal{from{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){#demo-badge.invite-nudge,.rfid-target.invite-target,.badge-guide{animation:none!important;transition:none!important}}

/* The website owns the introduction. Embedded mode retains every demo control. */
.js:not([data-i18n-ready]) .page{visibility:hidden}
.is-embedded .page{max-width:none;padding:0}
.is-embedded .masthead,.is-embedded .intro,.is-embedded .footer{display:none}
.is-embedded .player{border:0;border-radius:0;box-shadow:none}
.is-embedded .viewport,.is-embedded .demo-active .viewport{height:clamp(350px,48vw,520px)}
.is-embedded .badge-demo{padding:22px;gap:24px}
.is-embedded .stage-header{padding:12px 18px}
.edition>span[data-i18n]{display:inline;width:auto;height:auto;background:none;border-radius:0}
.badge-guide [data-i18n]{margin:0;font:inherit;color:inherit}
.mode-switch{max-width:100%;overflow-x:auto}
.mode{min-height:44px}
@media(max-width:540px){
 .is-embedded .viewport,.is-embedded .demo-active .viewport{height:425px}
 .is-embedded .stage-header{height:auto;min-height:65px;padding:8px}
 .is-embedded .badge-demo{padding:20px 16px}
 .mode{padding:8px 9px!important}
}

/* Compact website column: explanations live beside the demo, controls stay here.
   Every rule is embed-scoped so the standalone presentation keeps its layout. */
.is-embedded .viewport,
.is-embedded .demo-active .viewport {
  height: clamp(390px, 62vw, 450px);
}
.is-embedded .stage-header,
.is-embedded .demo-active .stage-header {
  height: auto;
  min-height: 66px;
  padding: 6px 12px;
}
.is-embedded .quiet-button { flex-shrink: 0; }
.is-embedded .badge-demo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 12px;
  padding: 12px 16px;
}
.is-embedded .demo-instructions { display: contents; }
.is-embedded .demo-instructions > .eyebrow,
.is-embedded #demo-heading,
.is-embedded #demo-help,
.is-embedded .journal-top > span,
.is-embedded .attendance,
.is-embedded #scan-history,
.is-embedded .demo-disclaimer {
  display: none;
}
.is-embedded .demo-actions {
  grid-column: 1;
  grid-row: 1;
  gap: 8px;
  margin: 0;
}
.is-embedded .demo-actions .play-button,
.is-embedded .demo-actions .small-button {
  min-height: 44px;
  margin: 0;
  padding: 9px 13px;
}
.is-embedded #demo-status {
  grid-column: 1 / -1;
  grid-row: 2;
  min-height: 32px;
  max-width: none;
  margin: 8px 0 0 !important;
  line-height: 1.45;
}
.is-embedded .demo-journal {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  margin: 0;
  padding: 0;
  border: 0;
}
.is-embedded .journal-top { display: block; }
.is-embedded #demo-reset {
  min-height: 44px;
  padding: 8px 4px;
}
/* The optional keyboard work controls remain available in a bounded panel. */
.is-embedded .work-controls {
  grid-column: 1 / -1;
  max-height: 220px;
  margin: 8px 0 0;
  padding: 12px 0 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
}
.is-embedded .work-controls-title {
  align-items: center;
  gap: 10px;
}
.is-embedded .work-controls-title .eyebrow { display: none; }
.is-embedded .work-controls-title h3 { font-size: 19px; }
.is-embedded .work-controls-title .small-button { min-height: 44px; }
.is-embedded .work-cards {
  gap: 10px;
  margin-top: 10px;
}
.is-embedded .work-card { padding: 12px; }
.is-embedded .work-card h4 {
  margin: 9px 0 4px;
  font-size: 16px;
  line-height: 1.25;
}
.is-embedded .work-card p { margin: 4px 0; }
.is-embedded .work-card .work-time {
  min-height: 0;
  padding-top: 6px;
}
.is-embedded .work-card .play-button { min-height: 44px; }
.is-embedded .work-announcement {
  margin: 8px 0 0;
  font-size: 11px;
  line-height: 1.45;
}
@media (max-width: 540px) {
  .is-embedded .viewport,
  .is-embedded .demo-active .viewport { height: 400px; }
  .is-embedded .stage-header,
  .is-embedded .demo-active .stage-header {
    min-height: 64px;
    padding: 6px 8px;
  }
  .is-embedded .badge-demo {
    grid-template-columns: minmax(0, 1fr);
    padding: 12px 14px;
  }
  .is-embedded .demo-actions { grid-column: 1; }
  .is-embedded .demo-journal {
    grid-column: 1;
    grid-row: 3;
    justify-self: end;
    margin-top: 2px;
  }
  .is-embedded #demo-status { grid-row: 2; }
  .is-embedded .work-controls { max-height: 196px; }
}

/* A product on the website surface, without a separate player container.
   Theme values are supplied by the embedding page. */
html.is-embedded,
.is-embedded body,
.is-embedded .page,
.is-embedded .player,
.is-embedded .viewport,
.is-embedded .media-panel,
.is-embedded model-viewer,
.is-embedded video,
.is-embedded .stage-header,
.is-embedded .transport,
.is-embedded .badge-demo,
.is-embedded .demo-journal,
.is-embedded .work-controls,
.is-embedded .work-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.is-embedded .player { overflow: visible; }
.is-embedded model-viewer { --poster-color: transparent; }
.is-embedded .viewport,
.is-embedded .demo-active .viewport {
  height: clamp(500px, 76vw, 540px);
}
.is-embedded .stage-header,
.is-embedded .demo-active .stage-header {
  min-height: 60px;
  padding: 4px 12px;
}
.is-embedded .mode-switch {
  gap: 12px;
  padding: 4px 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.is-embedded .mode {
  min-height: 44px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
}
.is-embedded .mode.active {
  border-bottom-color: var(--ink);
  background: transparent;
  color: var(--ink);
  box-shadow: none;
}
.is-embedded .mode:hover:not(:disabled),
.is-embedded .quiet-button:hover:not(:disabled) { color: var(--ink); }
.is-embedded .stage-caption,
.is-embedded .view-label,
.is-embedded #gesture-hint {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--muted);
}
.is-embedded .stage-message,
.is-embedded .is-error .stage-message {
  max-width: 360px;
  padding: 10px 16px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--ink);
}
.is-embedded .loading-ring {
  width: 22px;
  height: 22px;
  border-color: var(--line);
  border-top-color: var(--ink);
}
.is-embedded .transport {
  gap: 16px;
  padding: 8px 16px 12px;
}
.is-embedded .play-button,
.is-embedded .small-button,
.is-embedded .demo-actions .small-button,
.is-embedded .icon-button {
  min-height: 44px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  box-shadow: none;
}
.is-embedded .play-button:hover:not(:disabled),
.is-embedded .small-button:hover:not(:disabled),
.is-embedded .icon-button:hover:not(:disabled) {
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  border-color: var(--muted);
  color: var(--ink);
}
.is-embedded .text-button,
.is-embedded .work-card p { color: var(--muted); }
.is-embedded #demo-status { color: var(--muted) !important; }
.is-embedded .work-announcement { color: var(--ink); }
.is-embedded .work-card { padding: 12px 2px; }
.is-embedded .work-card[data-status] .work-card-top span + span {
  background: transparent;
  color: var(--muted);
}
.is-embedded .work-card .work-time { border-color: var(--line); }
.is-embedded .timeline::-webkit-slider-runnable-track {
  background: linear-gradient(to right, var(--ink) 0 var(--fill), var(--line) var(--fill) 100%);
}
.is-embedded .timeline::-moz-range-track { background: var(--line); }
.is-embedded .timeline::-webkit-slider-thumb { border-color: var(--paper); }
.is-embedded .timeline::-moz-range-thumb { border-color: var(--paper); }
.is-embedded .badge-guide,
.is-embedded .badge-guide::after { background: var(--ink); }
.is-embedded .badge-guide,
.is-embedded .badge-guide span > span,
.is-embedded .badge-guide > svg { color: var(--paper); }
.is-embedded .badge-guide > svg { stroke: currentColor; }
.is-embedded button:focus-visible,
.is-embedded a:focus-visible,
.is-embedded input:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
@media (max-width: 540px) {
  .is-embedded .viewport,
  .is-embedded .demo-active .viewport {
    height: clamp(410px, 110vw, 440px);
  }
  .is-embedded .stage-header,
  .is-embedded .demo-active .stage-header { padding: 4px 8px; }
  .is-embedded .mode-switch { gap: 4px; }
}