/* Minimal layout (UI 03). Same engine and controls, presented as one quiet screen.
   Sizes follow the 1920 x 1080 Figma frame through --u (1px at 1920 wide). */
#minimal{display:none}
html[data-ui-layout=minimal]{--u:clamp(.66px,.0521vw,1px);--m-ease:cubic-bezier(.22,.61,.36,1);--m-grey:var(--muted);--m-track:var(--panel)}
html[data-ui-layout=minimal],html[data-ui-layout=minimal] body{height:100%;overflow:hidden;background:var(--paper)}
html[data-ui-layout=minimal] body{font-family:'Instrument Sans',sans-serif;color:var(--m-accent);transition:background-color .5s var(--m-ease)}
html[data-ui-layout=minimal] #app,html[data-ui-layout=minimal] .studio-head,html[data-ui-layout=minimal] #glyphLens{display:none!important}
html[data-ui-layout=minimal] #minimal{display:grid;position:fixed;inset:0;z-index:5;grid-template-rows:auto minmax(0,1fr) auto auto;grid-template-columns:minmax(0,1fr);overflow:hidden;background:var(--paper);color:var(--m-accent);font-weight:700;letter-spacing:0}
.faucet-loading #minimal{visibility:hidden}
#minimal *{box-sizing:border-box}
#minimal button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;letter-spacing:0;text-transform:none}
#minimal :focus-visible{outline:2px solid var(--m-accent);outline-offset:3px}
#minimal .m-accent,#minimal .m-accent-fill{transition:color .45s var(--m-ease),background-color .45s var(--m-ease),fill .45s var(--m-ease)}

/* Header */
.m-head{position:relative;display:flex;align-items:flex-start;justify-content:space-between;padding:calc(6*var(--u)) calc(28*var(--u)) 0 calc(10*var(--u));min-height:calc(86*var(--u))}
.m-brand{font-size:calc(21.6*var(--u));line-height:.952;text-transform:uppercase;color:var(--m-accent);text-decoration:none;transition:color .45s var(--m-ease)}
.m-mark{position:absolute;left:50%;top:calc(23*var(--u));width:calc(87*var(--u));height:calc(28*var(--u));transform:translateX(-50%)}
.m-mark svg{display:block;width:100%;height:100%}.m-mark path{fill:var(--m-accent);transition:fill .45s var(--m-ease)}
.m-actions{display:flex;align-items:center;gap:calc(12*var(--u));padding-top:calc(15*var(--u))}
#minimal .m-round{position:relative;width:calc(44*var(--u));height:calc(44*var(--u));border-radius:50%;background:var(--m-track);transition:background-color .45s var(--m-ease),transform .25s var(--m-ease)}
#minimal .m-round:active{transform:scale(.94)}
#minimal .m-round i{position:absolute;left:50%;top:50%;width:calc(18*var(--u));height:calc(18*var(--u));margin:calc(-9*var(--u)) 0 0 calc(-9*var(--u));border-radius:50%;transition:background-color .45s var(--m-ease),transform .45s var(--m-ease)}
#minimal .m-theme i{background:#fff}
html[data-theme=dark] #minimal .m-theme i{background:#0e0e0f;box-shadow:inset 0 0 0 calc(2*var(--u)) #fff}
#minimal .m-colour i{background:var(--m-accent)}
#minimal .m-cart{height:calc(42*var(--u));padding:0 calc(40*var(--u));border-radius:calc(73*var(--u));background:var(--m-accent);color:var(--m-on-accent);font-size:calc(14.27*var(--u));line-height:1;text-transform:uppercase;transition:background-color .45s var(--m-ease),color .45s var(--m-ease),transform .25s var(--m-ease)}
#minimal .m-cart:active{transform:scale(.97)}

