@font-face{font-family:Bricolage;src:url(../../assets/fonts/BricolageGrotesque-Bold.ttf) format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:Instrument;src:url(../../assets/fonts/InstrumentSans-Regular.ttf) format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Instrument;src:url(../../assets/fonts/InstrumentSans-Bold.ttf) format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:GeistMono;src:url(../../assets/fonts/GeistMono-Regular.ttf) format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:GeistMono;src:url(../../assets/fonts/GeistMono-Bold.ttf) format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:Readex;src:url(../../assets/fonts/ReadexPro-Arabic-400.woff2) format('woff2');font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:Readex;src:url(../../assets/fonts/ReadexPro-Arabic-500.woff2) format('woff2');font-weight:500;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:Readex;src:url(../../assets/fonts/ReadexPro-Arabic-700.woff2) format('woff2');font-weight:700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
:root{--accent:#FF4D00;--accent-soft:#F1F6F4;--border:#7F979F;--muted:#4F6A73;--ink:#172B36;font-family:Instrument,Readex,'Segoe UI',sans-serif;color:var(--ink);background:#F1F6F4}
body{background:#F1F6F4;color:#172B36;font-family:Instrument,Readex,'Segoe UI',sans-serif}
h1,h2,h3,.brand{font-family:Bricolage,Readex,'Segoe UI',sans-serif}
.eyebrow,.header-label,.platform-badge,.step-label,.category-label,.count,.stage-label,.stage-bottom,.language-tag,.code-footer,.page-footer,.button,.text-button,.range-ends,.field-hint,.library-note,.status,.animation-caption span{font-family:GeistMono,Readex,monospace}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,pre:focus-visible{outline:2px solid #FF4D00;outline-offset:3px}
*:where(.button,.panel,.animation-tile,.count,.platform-badge,.preview-object,.object-outline,.brand-mark,.id-input,.code-panel,.code-empty,.code-heading,.code-footer,.help-callout,.toast,dialog,select,input,#manual-code,.tile-icon,.category-label>span,.status:before){border-radius:0!important}
.topbar{background:#172B36;color:#F1F6F4;border-bottom:1px solid #7F979F}
.topbar .brand{font-size:25px;letter-spacing:-.045em;color:#F1F6F4}
.brand-period{color:#FF4D00}
.header-label{color:#F1F6F4;text-decoration:none;border-left-color:#7F979F}
.header-label:hover{color:#FF4D00}
.topbar>.button{color:#F1F6F4;background:transparent;border-color:#7F979F}
.topbar>.button:hover{background:#FF4D00;border-color:#FF4D00;color:#172B36}
.site-section-nav{display:flex;align-items:center;gap:6px;margin-left:auto;min-width:0}
.site-section-nav a{display:grid;place-items:center;height:42px;color:#F1F6F4;text-decoration:none;font:700 14px GeistMono,Readex,monospace}
.site-section-nav .parent-link{display:flex;align-items:center;justify-content:center;gap:5px;padding:0 14px;border:1px solid #7F979F;font-size:11px;letter-spacing:.02em;white-space:nowrap}
.parent-short{display:none}
.site-section-nav .section-arrow{width:42px;flex:0 0 42px;border:1px solid #7F979F;font-size:21px}
.site-section-nav .section-close{background:#F1F6F4;border-color:#F1F6F4;color:#172B36}
.site-section-nav a:hover{background:#FF4D00;border-color:#FF4D00;color:#172B36}
.topbar>.button{margin-left:0}
.topbar>#help-button{padding-inline:14px;gap:9px}
.topbar>#help-button>span{flex:0 0 17px}
.subtle>span{border-color:currentColor}
main{max-width:1488px;padding-inline:clamp(18px,3.5vw,60px)}
.workspace-heading{margin:8px 0 24px}
.workspace-heading h1{font-size:clamp(30px,3.5vw,50px);line-height:1.05}
.workspace-subtitle{max-width:680px;margin:10px 0 0;color:#4F6A73;font-size:15px;line-height:1.45}
.workspace-heading .eyebrow{color:#B33600}
.platform-badge{background:#F1F6F4;border-color:#7F979F;color:#172B36}
.panel{background:#FFFFFF;border-color:#7F979F}
.panel-heading h2{font-size:17px}
.count{background:#172B36;color:#F1F6F4}
.animation-tile{border-color:#B3C9C2;color:#172B36;background:#FFFFFF}
.animation-tile:hover{border-color:#FF4D00;background:#F1F6F4}
.animation-tile[aria-pressed=true]{background:#FF4D00;color:#172B36;border-color:#172B36;box-shadow:none}
.animation-tile[aria-pressed=true] .tile-icon{color:#172B36}
.animation-tile[aria-pressed=true]:after{background:#172B36;color:#F1F6F4}
.tile-icon{color:#4F6A73}
.category-label,.library-note,.library-intro,.field-hint,.preview-note,.animation-caption span,.status,.page-footer,.range-ends{color:#4F6A73}
.stage{background-color:#172B36;background-image:linear-gradient(rgba(241,246,244,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(241,246,244,.08) 1px,transparent 1px);background-size:24px 24px;border-color:#7F979F}
.stage-label,.stage-bottom{color:#F1F6F4}
.object-outline{border-color:#7F979F}
.crosshair,.crosshair:after{background:#7F979F}
.preview-object{background:#FF4D00;color:#172B36;box-shadow:none}
.status:before{background:#7F979F}
.status[data-playing=true]:before{background:#FF4D00}
.button{border-color:#7F979F;background:#FFFFFF;color:#172B36}
.button:hover{background:#F1F6F4;border-color:#172B36}
.replay,.add-id-button,.copy-button{background:#FF4D00;border-color:#FF4D00;color:#172B36}
.replay:hover,.add-id-button:hover,.copy-button:hover{background:#172B36;border-color:#172B36;color:#F1F6F4}
.preview-loop{background:#172B36;border-color:#172B36;color:#F1F6F4}
.preview-loop:hover{background:#7F979F;border-color:#7F979F;color:#172B36}
.preview-loop[aria-pressed="true"]{background:#FF4D00;border-color:#172B36;color:#172B36;box-shadow:inset 0 0 0 2px #172B36}
.preview-loop[aria-pressed="true"]:hover{background:#FF4D00}
.preview-loop>span{font-size:20px;line-height:14px}
.id-actions .button:disabled,.copy-button:disabled{background:#E3EDE9;color:#4F6A73;border-color:#B3C9C2}
.settings input,.settings select,.id-input{border-color:#7F979F}
.settings input:focus,.settings select:focus,.id-input:focus-within{border-color:#FF4D00}
.text-button{color:#B33600}
.code-panel{background:#172B36;border-color:#172B36;color:#F1F6F4}
.code-heading,.code-footer{background:#172B36;color:#F1F6F4;border-color:#7F979F}
.code-heading h2,.code-empty strong{color:#F1F6F4}
.code-empty p,.code-footnote,.code-footer span{color:#B3C9C2}
.code-symbol{color:#FF4D00}
.language-tag{color:#F1F6F4;border-color:#7F979F}
pre{background:#172B36;color:#F1F6F4}
.code-footer .text-button,.code-footer .text-button:hover{color:#FF4D00}
.token-keyword{color:#FF4D00}.token-string{color:#F1F6F4}.token-comment{color:#7F979F}.token-number{color:#B3C9C2}
.help-callout{background:#F1F6F4;color:#172B36;border-left:4px solid #FF4D00}
.help-steps p,.help-source,.copy-help{color:#4F6A73}
.help-source a{color:#B33600}
dialog{border-color:#172B36;box-shadow:8px 8px 0 #7F979F}
dialog::backdrop{background:rgba(23,43,54,.75);backdrop-filter:none}
.toast{background:#172B36;color:#F1F6F4}
.page-footer{border-top:1px solid #7F979F;margin-top:24px;color:#4F6A73}
@media(max-width:950px){.studio{gap:12px}}
@media(max-width:640px){main{padding:22px 16px 0}.topbar{height:auto;min-height:68px;padding:12px 16px;flex-wrap:wrap;gap:10px}.topbar>.button{min-height:42px;margin-left:auto}.site-section-nav{order:3;width:100%;margin-left:0;justify-content:space-between}.site-section-nav .parent-link{flex:1;min-width:0;padding-inline:8px;overflow:hidden}.site-section-nav .section-arrow{width:40px;flex-basis:40px}.parent-full{display:none}.parent-short{display:inline}.workspace-heading{margin-bottom:22px}.library{height:340px}.stage{height:270px}.animation-grid{gap:6px}.animation-tile{min-height:58px}.settings{height:auto}.code-panel{height:290px}.page-footer{flex-wrap:wrap}}
@media(max-width:640px){
  .playback{flex-wrap:wrap}
  .transport{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 40px;gap:6px;width:100%}
  .transport .button{min-width:0;width:100%;padding-inline:5px;font-size:12px}
  .animation-caption{width:100%;flex-direction:row;align-items:center;justify-content:space-between}
  .library{height:clamp(360px,52vh,460px)}
  .library #animation-library{display:block;min-width:0;max-height:none;overflow-x:hidden;overflow-y:auto;padding:0 4px 8px 0}
  .library .category{margin-top:18px}
  .library .category:first-child{margin-top:0}
  .library .animation-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .library .animation-tile{min-width:0;min-height:52px;flex-direction:row;justify-content:flex-start;gap:6px;padding:7px;font-size:11px;line-height:1.2;text-align:left}
  .library .tile-icon{flex:0 0 20px;width:20px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* ===== V33: filters, several Object IDs, loop control, stop code ===== */
.library-tools{flex-shrink:0;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin:-8px 0 16px;min-width:0}
.search-field{min-width:0;display:flex;align-items:center;gap:8px;border:1px solid #7F979F;background:#FFFFFF;padding:0 10px;min-height:38px}
.search-field:focus-within{border-color:#FF4D00}
.search-field>span{color:#4F6A73;font-size:16px;line-height:1}
.search-field input{flex:1;width:100%;min-width:0;border:0;outline:0;background:transparent;padding:9px 0;font:14px Instrument,Readex,'Segoe UI',sans-serif;color:#172B36}
.search-field input::-webkit-search-cancel-button{cursor:pointer}
.filter-chips{display:flex;flex-wrap:wrap;gap:6px}
.filter-chip{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:4px 9px;border:1px solid #B3C9C2;background:#FFFFFF;color:#172B36;font:700 11px GeistMono,Readex,monospace;letter-spacing:.02em;cursor:pointer}
.filter-chip span{color:#4F6A73;font-weight:400}
.filter-chip:hover{border-color:#172B36}
.filter-chip[aria-pressed="true"]{background:#172B36;border-color:#172B36;color:#F1F6F4}
.filter-chip[aria-pressed="true"] span{color:#FF4D00}
#animation-library{scrollbar-width:auto;scrollbar-color:#172B36 #E3EDE9;padding-right:8px}
#animation-library::-webkit-scrollbar{width:8px}
#animation-library::-webkit-scrollbar-track{background:#E3EDE9}
#animation-library::-webkit-scrollbar-thumb{background:#172B36}
#animation-library::-webkit-scrollbar-thumb:hover{background:#FF4D00}
.library-empty{flex-shrink:0;margin:10px 0 0;font:12px GeistMono,Readex,monospace;color:#4F6A73}
.id-count{float:right;font:12px GeistMono,Readex,monospace;color:#4F6A73}
.id-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:4px;max-height:148px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#172B36 #E3EDE9}
.id-chip{display:grid;grid-template-columns:auto minmax(0,1fr) 28px;align-items:center;gap:8px;min-height:32px;padding:0 0 0 9px;border:1px solid #B3C9C2;background:#F1F6F4}
.id-chip-index{font:11px GeistMono,Readex,monospace;color:#4F6A73}
.id-chip code{font:12px GeistMono,Readex,monospace;color:#172B36;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.id-remove{height:30px;border:0;border-left:1px solid #B3C9C2;background:transparent;color:#172B36;font-size:17px;line-height:1;cursor:pointer}
.id-remove:hover{background:#FF4D00}
.loop-fields{margin-top:26px;padding-top:18px;border-top:1px solid #B3C9C2}
.loop-heading{display:flex;align-items:center;gap:8px;font:700 12px GeistMono,Readex,monospace;letter-spacing:.08em;text-transform:uppercase}
.loop-heading:before{content:'';width:8px;height:8px;background:#FF4D00}
.loop-hint{margin:6px 0 0;font:12px/1.5 GeistMono,Readex,monospace;color:#4F6A73}
.loop-fields .range-field{margin-top:18px}
.loop-fields .select-field{margin-top:18px}
.loop-fields.is-off .range-field,.loop-fields.is-off .select-field{opacity:.45}
.loop-fields select:disabled,.loop-fields input:disabled{cursor:not-allowed}
.stop-panel{background:#172B36;color:#F1F6F4;border:1px solid #172B36;display:flex;flex-direction:column;min-width:0;overflow:hidden}
.stop-panel .code-symbol{font-size:12px}
.stop-body{display:flex;flex-direction:column;min-height:0;flex:1}
.stop-lede{margin:0;padding:12px 15px 0;font:12px GeistMono,Readex,monospace;color:#B3C9C2;flex-shrink:0}
.stop-modes{padding:10px 15px 12px;border-bottom:1px solid #7F979F;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;flex-shrink:0}
.stop-mode{position:relative;display:block;cursor:pointer;min-width:0}
.stop-mode input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.stop-mode span{display:block;height:100%;padding:7px 10px;border:1px solid #4F6A73;font-size:12px;line-height:1.35;color:#B3C9C2}
.stop-mode strong{display:block;margin-bottom:2px;color:#F1F6F4;font:700 12px GeistMono,Readex,monospace}
.stop-mode:hover span{border-color:#F1F6F4}
.stop-mode input:checked+span{border-color:#FF4D00;box-shadow:inset 3px 0 0 #FF4D00;background:#1D3542}
.stop-mode input:focus-visible+span{outline:2px solid #FF4D00;outline-offset:2px}
.stop-code-wrap{flex:1;min-height:0;display:flex;flex-direction:column}
.stop-code-wrap pre,.stop-code-wrap .code-empty{flex:1;min-height:0;height:auto}
@media(min-width:951px){
  .studio{grid-template-rows:560px 260px 330px}
  .library{grid-row:1/4;height:auto;align-self:stretch;contain:size}
  .settings{grid-row:1/4;min-height:0;height:auto;align-self:stretch;overflow-y:auto}
  .stop-panel{grid-column:2;grid-row:3;height:330px}
}
@media(min-width:641px) and (max-width:950px){
  .studio{grid-template-rows:min-content 260px 360px auto}
  .library{grid-row:1/5;align-self:stretch;height:auto;contain:size}
  .stop-panel{grid-column:2;grid-row:3;height:360px}
  .settings{grid-row:4}
}
@media(max-width:1150px){.stop-mode span{font-size:11px}.stop-mode strong{font-size:11px}}
@media(max-width:640px){
  .stop-panel{order:3;height:auto}
  .stop-code-wrap pre{height:220px;flex:none}
  .settings{order:4}
  .library{height:clamp(420px,62vh,540px)}
  .filter-chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
  .filter-chip{flex:0 0 auto}
  .loop-fields{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;column-gap:18px;margin-top:6px}
  .loop-fields .loop-heading,.loop-fields .loop-hint{grid-column:1/-1}
  .stop-modes{grid-template-columns:1fr}
  .stop-mode span{display:flex;gap:8px;align-items:baseline}
  .stop-mode strong{margin:0;flex-shrink:0}
}

/* V53 · language link in the header */
.site-section-nav .lang-link{padding:0 10px;font:700 13px Instrument,Readex,'Segoe UI',sans-serif;text-decoration:underline;text-decoration-color:#FF4D00;text-decoration-thickness:2px;text-underline-offset:6px;white-space:nowrap}
.site-section-nav .lang-link:hover{background:transparent;color:#FF4D00}