:root{
  --paper:#ece7d9;
  --paper-2:#ddd6c5;
  --ink:#11110f;
  --soft-ink:#2b2a25;
  --muted:#625d53;
  --line:#b8b09f;
  --acid:#d9ff54;
  --orange:#ff6138;
  --blue:#2b59ff;
  --header:64px;
  --inspector:326px;
  --ui-caption:10px;
  --ui-label:11px;
  --ui-body:12px;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--ink);color:var(--ink);font-family:"Courier New",Courier,monospace}
body{
  background:
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px) 0 0/24px 24px,
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px) 0 0/24px 24px,
    #11110f;
}
button,input,select{font:inherit}
button{
  border:1px solid currentColor;
  background:transparent;
  color:inherit;
  padding:7px 10px;
  border-radius:0;
  cursor:pointer;
  white-space:nowrap;
  text-transform:uppercase;
  letter-spacing:.045em;
  font-size:11px;
  transition:transform .12s ease,background .12s ease,color .12s ease;
}
button:hover{transform:translate(-2px,-2px);box-shadow:2px 2px 0 currentColor}
button:active{transform:none;box-shadow:none}
button.primary{background:var(--acid);color:var(--ink);border-color:var(--ink);font-weight:900}
button.active{background:var(--orange);color:var(--ink)}
.app{width:100%;height:100dvh;display:grid;grid-template-rows:var(--header) minmax(0,1fr);overflow:hidden}

.toolbar{
  height:var(--header);
  display:flex;
  align-items:stretch;
  gap:0;
  border-bottom:2px solid var(--ink);
  background:var(--paper);
  z-index:30;
  box-shadow:0 2px 0 #000;
}
.brand-lockup{
  width:230px;
  min-width:230px;
  padding:8px 13px 6px;
  border-right:2px solid var(--ink);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.brand{
  font-family:Arial,Helvetica,sans-serif;
  font-size:23px;
  line-height:.9;
  font-weight:1000;
  letter-spacing:-.065em;
}
.brand span{color:var(--orange);padding:0 2px}
.brand-meta{
  margin-top:5px;
  font-size:8px;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.13em;
  color:var(--muted);
}
.brand-meta b{color:var(--blue);font-size:11px;margin-left:6px}
.formula-strip{
  width:188px;
  min-width:188px;
  border-right:1px solid var(--ink);
  display:grid;
  grid-template-columns:1fr 16px 1fr;
  align-items:center;
  padding:0 9px;
  font-size:8px;
  letter-spacing:.03em;
  color:var(--soft-ink);
}
.formula-strip i{
  width:1px;height:22px;background:var(--ink);
  transform:rotate(32deg);justify-self:center
}
.seed{
  min-width:210px;
  display:grid;
  grid-template-columns:auto 1fr 31px;
  align-items:center;
  gap:6px;
  padding:7px 9px;
  border-right:1px solid var(--ink);
}
.toolbar-label{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-size:7px;
  letter-spacing:.16em;
  color:var(--muted)
}
.seed input{
  min-width:0;
  width:100%;
  background:#fffaf0;
  border:1px solid var(--ink);
  color:var(--ink);
  padding:7px 8px;
  border-radius:0;
  outline:none;
  font-size:11px;
}
.seed input:focus{box-shadow:inset 0 -3px 0 var(--acid)}
.icon-btn{
  width:31px;height:31px;padding:0;display:grid;place-items:center;
  font-size:17px;line-height:1
}
.actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:5px;
  padding:7px 9px;
  min-width:0;
}
.actions button{font-size:9px;padding:7px 8px}
.actions .gallery-nav{
  border:1px solid var(--ink);
  color:var(--ink);
  padding:7px 8px;
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.045em;
  font-size:9px;
  white-space:nowrap;
}
.actions .gallery-nav:hover{background:var(--blue);color:#fff}

main{
  min-height:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) var(--inspector);
  transition:grid-template-columns .2s ease;
}
.app.inspector-closed main{grid-template-columns:minmax(0,1fr) 0}