/* Middle: sidebar and the scrolling proof */
.m-body{position:relative;min-height:0}
.m-nav{position:absolute;z-index:2;left:calc(21*var(--u));top:50%;transform:translateY(-58%);display:flex;flex-direction:column;gap:calc(13.6*var(--u))}
#minimal .m-nav button{display:block;text-align:left;font-size:calc(14.27*var(--u));line-height:.952;text-transform:uppercase;color:var(--m-grey);transition:color .55s var(--m-ease),transform .55s var(--m-ease)}
#minimal .m-nav button:hover{color:color-mix(in srgb,var(--m-accent) 55%,var(--m-grey))}
#minimal .m-nav button[aria-current=true]{color:var(--m-accent);transform:translateX(calc(3*var(--u)))}
.m-scroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 calc(28*var(--u)),#000 calc(100% - 90*var(--u)),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 calc(28*var(--u)),#000 calc(100% - 90*var(--u)),transparent 100%)}
.m-scroll::-webkit-scrollbar{display:none}
@media (prefers-reduced-motion:reduce){.m-scroll{scroll-behavior:auto}}
.m-section{padding:0 calc(160*var(--u)) 0 calc(170*var(--u));scroll-margin-top:0}
.m-section+.m-section{padding-top:calc(90*var(--u))}
.m-section:last-child{padding-bottom:calc(140*var(--u))}
.m-label{font-size:calc(14.27*var(--u));text-transform:uppercase;color:var(--m-grey);margin:0 0 calc(26*var(--u))}

/* Build font: type straight onto the rendered font */
.m-build{position:relative;min-height:100%;display:grid;place-items:center}
.m-type{position:relative;width:min(100%,calc(1180*var(--u)));cursor:text}
#minimal #stage{display:flex;justify-content:center;align-items:center;min-height:calc(160*var(--u));margin:0;padding:0;background:none;border:0;overflow:visible}
#minimal #stage svg{display:block;width:100%!important;height:auto!important;max-width:100%!important;max-height:38vh;overflow:visible}
#minimal #stage svg .g,#minimal #waterfall svg .g,#minimal .example-render svg .g,#minimal .number-pair svg .g{fill:var(--m-accent);transition:fill .45s var(--m-ease)}
#minimal #previewText{position:absolute;inset:0;width:100%;height:100%;opacity:0;resize:none;border:0;padding:0;margin:0;font-size:16px;z-index:-1;pointer-events:none}
.m-type{touch-action:none;user-select:none;-webkit-user-select:none}
/* Typewriter caret and selection live inside the stage SVG, in font units */
#minimal .m-caret-line{fill:var(--m-grey);animation:m-blink 1.2s steps(1,end) infinite}
#minimal .m-caret-line.is-on{fill:var(--m-accent);animation-duration:1.05s}
#minimal .m-sel{fill:var(--m-accent);transition:fill .45s var(--m-ease)}
#minimal .m-sel-glyphs{fill:var(--paper)}
@keyframes m-blink{0%,55%{opacity:1}56%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){#minimal .m-caret-line{animation:none}}
.m-hint{position:absolute;left:50%;bottom:calc(30*var(--u));transform:translateX(-50%);font-size:calc(12*var(--u));text-transform:uppercase;color:var(--m-grey);opacity:.9;transition:opacity .4s var(--m-ease);white-space:nowrap}
.m-build:has(.m-type.is-typing) .m-hint{opacity:0}
#minimal #setChips{position:absolute;left:0;right:0;bottom:calc(64*var(--u));display:flex;justify-content:center;gap:8px;margin:0!important}

/* Size test */
#minimal #waterfall{padding:0;margin:0;background:none;border:0}
#minimal .wf-row{display:flex;align-items:center;gap:calc(28*var(--u));padding:calc(16*var(--u)) 0;border:0;border-bottom:1px solid var(--line);overflow:hidden}
#minimal .wf-row .sz{flex:0 0 calc(40*var(--u));font-size:calc(14.27*var(--u));color:var(--m-grey);font-weight:700}

/* Examples */
#minimal .examples-section{margin:0;padding:0;background:none;border:0;box-shadow:none}
#minimal .examples-section>.sectionhead{display:none}
#minimal .example-controls{padding:0 0 calc(18*var(--u));gap:calc(28*var(--u));color:var(--m-accent)}
#minimal .example-grid{padding:0;gap:calc(19*var(--u))}
#minimal .example-card{background:var(--paper-2);border:0;border-radius:calc(18.2*var(--u));padding:22px;color:var(--m-accent);box-shadow:none}
html[data-theme=dark] #minimal .example-card{background:#000}
#minimal .example-kicker,#minimal .example-caption{color:var(--m-grey);text-transform:uppercase;font-weight:700}

/* Glyph set */
.m-glyphs{display:grid;grid-template-columns:minmax(0,707fr) minmax(0,901fr);gap:calc(26*var(--u));align-items:start}
.m-glyph-side{position:sticky;top:calc(20*var(--u))}
/* Glyph set heading shares the UPPERCASE heading's line; the card shares the first tile row's top */
#minimal .m-glyph-label,#minimal .cm-sec-h{font-size:calc(14.27*var(--u));line-height:1;height:calc(14.27*var(--u));margin:0 0 calc(12*var(--u));padding:0}
.m-glyph-card{position:relative;aspect-ratio:707/571;border-radius:calc(18.2*var(--u));background:var(--paper-2);display:grid;place-items:center;overflow:hidden;transition:background-color .45s var(--m-ease)}
.m-glyph-card .m-glyph-art{position:absolute;inset:19%}
.m-glyph-card svg{width:100%;height:100%;overflow:visible}
.m-glyph-card svg .g{fill:none;stroke:var(--m-accent);stroke-width:1.4px;vector-effect:non-scaling-stroke;transition:stroke .45s var(--m-ease)}
.m-glyph-meta{position:absolute;left:22px;right:22px;bottom:22px;display:flex;justify-content:space-between;font-size:calc(14.27*var(--u));color:var(--m-grey);text-transform:uppercase}
#minimal #charmap{padding:0;margin:0;background:none;border:0}
#minimal .cm-sec{margin:0 0 calc(30*var(--u))}
#minimal .cm-sec-h{text-transform:uppercase;color:var(--m-grey);font-weight:700;letter-spacing:0;border:0}
#minimal .cm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(118*var(--u)),1fr));gap:calc(15*var(--u)) calc(19*var(--u));border:0;background:none}
#minimal .cm{position:relative;aspect-ratio:134/99;width:auto;height:auto;border:0!important;outline-offset:2px;border-radius:calc(10.4*var(--u));background:var(--paper-2);box-shadow:none;margin:0;padding:0;transition:background-color .35s var(--m-ease),transform .35s var(--m-ease)}
#minimal .cm>span{display:none}
#minimal .cm .hold{position:absolute;inset:20% 16%;display:block;width:auto;height:auto;margin:0;padding:0}
.cm .m-code{display:none}
#minimal .cm .m-code{display:block;position:absolute;left:calc(10*var(--u));bottom:calc(8*var(--u));font-style:normal;font-weight:700;font-size:calc(10*var(--u));line-height:1;color:var(--m-grey);pointer-events:none}
#minimal .cm .hold svg{width:100%;height:100%}
#minimal .cm .hold svg .g{fill:var(--m-accent);transition:fill .45s var(--m-ease)}
#minimal .cm:hover{transform:translateY(calc(-2*var(--u)))}
#minimal .cm.is-lens{box-shadow:inset 0 0 0 1.5px var(--m-accent)!important}

/* Controller dock */
.m-dock{position:relative;min-width:0;background:var(--paper)}
.m-tabs{display:flex;gap:calc(58*var(--u));overflow-x:auto;scrollbar-width:none;padding:calc(12*var(--u)) calc(39*var(--u)) calc(9*var(--u));border-bottom:1px solid var(--line)}
.m-tabs::-webkit-scrollbar{display:none}
#minimal .m-tab{flex:none;font-size:calc(22.1*var(--u));line-height:.952;text-transform:uppercase;color:var(--m-grey);white-space:nowrap;transition:color .5s var(--m-ease)}
#minimal .m-tab:hover{color:color-mix(in srgb,var(--m-accent) 50%,var(--m-grey))}
#minimal .m-tab[aria-selected=true]{color:var(--m-accent)}
.m-strip-wrap{position:relative;border-bottom:1px solid var(--line)}
.m-strip{display:flex;align-items:center;gap:calc(34*var(--u));height:calc(89*var(--u));padding:0 calc(39*var(--u));overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain}
.m-strip::-webkit-scrollbar{display:none}
.m-strip-wrap::before,.m-strip-wrap::after{content:"";position:absolute;top:0;bottom:0;width:calc(70*var(--u));pointer-events:none;opacity:0;transition:opacity .3s var(--m-ease);z-index:1}
.m-strip-wrap::before{left:0;background:linear-gradient(to right,var(--paper),transparent)}
.m-strip-wrap::after{right:0;background:linear-gradient(to left,var(--paper),transparent)}
.m-strip-wrap.more-left::before,.m-strip-wrap.more-right::after{opacity:1}
.m-strip.is-switching{opacity:0;transform:translateY(calc(6*var(--u)))}
.m-strip{transition:opacity .28s var(--m-ease),transform .28s var(--m-ease)}

/* Grid selector: dot field + draggable numbers */
.m-grid{flex:none;display:flex;align-items:center;gap:calc(26*var(--u));margin-right:calc(8*var(--u))}
.m-dots{display:block;width:calc(95*var(--u));height:calc(59*var(--u))}
.m-dots circle{fill:var(--m-accent);transition:fill .45s var(--m-ease)}
.m-grid-num{display:flex;align-items:baseline;font-size:calc(42.7*var(--u));line-height:1;text-transform:uppercase;user-select:none;-webkit-user-select:none}
.m-grid-num .m-x{margin:0 calc(2*var(--u))}
.m-drag{position:relative;cursor:ew-resize;touch-action:none;border-radius:6px;transition:color .3s var(--m-ease)}
.m-drag::after{content:"";position:absolute;left:-4px;right:-4px;bottom:-6px;height:2px;border-radius:2px;background:currentColor;opacity:0;transform:scaleX(.4);transition:opacity .3s var(--m-ease),transform .3s var(--m-ease)}
.m-drag:hover::after,.m-drag:focus-visible::after,.m-drag.is-dragging::after{opacity:.35;transform:none}
html.m-dragging,html.m-dragging *{cursor:ew-resize!important;user-select:none!important}
html.m-sliding,html.m-sliding *{cursor:grabbing!important;user-select:none!important}

/* Controllers */
.m-ctl{flex:none;display:flex;align-items:center;gap:calc(10*var(--u))}
.m-ctl.is-sleeping{opacity:.35}
.m-ctl.is-sleeping .m-pill{pointer-events:none}
.m-pill{position:relative;isolation:isolate;flex:none;width:calc(307*var(--u));height:calc(34*var(--u));border-radius:calc(148*var(--u));background:var(--m-track);overflow:hidden;cursor:grab;touch-action:none;transition:background-color .45s var(--m-ease)}
.m-pill-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--m-accent);border-radius:calc(148*var(--u)) 0 0 calc(148*var(--u));transition:background-color .45s var(--m-ease),width .22s var(--m-ease)}
.m-pill.is-live .m-pill-fill{transition:background-color .45s var(--m-ease)}
.m-pill-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:calc(17.9*var(--u));line-height:1;text-transform:uppercase;color:var(--m-diff);mix-blend-mode:difference;white-space:nowrap;pointer-events:none}
#minimal .m-val{flex:none;min-width:calc(46*var(--u));font-size:calc(17.9*var(--u));line-height:1;color:var(--m-accent);text-align:left;font-variant-numeric:tabular-nums;transition:color .45s var(--m-ease),opacity .2s}
#minimal .m-val:hover{opacity:.6}
#minimal .m-tool{flex:none;height:calc(34*var(--u));padding:0 calc(14*var(--u));border-radius:calc(148*var(--u));background:var(--m-track);color:var(--m-accent);font-size:calc(13*var(--u));text-transform:uppercase;white-space:nowrap;display:flex;align-items:center;gap:calc(6*var(--u));transition:background-color .35s var(--m-ease),color .35s var(--m-ease)}
#minimal .m-tool svg{width:calc(18*var(--u));height:calc(18*var(--u));fill:none;stroke:currentColor;stroke-width:1.6}
#minimal .m-tool[aria-pressed=true]{background:var(--m-accent);color:var(--m-on-accent)}
.m-seg{flex:none;display:flex;align-items:center;height:calc(34*var(--u));border-radius:calc(148*var(--u));background:var(--m-track);padding:calc(3*var(--u));gap:calc(2*var(--u));transition:background-color .45s var(--m-ease)}
#minimal .m-seg button{height:100%;padding:0 calc(16*var(--u));border-radius:calc(148*var(--u));font-size:calc(14.27*var(--u));text-transform:uppercase;white-space:nowrap;color:var(--m-accent);transition:background-color .35s var(--m-ease),color .35s var(--m-ease)}
#minimal .m-seg button[aria-pressed=true]{background:var(--m-accent);color:var(--m-on-accent)}
#minimal .m-seg button:disabled{opacity:.35;cursor:default}
.m-seg-label{flex:none;font-size:calc(14.27*var(--u));text-transform:uppercase;color:var(--m-grey);margin-right:calc(-22*var(--u))}