.stage{
  position:relative;
  min-width:0;
  min-height:0;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:
    linear-gradient(115deg,transparent 0 63%,rgba(217,255,84,.035) 63% 63.15%,transparent 63.15%),
    linear-gradient(25deg,transparent 0 37.5%,rgba(255,97,56,.035) 37.5% 37.65%,transparent 37.65%),
    #131310;
}
.stage:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.16;
  background-image:
    radial-gradient(circle at 15% 25%,#fff 0 .55px,transparent .7px),
    radial-gradient(circle at 70% 65%,#fff 0 .5px,transparent .65px);
  background-size:19px 21px,27px 25px;
  mix-blend-mode:screen;
}
.stage-index{
  position:absolute;
  left:13px;
  top:13px;
  z-index:2;
  display:flex;
  align-items:flex-start;
  gap:9px;
  color:var(--paper);
  pointer-events:none
}
.stage-index span{
  background:var(--orange);
  color:var(--ink);
  width:25px;height:25px;
  display:grid;place-items:center;
  font:bold 9px Arial,sans-serif
}
.stage-index strong{
  font:700 8px/1.35 "Courier New",monospace;
  letter-spacing:.11em
}
.phi-watermark{
  position:absolute;
  left:-12px;
  bottom:0;
  color:#fff;
  opacity:.025;
  font:900 min(42vw,520px)/.7 Georgia,serif;
  pointer-events:none;
  user-select:none;
}
.canvas-shell{
  width:100%;height:100%;
  padding:38px 34px 42px;
  display:grid;place-items:center;
  min-width:0;min-height:0;
  z-index:1;
}
.app.orientation-portrait{--canvas-ratio:.7142857143;--canvas-aspect:5/7;--canvas-mobile-preview-aspect:5/7}
.canvas-wrap{
  position:relative;
  aspect-ratio:var(--canvas-aspect,7/5);
  width:min(calc(100% - 2px),calc((100dvh - var(--header) - 88px)*var(--canvas-ratio,1.4)));
  max-height:calc(100dvh - var(--header) - 88px);
  background:#f5f0e6;
  box-shadow:14px 14px 0 rgba(0,0,0,.38),0 28px 80px #0008;
}
.canvas-wrap:before{
  content:"";
  position:absolute;
  inset:-9px;
  border:1px solid rgba(236,231,217,.28);
  pointer-events:none
}
canvas{display:block;width:100%;height:100%;background:#f5f0e6}
.registration{
  position:absolute;
  width:18px;height:18px;
  z-index:3;
  pointer-events:none
}
.registration:before,.registration:after{
  content:"";
  position:absolute;
  background:var(--acid)
}
.registration:before{width:18px;height:1px;top:8px;left:0}
.registration:after{height:18px;width:1px;left:8px;top:0}
.reg-tl{left:-25px;top:-25px}.reg-tr{right:-25px;top:-25px}
.reg-bl{left:-25px;bottom:-25px}.reg-br{right:-25px;bottom:-25px}
.stats{
  position:absolute;
  left:0;
  bottom:-27px;
  color:#cfc9bd;
  font-size:8px;
  line-height:1;
  letter-spacing:.08em;
  text-transform:uppercase;
  background:transparent;
}
.stage-footer{
  position:absolute;
  left:13px;right:13px;bottom:10px;
  display:flex;
  justify-content:space-between;
  color:#777268;
  font-size:7px;
  letter-spacing:.11em;
  pointer-events:none
}
.inspector-toggle{
  display:none;
  position:absolute;
  right:13px;
  top:13px;
  z-index:10;
  border-color:var(--acid);
  color:var(--acid);
  background:#11110fe8;
  gap:12px;
  align-items:center;
  padding:8px 10px;
  backdrop-filter:blur(5px)
}
.inspector-toggle b{font-size:16px;line-height:.7}
.app.inspector-closed .inspector-toggle{display:flex}

.inspector{
  width:var(--inspector);
  min-width:0;
  min-height:0;
  border-left:2px solid var(--ink);
  background:var(--paper);
  color:var(--ink);
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr);
  overflow:hidden;
  transition:opacity .16s ease,transform .2s ease;
  position:relative;
}
.inspector:before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.2;
  pointer-events:none;
  background-image:radial-gradient(#655f53 .42px,transparent .55px);
  background-size:11px 11px;
}
.app.inspector-closed .inspector{opacity:0;transform:translateX(100%);pointer-events:none}
.drawer-handle{display:none}
.inspector-head{
  min-height:61px;
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 10px;
  border-bottom:2px solid var(--ink);
  background:rgba(236,231,217,.91)
}
.inspector-head>div{
  display:flex;
  align-items:center;
  gap:9px
}
.panel-number{
  width:28px;height:28px;
  display:grid;place-items:center;
  background:var(--blue);
  color:#fff;
  font:bold 9px Arial,sans-serif
}
.inspector-head>div>div{display:grid;gap:2px}
.inspector-head strong{
  font:bold 11px Arial,Helvetica,sans-serif;
  letter-spacing:.12em
}
.inspector-head span:not(.panel-number){
  font-size:7px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.08em
}
.close-btn{font-size:18px;border:0;background:transparent}

.tabs{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  border-bottom:2px solid var(--ink);
  background:var(--paper-2)
}
.tab{
  min-width:0;
  min-height:48px;
  border:0;
  border-right:1px solid var(--ink);
  padding:6px 2px 5px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:3px;
  font-size:7px;
  line-height:1;
  color:var(--ink);
  background:transparent;
  box-shadow:none!important;
  transform:none!important
}
.tab:last-child{border-right:0}
.tab span{
  display:block;
  color:var(--muted);
  font-size:6px;
  letter-spacing:.08em
}
.tab:hover{background:#fff8e9}
.tab.active{
  color:var(--ink);
  background:var(--acid);
  font-weight:900
}
.tab.active span{color:var(--ink)}
.tab-body{position:relative;z-index:1;min-height:0;overflow:hidden}
.tab-panel{
  display:none;
  height:100%;
  overflow-y:auto;
  padding:13px 13px 18px;
  scrollbar-width:thin;
  scrollbar-color:var(--ink) transparent
}
.tab-panel.active{display:block}
.section-title{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:8px;
  border-bottom:1px solid var(--ink);
  padding:0 0 7px;
  margin:0 0 13px
}
.section-title span{
  font:bold 10px Arial,Helvetica,sans-serif;
  letter-spacing:.12em
}
.section-title b{
  font:italic 12px Georgia,serif;
  color:var(--orange)
}

.controls{display:grid;gap:12px}
.control{
  display:grid;
  grid-template-columns:1fr auto;
  gap:5px 8px;
  align-items:center
}
.control label{
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.055em;
  color:var(--soft-ink)
}
.control output{
  font:700 9px "Courier New",monospace;
  color:var(--blue);
  min-width:28px;
  text-align:right
}
.control-label{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0
}
.control-help{
  flex:0 0 24px;
  width:24px;
  height:24px;
  padding:0;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  color:var(--soft-ink);
  background:var(--paper);
  font:700 11px/1 "Courier New",monospace;
  letter-spacing:0;
  border-radius:50%
}
.control-help:hover{
  color:var(--ink);
  background:var(--acid);
  transform:none;
  box-shadow:none
}
.control-help:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:2px
}
.control-hint{
  position:fixed;
  z-index:100;
  width:min(280px,calc(100vw - 24px));
  max-height:calc(100dvh - 24px);
  overflow:auto;
  padding:11px 13px;
  border:1px solid var(--ink);
  border-left:4px solid var(--blue);
  background:var(--paper);
  color:var(--ink);
  box-shadow:3px 3px 0 rgba(17,17,15,.2);
  font:12px/1.5 Arial,Helvetica,sans-serif;
  overflow-wrap:break-word
}
.control-hint[hidden]{display:none}
.control input[type=range]{
  grid-column:1/-1;
  width:100%;
  height:15px;
  margin:0;
  appearance:none;
  background:transparent
}
.control input[type=range]::-webkit-slider-runnable-track{
  height:2px;background:var(--ink)
}
.control input[type=range]::-webkit-slider-thumb{
  appearance:none;
  width:10px;height:15px;
  margin-top:-6px;
  border:1px solid var(--ink);
  border-radius:0;
  background:var(--acid)
}
.control input[type=range]::-moz-range-track{height:2px;background:var(--ink)}
.control input[type=range]::-moz-range-thumb{
  width:10px;height:15px;border:1px solid var(--ink);border-radius:0;background:var(--acid)
}
.control select{
  grid-column:1/-1;
  width:100%;
  background:#fffaf0;
  border:1px solid var(--ink);
  color:var(--ink);
  padding:7px 8px;
  border-radius:0;
  font-size:10px;
  outline:none
}
.control select:focus{box-shadow:inset 0 -3px 0 var(--acid)}
.colour-row{grid-template-columns:1fr auto}
.colour-row input[type=color]{
  width:50px;height:28px;padding:1px;
  border:1px solid var(--ink);
  border-radius:0;
  background:#fffaf0
}
.checks{
  display:grid;
  grid-template-columns:1fr 1fr;
  border:1px solid var(--ink)
}
.checks label{
  min-height:30px;
  font-size:8px;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 7px;
  border-right:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
  color:var(--ink);
  background:rgba(255,250,240,.72)
}
.checks label:nth-child(2n){border-right:0}
.checks label:nth-last-child(-n+2){border-bottom:0}
.checks input{accent-color:var(--blue)}
.mini-note{
  margin-top:4px;
  padding:10px;
  border-left:4px solid var(--orange);
  background:rgba(255,250,240,.58);
  color:var(--muted);
  font-size:8px;
  line-height:1.55
}
.export-big{
  width:100%;
  margin-top:3px;
  padding:11px;
  font-size:10px
}

@media(max-width:1100px){
  :root{--inspector:300px}
  .formula-strip{display:none}
  .brand-lockup{width:190px;min-width:190px}
  .actions button{padding:7px 6px}
}
@media(max-width:820px){
  :root{--header:58px}
  .brand-lockup{width:150px;min-width:150px;padding-left:9px}
  .brand{font-size:19px}
  .brand-meta{display:none}
  .seed{min-width:164px}
  .toolbar-label{display:none}
  .seed{grid-template-columns:1fr 30px}
  .actions button{display:none}
  .actions #describe{display:block}
  .stage-index{display:none}
}
@media(max-width:700px){
  :root{--header:56px}
  html,body{overscroll-behavior:none}
  .toolbar{
    padding-left:max(7px,env(safe-area-inset-left));
    padding-right:max(7px,env(safe-area-inset-right));
  }
  .brand-lockup{
    width:auto;min-width:100px;
    border-right:0;
    padding:7px 8px 7px 2px
  }
  .brand{font-size:18px}
  .seed{
    min-width:0;
    flex:1;
    padding:6px 7px;
    border-left:1px solid var(--ink);
    border-right:0
  }
  .seed input{font-size:9px;padding:6px;min-width:0}
  .actions{padding:6px 0 6px 6px;gap:4px}
  .actions #describe{display:none}
  main,.app.inspector-closed main{grid-template-columns:1fr}
  .canvas-shell{
    padding:30px 11px 64px;
    align-items:start
  }
  .canvas-wrap{
    width:min(100%,calc((100dvh - var(--header) - 105px)*var(--canvas-ratio,1.4)));
    max-height:calc(100dvh - var(--header) - 105px);
    box-shadow:7px 7px 0 rgba(0,0,0,.42)
  }
  .canvas-wrap:before{inset:-5px}
  .registration{display:none}
  .stats{
    left:0;bottom:-24px;
    max-width:72vw;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
  }
  .stage-footer{
    bottom:8px;
    font-size:6px
  }
  .stage-footer span:last-child{display:none}
  .phi-watermark{
    left:-6px;
    bottom:44px;
    font-size:72vw
  }
  .inspector-toggle{
    display:flex;
    position:absolute;
    top:auto;
    right:max(10px,env(safe-area-inset-right));
    bottom:max(12px,env(safe-area-inset-bottom));
    border:1px solid var(--ink);
    background:var(--acid);
    color:var(--ink);
    box-shadow:4px 4px 0 #000;
    z-index:25
  }
  .app:not(.inspector-closed) .inspector-toggle{display:none}
  .inspector{
    position:fixed;
    left:0;right:0;
    top:auto;
    bottom:0;
    width:100%;
    height:min(58dvh,520px);
    border-left:0;
    border-top:2px solid var(--ink);
    z-index:40;
    box-shadow:0 -18px 70px #0009;
    transform:translateY(0);
    padding-bottom:env(safe-area-inset-bottom);
    grid-template-rows:18px 44px auto minmax(0,1fr)
  }
  .app.inspector-closed .inspector{
    opacity:0;
    transform:translateY(105%);
    pointer-events:none
  }
  .drawer-handle{
    display:block;
    width:42px;height:4px;
    background:var(--ink);
    margin:7px auto 0
  }
  .inspector-head{
    min-height:44px;
    padding:5px 8px 5px 10px;
    border-bottom:1px solid var(--ink)
  }
  .panel-number{width:24px;height:24px}
  .inspector-head strong{font-size:9px}
  .inspector-head span:not(.panel-number){font-size:6px}
  .tabs{
    display:flex;
    position:relative;
    z-index:4;
    overflow-x:auto;
    overflow-y:hidden;
    flex-shrink:0;
    scrollbar-width:none;
    border-bottom:1px solid var(--ink);
    background:var(--paper-2);
    -webkit-overflow-scrolling:touch
  }
  .tabs::-webkit-scrollbar{display:none}
  .tab{
    flex:0 0 72px;
    min-height:42px;
    border-right:1px solid var(--ink);
    font-size:9px
  }
  .tab span{font-size:7px}
  .tab-body{
    min-height:0;
    overflow:hidden
  }
  .tab-panel{
    min-height:0;
    height:100%;
    padding:10px 12px 22px;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch
  }
  .section-title{margin-bottom:10px}
  .controls{gap:10px}
  .control label{font-size:10px}
  .control output{font-size:10px}
  .control select{font-size:11px}
  .checks label{font-size:9px}
  .mini-note{font-size:9px}
}
@media(max-width:390px){
  .brand-lockup{min-width:84px}
  .brand{font-size:16px}
  .seed input{width:74px}
  .canvas-shell{padding-left:7px;padding-right:7px}
}


/* Algorithm series browser / variations */
[hidden]{display:none!important}
.mode-picker-wrap{display:grid;gap:8px}
.mode-picker-label{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:8px;border-bottom:1px solid var(--ink);padding-bottom:6px
}
.mode-picker-label span{font:bold 9px Arial,Helvetica,sans-serif;letter-spacing:.12em}
.mode-picker-label b{font:italic 10px Georgia,serif;color:var(--orange)}
.mode-picker{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px
}
.mode-card{
  min-width:0;
  padding:0 0 7px;
  border:1px solid var(--ink);
  background:#fffaf0;
  display:grid;
  text-align:left;
  overflow:hidden;
  box-shadow:none!important;
  transform:none!important
}
.mode-card:hover{background:#fff}
.mode-card.active{
  background:var(--acid);
  outline:2px solid var(--ink);
  outline-offset:-2px
}
.mode-card canvas{
  width:100%;
  height:auto;
  aspect-ratio:var(--canvas-aspect,7/5);
  background:#f5f0e6;
  border-bottom:1px solid var(--ink)
}
.mode-card span{
  padding:6px 7px 1px;
  font-size:6px;
  letter-spacing:.13em;
  color:var(--muted)
}
.mode-card strong{
  padding:0 7px;
  font:700 8px/1.2 Arial,Helvetica,sans-serif;
  letter-spacing:.02em;
  text-transform:none;
  white-space:normal
}
.mode-select-fallback{
  position:absolute!important;
  width:1px!important;height:1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important
}

.variations-overlay{
  position:fixed;
  inset:0;
  z-index:1100;
  display:grid;
  place-items:center;
  padding:28px;
  background:rgba(17,17,15,.88);
  backdrop-filter:blur(5px)
}
/* 4-Up lives directly under <body>, outside .app's portrait variables. */
.variations-overlay.orientation-portrait{
  --canvas-aspect:5/7;
  --canvas-mobile-preview-aspect:5/7;
}
.variations-sheet{
  width:min(900px,100%);
  max-height:calc(100dvh - var(--header) - 44px);
  overflow:auto;
  background:var(--paper);
  border:2px solid var(--ink);
  box-shadow:12px 12px 0 var(--orange),0 24px 90px #000b
}
.variations-head{
  position:sticky;top:0;z-index:1;background:var(--paper);
  min-height:54px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:8px 10px;
  border-bottom:2px solid var(--ink)
}
.variations-head>div{display:flex;align-items:center;gap:9px}
.variations-head>div>span{
  width:29px;height:29px;display:grid;place-items:center;
  background:var(--blue);color:#fff;font:bold 9px Arial,sans-serif
}
.variations-head>div>div{display:grid;gap:2px}
.variations-head strong{font:bold 11px Arial,Helvetica,sans-serif;letter-spacing:.13em}
.variations-head small{font-size:7px;text-transform:uppercase;color:var(--muted);letter-spacing:.08em}
.variations-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  border-bottom:2px solid var(--ink)
}
.variation-card{
  padding:0;
  border:0;
  border-right:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
  background:#d7d0c0;
  display:grid;
  position:relative;
  box-shadow:none!important;
  transform:none!important;
  overflow:hidden
}
.variation-card:nth-child(2n){border-right:0}
.variation-card:nth-last-child(-n+2){border-bottom:0}
.variation-card canvas{width:100%;height:auto;aspect-ratio:var(--canvas-aspect,7/5);display:block;background:#f5f0e6}
.variation-card span{
  position:absolute;left:7px;bottom:7px;
  background:var(--acid);color:var(--ink);
  padding:4px 6px;border:1px solid var(--ink);
  font:bold 7px "Courier New",monospace;
  letter-spacing:.06em
}
.variation-card:hover{background:var(--acid)}
.variations-actions{
  min-height:48px;
  padding:8px 10px;
  display:flex;align-items:center;gap:12px;justify-content:space-between
}
.variations-actions small{font-size:7px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;text-align:right}
.share-status{
  min-height:12px;
  font-size:7px;
  color:var(--blue);
  text-transform:uppercase;
  letter-spacing:.07em
}

@media(max-width:820px){
  .actions #variations{display:block}
}
@media(max-width:700px){
  .actions #variations{font-size:8px;padding:7px 6px}
  .variations-overlay{padding:9px 7px max(9px,env(safe-area-inset-bottom))}
  .variations-sheet{
    width:100%;
    max-height:calc(100dvh - var(--header) - 18px);
    box-shadow:5px 5px 0 var(--orange)
  }
  .variations-head{min-height:46px;padding:6px 7px}
  .variations-head small{font-size:6px}
  .variations-grid{grid-template-columns:1fr}
  .variation-card{border-right:0!important;border-bottom:1px solid var(--ink)!important}
  .variation-card:last-child{border-bottom:0!important}
  .variation-card canvas{aspect-ratio:var(--canvas-mobile-preview-aspect,7/4.1)}
  .variations-actions{position:sticky;bottom:0;background:var(--paper);border-top:1px solid var(--ink)}
  .mode-picker{grid-template-columns:1fr 1fr}
}
@media(max-width:390px){
  .actions #variations{padding:7px 4px}
  .mode-card strong{font-size:7px}
}


/* First-visit ethos toast */
.ethos-toast{
  position:absolute;
  left:18px;
  bottom:32px;
  z-index:24;
  width:min(390px,calc(100% - 36px));
  padding:14px 15px 13px;
  background:rgba(236,231,217,.97);
  color:var(--ink);
  border:2px solid var(--ink);
  box-shadow:8px 8px 0 var(--blue),0 18px 55px #0008;
  backdrop-filter:blur(5px)
}
.ethos-toast:before{
  content:"φ";
  position:absolute;
  right:12px;
  top:-12px;
  font:900 72px/.8 Georgia,serif;
  color:var(--orange);
  opacity:.16;
  pointer-events:none
}
.ethos-kicker{
  display:block;
  margin-bottom:7px;
  font-size:7px;
  letter-spacing:.15em;
  color:var(--blue);
  font-weight:900
}
.ethos-toast strong{
  display:block;
  max-width:320px;
  font:900 18px/.95 Arial,Helvetica,sans-serif;
  letter-spacing:-.035em
}
.ethos-toast p{
  max-width:330px;
  margin:10px 0 11px;
  font-size:8px;
  line-height:1.5;
  color:var(--soft-ink)
}
.ethos-reveal{
  background:var(--acid);
  border-color:var(--ink);
  font-weight:900;
  font-size:8px
}
.ethos-close{
  position:absolute;
  right:5px;
  top:5px;
  width:27px;
  height:27px;
  padding:0;
  border:0;
  display:grid;
  place-items:center;
  font-size:18px;
  z-index:2
}
.ethos-toast.ethos-out{
  opacity:0;
  transform:translateY(10px);
  transition:opacity .16s ease,transform .16s ease
}

@media(max-width:700px){
  .ethos-toast{
    left:max(8px,env(safe-area-inset-left));
    right:max(8px,env(safe-area-inset-right));
    bottom:max(58px,calc(env(safe-area-inset-bottom) + 58px));
    width:auto;
    padding:12px 13px 11px;
    box-shadow:5px 5px 0 var(--blue)
  }
  .ethos-toast strong{font-size:16px}
  .ethos-toast p{font-size:8px;margin:8px 0 9px}
  .ethos-reveal{font-size:8px}
}


/* Reveal System hover explanations */
.canvas-wrap.reveal-active canvas{cursor:help}
.reveal-tooltip{
  position:absolute;
  z-index:12;
  width:min(280px,calc(100% - 20px));
  padding:9px 10px 10px;
  background:rgba(17,17,15,.96);
  color:#fff;
  border:1px solid var(--acid);
  box-shadow:5px 5px 0 var(--orange);
  pointer-events:none;
  transform:translate(0,0)
}
.reveal-tooltip strong{
  display:block;
  margin-bottom:4px;
  color:var(--acid);
  font:bold 9px Arial,Helvetica,sans-serif;
  letter-spacing:.11em;
  text-transform:uppercase
}
.reveal-tooltip span{
  display:block;
  font:8px/1.45 "Courier New",monospace;
  color:#ece7d9
}
.reveal-tooltip:after{
  content:"";
  position:absolute;
  left:10px;
  top:-7px;
  width:10px;
  height:10px;
  background:rgba(17,17,15,.96);
  border-left:1px solid var(--acid);
  border-top:1px solid var(--acid);
  transform:rotate(45deg)
}
@media(max-width:700px){
  .reveal-tooltip{
    width:min(260px,calc(100% - 16px));
    padding:8px 9px
  }
  .reveal-tooltip span{font-size:8px}
}


/* Mobile viewport reliability: keep the toolbar inside the screen and allow recovery scrolling. */
@media(max-width:820px){
  :root{--header:94px}
  .toolbar{
    height:var(--header);
    display:grid;
    grid-template-columns:minmax(88px,auto) minmax(0,1fr);
    grid-template-rows:48px 44px;
    align-items:stretch;
    padding:0 max(7px,env(safe-area-inset-right)) 0 max(7px,env(safe-area-inset-left));
    overflow:visible
  }
  .brand-lockup{
    grid-column:1;
    grid-row:1;
    width:auto;
    min-width:88px;
    padding:7px 8px 7px 2px;
    border-right:0
  }
  .brand{font-size:18px}
  .brand-meta{display:none}
  .formula-strip{display:none}
  .seed{
    grid-column:2;
    grid-row:1;
    min-width:0;
    width:100%;
    padding:6px 0 6px 7px;
    border-left:1px solid var(--ink);
    border-right:0;
    grid-template-columns:minmax(0,1fr) 30px
  }
  .toolbar-label{display:none}
  .seed input{width:100%;min-width:0;font-size:10px;padding:6px}
  .actions{
    grid-column:1 / -1;
    grid-row:2;
    width:100%;
    min-width:0;
    margin:0;
    padding:5px 0 6px;
    border-top:1px solid var(--ink);
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:5px;
    align-items:stretch
  }
  .actions button{display:none}
  .actions #variations,
  .actions #geometry,
  .actions .gallery-nav{
    display:grid;
    place-items:center;
    width:100%;
    min-width:0;
    height:32px;
    margin:0;
    padding:6px 4px;
    font-size:8px;
    line-height:1;
    overflow:hidden;
    text-overflow:ellipsis
  }
  .actions #describe{display:none}
}

@media(max-width:700px){
  :root{--header:94px}
  html,body{
    width:100%;
    min-width:0;
    height:auto;
    min-height:100%;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior-y:auto
  }
  .app{
    width:100%;
    height:auto;
    min-height:100dvh;
    overflow:visible;
    grid-template-rows:var(--header) minmax(calc(100dvh - var(--header)),1fr)
  }
  main,.app.inspector-closed main{
    min-width:0;
    min-height:calc(100dvh - var(--header));
    width:100%;
    grid-template-columns:minmax(0,1fr)
  }
  .stage{
    width:100%;
    min-width:0;
    min-height:calc(100dvh - var(--header))
  }
  .canvas-shell{
    width:100%;
    min-width:0;
    padding:22px 10px 58px
  }
  .canvas-wrap{
    width:min(100%,calc((100dvh - var(--header) - 88px)*var(--canvas-ratio,1.4)));
    max-width:100%;
    max-height:calc(100dvh - var(--header) - 88px)
  }
}

@media(max-width:360px){
  .toolbar{grid-template-columns:82px minmax(0,1fr)}
  .brand-lockup{min-width:82px;padding-right:5px}
  .brand{font-size:15px}
  .seed{padding-left:5px}
  .seed input{font-size:9px}
  .actions{gap:4px}
  .actions #variations,
  .actions #geometry,
  .actions .gallery-nav{font-size:7px;padding-left:2px;padding-right:2px}
}


/* Mobile full-page fit: artwork, footer controls and parameter navigation. */
@media(max-width:700px){
  .canvas-wrap{
    width:min(calc(100vw - 20px),calc((100dvh - var(--header) - 88px)*var(--canvas-ratio,1.4)));
    max-width:calc(100vw - 20px)
  }
  .stats{
    max-width:calc(100vw - 24px);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
  }
  .stage-footer{
    left:max(9px,env(safe-area-inset-left));
    right:max(128px,calc(env(safe-area-inset-right) + 128px));
    bottom:max(12px,env(safe-area-inset-bottom));
    min-width:0;
    overflow:hidden
  }
  .stage-footer span{
    display:block;
    min-width:0;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
  }
  .inspector-toggle{
    max-width:116px;
    right:max(10px,env(safe-area-inset-right));
    bottom:max(10px,env(safe-area-inset-bottom));
    overflow:hidden
  }
  .tabs{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    grid-auto-rows:34px;
    overflow:visible;
    flex-shrink:0
  }
  .tab{
    min-width:0;
    min-height:34px;
    width:100%;
    padding:3px 2px;
    border-right:1px solid var(--ink);
    border-bottom:1px solid var(--ink);
    font-size:8px
  }
  .tab:nth-child(3n){border-right:0}
  .tab:nth-last-child(-n+3){border-bottom:0}
  .tab span{font-size:6px}
  .inspector{
    height:min(66dvh,590px);
    max-width:100vw
  }
  .inspector-head,
  .tab-body,
  .tab-panel,
  .controls,
  .control,
  .mode-picker-wrap,
  .checks{
    min-width:0;
    max-width:100%
  }
  .control select,
  .control input,
  .export-big,
  .mode-picker{
    max-width:100%
  }
  .ethos-toast{
    max-width:calc(100vw - max(16px,env(safe-area-inset-left) + env(safe-area-inset-right)));
  }
  .variations-overlay,
  .variations-sheet,
  .variations-grid,
  .variation-card{
    max-width:100vw
  }
}

@media(max-width:360px){
  .stage-footer{
    right:116px;
    font-size:5px
  }
  .inspector-toggle{
    max-width:106px;
    padding:7px 8px;
    gap:8px;
    font-size:9px
  }
}


/* Mobile action bar: keep all useful creation controls visible. */
@media(max-width:820px){
  :root{--header:126px}
  .toolbar{
    grid-template-rows:48px 76px;
  }
  .actions{
    grid-template-columns:repeat(3,minmax(0,1fr));
    grid-template-rows:repeat(2,32px);
    grid-template-areas:
      "mutate randomise describe"
      "variations geometry gallery";
    gap:4px 5px;
    padding:5px 0 7px;
  }
  .actions #mutate{grid-area:mutate}
  .actions #randomise{grid-area:randomise}
  .actions #describe{grid-area:describe}
  .actions #variations{grid-area:variations}
  .actions #geometry{grid-area:geometry}
  .actions .gallery-nav{grid-area:gallery}

  .actions #mutate,
  .actions #randomise,
  .actions #describe,
  .actions #variations,
  .actions #geometry,
  .actions .gallery-nav{
    display:grid;
    place-items:center;
    width:100%;
    min-width:0;
    height:32px;
    margin:0;
    padding:5px 3px;
    font-size:8px;
    line-height:1;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}

@media(max-width:390px){
  .actions{gap:4px}
  .actions #mutate,
  .actions #randomise,
  .actions #describe,
  .actions #variations,
  .actions #geometry,
  .actions .gallery-nav{
    font-size:7px;
    padding-left:2px;
    padding-right:2px;
  }
}

@media(max-width:340px){
  :root{--header:124px}
  .toolbar{grid-template-rows:46px 76px}
  .brand{font-size:14px}
  .seed input{font-size:8px}
  .actions #mutate,
  .actions #randomise,
  .actions #describe,
  .actions #variations,
  .actions #geometry,
  .actions .gallery-nav{
    font-size:6px;
    letter-spacing:.02em;
  }
}


/* Renderer provenance: shown only while reproducing a legacy shared artwork. */
.stats{
  display:flex;
  align-items:center;
  gap:7px;
  max-width:calc(100% - 2px);
}
.stats #statsText{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.renderer-chip{
  flex:0 0 auto;
  padding:3px 5px;
  border:1px solid var(--orange);
  background:var(--ink);
  color:var(--orange);
  font:bold 7px/1 Arial,Helvetica,sans-serif;
  letter-spacing:.08em;
}
@media(max-width:700px){
  .stats{max-width:calc(100vw - 24px)}
  .renderer-chip{font-size:6px;padding:3px 4px}
}

/* First-visit manifesto */
.intro-splash{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:clamp(12px,3vw,36px);background:rgba(17,17,15,.94);color:var(--ink);overflow:auto;overscroll-behavior:contain}
.intro-grid{position:fixed;inset:0;pointer-events:none;opacity:.16;background:linear-gradient(90deg,#ece7d9 1px,transparent 1px) 0 0/34px 34px,linear-gradient(#ece7d9 1px,transparent 1px) 0 0/34px 34px}
.intro-card{position:relative;width:min(980px,100%);max-height:calc(100dvh - 24px);overflow:auto;background:var(--paper);border:2px solid var(--ink);box-shadow:12px 12px 0 var(--orange);z-index:1}
.intro-top{display:flex;justify-content:space-between;gap:20px;padding:9px 12px;border-bottom:2px solid var(--ink);font-size:8px;letter-spacing:.12em}
.intro-body{display:grid;grid-template-columns:minmax(180px,.62fr) minmax(0,1.38fr);min-height:540px}
.intro-phi{display:grid;place-items:center;overflow:hidden;border-right:2px solid var(--ink);background:var(--acid);font:900 clamp(180px,31vw,390px)/1 Georgia,serif;letter-spacing:-.12em}
.intro-copy{padding:clamp(20px,3vw,38px);display:flex;flex-direction:column;justify-content:center}
.intro-kicker{margin:0 0 8px;font-size:8px;letter-spacing:.16em;color:var(--muted)}
.intro-copy h1{margin:0;font:1000 clamp(42px,7vw,78px)/.85 Arial,sans-serif;letter-spacing:-.075em}.intro-copy h1 span{color:var(--orange)}
.intro-thesis{margin:15px 0 18px;font:italic 19px/1.2 Georgia,serif}.intro-copy>p:not(.intro-kicker):not(.intro-thesis):not(.intro-foot){max-width:620px;font-size:11px;line-height:1.55}
.intro-principles{margin:20px 0 16px;border-top:2px solid var(--ink)}
.intro-principles>div{display:grid;grid-template-columns:30px 180px 1fr;gap:9px;align-items:start;padding:9px 0;border-bottom:1px solid var(--ink)}
.intro-principles b{width:24px;height:24px;display:grid;place-items:center;background:var(--blue);color:#fff;font-size:8px}.intro-principles strong{font:800 9px/1.35 Arial,sans-serif;letter-spacing:.04em}.intro-principles span{font-size:8px;line-height:1.45;color:var(--soft-ink)}
.intro-systems{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--ink);margin:0 0 16px}.intro-systems span{padding:7px 4px;text-align:center;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);font-size:7px}.intro-systems span:nth-child(4n){border-right:0}.intro-systems span:nth-last-child(-n+4){border-bottom:0}
.intro-actions{display:flex;gap:8px;flex-wrap:wrap}.intro-actions button{padding:10px 12px}.intro-enter{background:var(--ink);color:var(--paper);font-weight:900}
.intro-foot{margin:13px 0 0;font-size:7px;letter-spacing:.1em;color:var(--muted)}
@media(max-width:700px){.intro-splash{padding:0;align-items:stretch}.intro-card{width:100%;max-height:100dvh;border:0;box-shadow:none}.intro-top{position:sticky;top:0;background:var(--paper);z-index:2}.intro-body{display:block;min-height:0}.intro-phi{height:105px;border-right:0;border-bottom:2px solid var(--ink);font-size:140px;line-height:.7}.intro-copy{padding:18px 16px 24px;display:block}.intro-copy h1{font-size:48px}.intro-thesis{font-size:17px}.intro-principles>div{grid-template-columns:28px 1fr}.intro-principles span{grid-column:2}.intro-systems{grid-template-columns:repeat(2,1fr)}.intro-systems span:nth-child(2n){border-right:0}.intro-systems span:nth-child(4n){border-right:0}.intro-systems span:nth-last-child(-n+4){border-bottom:1px solid var(--ink)}.intro-systems span:nth-last-child(-n+2){border-bottom:0}.intro-actions{display:grid;grid-template-columns:1fr}.intro-actions button{width:100%;white-space:normal}}

/* Deterministic artwork description / accessibility panel */
.description-overlay{position:fixed;inset:0;z-index:1100;display:grid;grid-template-rows:minmax(0,1fr);place-items:center;padding:22px;background:rgba(245,240,230,.82);backdrop-filter:blur(4px)}
.description-overlay[hidden]{display:none}
.description-sheet{width:min(720px,100%);min-height:0;max-height:100%;display:flex;flex-direction:column;overflow:hidden;background:var(--paper);border:2px solid var(--ink);box-shadow:10px 10px 0 var(--blue)}
.description-head{flex:0 0 auto;min-height:54px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px;border-bottom:2px solid var(--ink);background:var(--acid)}
.description-head>div{display:flex;align-items:center;gap:10px;min-width:0}
.description-head>div>span{width:30px;height:30px;display:grid;place-items:center;flex:0 0 auto;background:var(--ink);color:var(--paper);font-size:8px;font-weight:900}
.description-head strong{display:block;font:900 14px/1 Arial,sans-serif;letter-spacing:.04em}
.description-head small{display:block;margin-top:3px;font-size:7px;color:var(--soft-ink);letter-spacing:.06em;text-transform:uppercase}
.description-body{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px}
.description-head .icon-btn{flex:0 0 44px;width:44px;height:44px}
.description-actions{flex:0 0 auto;padding:10px 16px;border-top:2px solid var(--ink);background:var(--paper)}
.description-actions button{width:100%;min-height:44px;background:var(--ink);color:var(--paper)}
.description-kicker{margin:0 0 10px;font-size:8px;font-weight:900;letter-spacing:.12em;color:var(--blue)}
.description-block{border-top:2px solid var(--ink);padding:11px 0 12px}
.description-block>span{display:block;margin-bottom:6px;font-size:7px;font-weight:900;letter-spacing:.12em;color:var(--muted)}
.description-block p{margin:0;font:15px/1.5 Georgia,serif;color:var(--ink)}
.description-block button{margin-top:10px;background:var(--ink);color:var(--paper)}
.description-block small{margin-left:8px;font-size:7px;color:var(--blue);text-transform:uppercase;letter-spacing:.06em}
.description-construction p{font:11px/1.55 "Courier New",monospace}
.description-note{margin:2px 0 0;padding:9px 10px;border-left:4px solid var(--orange);background:rgba(255,250,240,.58);color:var(--muted);font-size:8px;line-height:1.5}
@media(max-width:700px){
  .description-overlay{position:fixed;padding:max(8px,env(safe-area-inset-top)) max(7px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(7px,env(safe-area-inset-left));height:100vh;height:100dvh;align-items:end}
  .description-sheet{width:100%;max-height:100%;box-shadow:5px 5px 0 var(--blue)}
  .description-head{min-height:48px;padding:7px}
  .description-head strong{font-size:12px}
  .description-body{padding:12px}
  .description-block p{font-size:13px}
  .description-construction p{font-size:9px}
}

/* Shared type sizes keep useful text readable through every responsive layout. */
.brand-meta,
.formula-strip,
.toolbar-label,
.stage-footer,
.inspector-head span:not(.panel-number),
.mode-card span,
.intro-top,
.intro-kicker,
.intro-foot,
.intro-systems span,
.renderer-chip{
  font-size:var(--ui-caption);
  line-height:1.4;
  letter-spacing:.06em
}
.seed input{font-size:var(--ui-body)}
.actions #mutate,
.actions #randomise,
.actions #describe,
.actions #variations,
.actions #geometry,
.actions .gallery-nav{
  font-size:var(--ui-label);
  letter-spacing:.025em
}
.tab{font-size:10px;line-height:1.3}
.tab span{font-size:8px}
.inspector-head strong{font-size:13px;letter-spacing:.08em}
.inspector-head span:not(.panel-number){text-transform:none}
.section-title span{font-size:12px;letter-spacing:.08em}
.mode-picker-label span{font-size:11px}
.mode-picker-label b{font-size:12px}
.controls{gap:14px}
.control label,
.control output,
.control select,
.checks label,
.export-big{font-size:var(--ui-body);line-height:1.4}
.control label{letter-spacing:.035em}
.control-label{flex-wrap:wrap;row-gap:3px}
.mode-card span{padding-top:7px}
.mode-card strong{font-size:12px;line-height:1.35}
.mini-note,
.variations-head small,
.variations-actions small,
.share-status,
.description-head small,
.description-note{
  font-size:var(--ui-body);
  line-height:1.5;
  letter-spacing:0;
  text-transform:none
}
.variations-head strong{font-size:13px;letter-spacing:.08em}
.variations-head>div>div,
.description-head>div>div{min-width:0}
.variations-actions{flex-wrap:wrap}
.variations-actions small{text-align:left}
.variation-card span{font-size:10px;max-width:calc(100% - 14px);overflow-wrap:anywhere}
.share-status{min-height:18px}
.stats{font-size:10px;line-height:1.4;letter-spacing:.045em}
.stage-footer{color:#a8a194;flex-wrap:wrap;gap:5px 16px}
.stage-index strong{font-size:10px}
.ethos-kicker,
.ethos-reveal,
.description-kicker,
.description-block>span,
.description-block small{font-size:11px;line-height:1.4}
.ethos-toast p{font-size:12px;line-height:1.5}
.reveal-tooltip strong{font-size:12px}
.reveal-tooltip span{font-size:12px;line-height:1.5}
.intro-copy>p:not(.intro-kicker):not(.intro-thesis):not(.intro-foot){font-size:13px;line-height:1.6}
.intro-principles strong{font-size:12px}
.intro-principles span{font-size:12px;line-height:1.5}
.description-construction p{font-size:13px;line-height:1.6}
.inspector-toggle{font-size:11px}

@media(min-width:821px) and (max-width:1100px){
  .actions{gap:4px;padding-left:7px;padding-right:7px}
  .actions #mutate,
  .actions #randomise,
  .actions #describe,
  .actions #variations,
  .actions #geometry,
  .actions .gallery-nav{font-size:10px;padding-left:6px;padding-right:6px}
}
@media(max-width:700px){
  .tabs{grid-auto-rows:40px}
  .tab{min-height:40px}
  .variations-actions small{flex:1 1 180px}
  .intro-top{flex-wrap:wrap;gap:5px 12px}
  .intro-principles>div{gap:8px}
  .stage-footer{display:block}
}

/* Honour the user's OS/browser motion preference. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
}

.plotter-controls{border:1px solid var(--ink,#11110f);padding:12px;display:grid;gap:12px;min-width:0}
.plotter-controls legend{font:700 12px 'Courier New',monospace;padding:0 5px}
.plotter-controls input[type=number]{width:100%;box-sizing:border-box}
#plotterPreview{margin:0}
#plotterPreviewImage{display:block;width:100%;height:auto;border:1px solid #777}
#plotterSummary{font:11px/1.5 'Courier New',monospace;margin-top:6px;overflow-wrap:anywhere}