/* History row and footer */
.m-history{display:flex;justify-content:center;gap:calc(24*var(--u));padding:calc(16*var(--u)) 0 calc(16*var(--u))}
#minimal .m-history button{font-size:calc(22.1*var(--u));line-height:.952;text-transform:uppercase;color:var(--m-accent);transition:color .45s var(--m-ease),opacity .3s var(--m-ease)}
#minimal .m-history button:disabled{opacity:.3;cursor:default}
#minimal .m-history button:not(:disabled):hover{opacity:.6}
.m-foot{display:flex;align-items:center;justify-content:space-between;height:calc(38*var(--u));padding:0 calc(20*var(--u)) 0 calc(19*var(--u));background:var(--m-accent);color:var(--m-on-accent);font-size:calc(17.9*var(--u));text-transform:uppercase;transition:background-color .45s var(--m-ease),color .45s var(--m-ease)}
.m-foot a,.m-foot button{color:inherit!important;text-decoration:none}
.m-foot nav{display:flex;gap:calc(30*var(--u));align-items:center;margin-left:auto}
.m-foot a:hover,.m-foot button:hover{opacity:.7}

/* Interface switcher sits in the footer while Minimal is on */
html[data-ui-layout=minimal] .appearance-switcher{position:fixed;left:calc(19*var(--u));right:auto;bottom:0;z-index:30;filter:none;color:var(--m-on-accent)}
html[data-ui-layout=minimal] .appearance-switcher>summary{height:calc(38*var(--u));padding:0;border:0;background:none;border-radius:0;font-size:calc(17.9*var(--u));font-weight:700;text-transform:uppercase;gap:6px;color:inherit}
html[data-ui-layout=minimal] .appearance-switcher>summary .switcher-aa,html[data-ui-layout=minimal] .appearance-switcher>summary .ui-icon{display:none}
html[data-ui-layout=minimal] .appearance-panel{bottom:calc(46*var(--u));left:0;right:auto;color:var(--m-accent);border-radius:calc(20*var(--u))}
html[data-ui-layout=minimal] .appearance-panel button[aria-pressed=true]{color:var(--m-on-accent);background:var(--m-accent)}

/* Narrow screens: the sidebar folds away, the dock keeps scrolling sideways */
@media (max-width:850px){
  html[data-ui-layout=minimal]{--u:.62px}
  .m-nav{display:none}
  .m-section{padding-left:18px;padding-right:18px}
  .m-glyphs{grid-template-columns:1fr}
  .m-glyph-card{position:relative;top:0}
  .m-mark{display:none}
}

/* Local working-copy badge (localhost only) moves clear of the footer */
html[data-ui-layout=minimal] #faucet-local-version{left:auto!important;right:8px!important;bottom:calc(48*var(--u))!important}