:root{color-scheme:dark;
  --bg:#111412;
  --panel:#1a1e1a;
  --raised:#222821;
  --line:#363e32;
  --text:#eeeede;
  --muted:#a1aa98;
  --acid:#c0ee6c;
  --red:#e17b73;
  --cyan:#8fcbd2;
  --amber:#e0b969;
  --serif:Georgia,'Times New Roman',serif;
  --mono:Consolas,'Courier New',monospace;
  --sans:'Segoe UI',Arial,sans-serif}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;
  background:var(--bg);
  color:var(--text);
  font:14px/1.5 var(--sans)}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
button,a,input,textarea,select{outline-offset:4px}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--acid)}
button{color:var(--text);
  background:var(--raised);
  border:1px solid var(--line);
  border-radius:5px;
  padding:9px 13px;
  transition:background .15s,border-color .15s}
button:hover{border-color:var(--muted);
  background:var(--panel)}
button:disabled{opacity:.4;
  cursor:not-allowed}
button.primary{background:var(--acid);
  color:#18210e;
  border-color:var(--acid);
  font-weight:650}
button.quiet{background:transparent}
button.small{padding:5px 9px;
  font-size:12px}
button.active{color:var(--acid);
  border-color:var(--acid)}
input,textarea,select{width:100%;
  background:var(--bg);
  color:var(--text);
  border:1px solid var(--line);
  border-radius:4px;
  padding:9px 10px;
  min-width:0}
textarea{resize:vertical;
  min-height:80px;
  line-height:1.55}
input::placeholder,textarea::placeholder{color:var(--muted);
  opacity:.75}
label{display:block;
  font-size:12px;
  color:var(--muted);
  font-weight:550}
label>input,label>textarea,label>select{display:block;
  margin-top:5px;
  font-size:14px;
  font-weight:400}
h1,h2,h3,p{margin:0}
h1{font:48px/1.1 var(--serif);
  letter-spacing:-1.7px}
h2{font:29px/1.15 var(--serif);
  letter-spacing:-.5px}
h3{font-size:15px}
a{color:var(--acid)}
small{font-size:12px}
.muted{color:var(--muted)}
.eyebrow{font:11px/1.5 var(--mono);
  letter-spacing:1.6px;
  text-transform:uppercase}
.sr-only{position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0)}
.row{display:flex;
  align-items:center;
  gap:10px}
.spread{justify-content:space-between}
.wrap{flex-wrap:wrap}
.stack{display:grid;
  gap:14px}
.topbar{height:76px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 32px;
  gap:20px}
.brand{display:flex;
  align-items:center;
  gap:12px;
  font-size:14px;
  font-weight:650;
  letter-spacing:.3px}
.brand-mark{width:30px;
  height:34px;
  color:var(--acid)}
.brand-sub{display:block;
  font:10px var(--mono);
  color:var(--muted);
  letter-spacing:2px;
  margin-top:2px}
.topnav{display:flex;
  gap:6px}
.topnav button{border:0;
  background:transparent;
  color:var(--muted);
  padding:10px 15px}
.topnav button.active{color:var(--text);
  background:var(--raised)}
.dot{width:6px;
  height:6px;
  background:var(--amber);
  border-radius:50%;
  display:inline-block}
.page{max-width:1640px;
  margin:auto;
  padding:30px 32px 115px}
.hero{display:flex;
  align-items:end;
  justify-content:space-between;
  margin-bottom:27px;
  gap:20px}
.hero .eyebrow{color:var(--acid);
  margin-bottom:9px}
.hero p{color:var(--muted);
  margin-top:10px;
  max-width:580px}
.hero-note{text-align:right;
  max-width:230px;
  font:11px/1.7 var(--mono);
  color:var(--muted)}
.toolbar{display:flex;
  gap:10px;
  align-items:center;
  margin-bottom:20px}
.search{flex:1;
  position:relative}
.search input{padding-left:34px}
.search span{position:absolute;
  left:12px;
  top:7px;
  font-size:20px;
  color:var(--muted)}
.toolbar select{width:148px}
.toolbar .tag-filter{width:155px}
.count{font:11px var(--mono);
  color:var(--muted);
  white-space:nowrap}
.panel{background:var(--panel);
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden}
.panel-head{padding:18px 22px;
  border-bottom:1px solid var(--line)}
.panel-body{padding:22px}
.library-grid{display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  align-content:start}
.mutation-card{text-align:left;
  padding:0;
  overflow:hidden;
  position:relative;
  border-radius:7px;
  background:var(--panel);
  min-width:0}
.mutation-card.selected{border-color:var(--acid);
  box-shadow:inset 0 0 0 1px var(--acid)}
.card-art{height:115px;
  background:radial-gradient(ellipse at center,#343d2a 0%,#1a201b 65%);
  display:flex;
  align-items:center;
  justify-content:center;
  border-bottom:1px solid var(--line);
  position:relative;
  color:#bbc89c}
.card-art::before{content:'';
  position:absolute;
  inset:12px;
  background:linear-gradient(var(--line),var(--line)) left top/16px 1px no-repeat,linear-gradient(var(--line),var(--line)) left top/1px 16px no-repeat,linear-gradient(var(--line),var(--line)) right bottom/16px 1px no-repeat,linear-gradient(var(--line),var(--line)) right bottom/1px 16px no-repeat;
  opacity:.7}
.specimen-svg{width:90px;
  height:94px;
  filter:drop-shadow(0 0 15px #94a86120)}
.card-art img{width:100%;
  height:100%;
  object-fit:cover}
.card-index{position:absolute;
  left:13px;
  bottom:10px;
  font:10px var(--mono);
  color:var(--muted)}
.card-body{padding:14px}
.card-name{font:21px/1.2 var(--serif);
  margin:7px 0;
  overflow-wrap:anywhere}
.card-caption{color:var(--muted);
  font-size:12px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:36px}
.badge{display:inline-flex;
  align-items:center;
  gap:5px;
  font:10px var(--mono);
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.5px}
.badge.ready{color:var(--acid)}
.badge.developing{color:var(--amber)}
.badge.idea{color:var(--cyan)}
.tags{display:flex;
  gap:5px;
  flex-wrap:wrap;
  margin-top:10px}
.tag{border:1px solid var(--line);
  border-radius:3px;
  padding:2px 6px;
  color:var(--muted);
  font:10px var(--mono)}
.workspace-a{display:grid;
  grid-template-columns:minmax(360px,.85fr) minmax(500px,1.15fr);
  gap:24px;
  align-items:start}
.section-heading{margin-bottom:13px}
.editor-title{display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px}
.editor-title small{font:10px var(--mono);
  color:var(--muted)}
.editor-form{display:grid;
  gap:17px}
.field-pair{display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px}
.effect-field{border-left:2px solid var(--acid);
  padding-left:12px;
  display:grid;
  gap:8px}
.effect-field.negative{border-color:var(--red)}
.effect-field .effect-label{font:10px var(--mono);
  letter-spacing:1px;
  color:var(--acid)}
.effect-field.negative .effect-label{color:var(--red)}
.effect-field input{font-size:13px}
.effect-field textarea{min-height:104px;
  font-size:13px}
.form-details{border-top:1px solid var(--line);
  padding-top:13px}
.form-details summary{cursor:pointer;
  color:var(--muted);
  font-size:12px}
.details-content{padding-top:15px;
  display:grid;
  gap:14px}
.image-controls{display:flex;
  align-items:center;
  gap:12px}
.image-controls .thumb{width:62px;
  height:58px;
  border:1px dashed var(--line);
  border-radius:4px;
  overflow:hidden;
  display:grid;
  place-items:center}
.thumb .specimen-svg{width:45px;
  height:48px}
.thumb img{width:100%;
  height:100%;
  object-fit:cover}
.upload-label{display:inline-block;
  cursor:pointer;
  background:var(--raised);
  padding:7px 10px;
  border:1px solid var(--line);
  border-radius:4px;
  color:var(--text)}
.file-input{position:absolute;
  width:1px;
  height:1px;
  opacity:0}
.preview-region{border-top:1px solid var(--line);
  padding:20px 22px;
  background:color-mix(in srgb,var(--bg) 50%,var(--panel))}
.preview-region .eyebrow{color:var(--muted);
  margin-bottom:14px}
.state-grid{display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px}
.state-card{min-width:0;
  border:1px solid var(--line);
  border-top:2px solid var(--state);
  border-radius:4px;
  background:var(--panel);
  padding:13px}
.state-card.stable{--state:var(--acid)}
.state-card.unstable{--state:var(--amber)}
.state-card.corrupt{--state:var(--red)}
.state-label{font:10px var(--mono);
  color:var(--state);
  text-transform:uppercase;
  letter-spacing:1px}
.state-card h3{font:18px/1.25 var(--serif);
  margin:12px 0;
  overflow-wrap:anywhere}
.effect{font-size:12px;
  line-height:1.5;
  padding-top:9px;
  overflow-wrap:anywhere;
  white-space:pre-wrap}
.effect+.effect{margin-top:9px;
  border-top:1px solid var(--line)}
.effect.positive{color:var(--acid)}
.effect.negative{color:var(--red)}
.effect strong{display:block;
  font-weight:600;
  margin-bottom:3px}
.effect .description{color:var(--text)}
.missing{color:var(--muted);
  font-style:italic}
.state-footnote{font-size:11px;
  color:var(--muted);
  margin-top:13px}
.empty{padding:35px 20px;
  text-align:center;
  color:var(--muted);
  border:1px dashed var(--line);
  border-radius:5px;
  grid-column:1/-1}
.empty strong{color:var(--text);
  display:block;
  margin-bottom:5px}
.bottom-meta{margin-top:25px;
  border-top:1px solid var(--line);
  padding-top:13px;
  display:flex;
  justify-content:space-between;
  color:var(--muted);
  font:10px var(--mono);
  gap:20px}
.toast{position:fixed;
  bottom:100px;
  left:50%;
  transform:translateX(-50%);
  background:var(--text);
  color:var(--bg);
  padding:10px 18px;
  border-radius:5px;
  z-index:15;
  max-width:90vw}
.margin-note{color:var(--muted);
  font:italic 15px/1.6 var(--serif);
  padding:20px 7px}
.comparison-head{display:flex;
  gap:16px;
  align-items:center;
  justify-content:space-between;
  margin:25px 0 17px}
.roll-controls{display:flex;
  align-items:center;
  gap:10px}
.roll-controls select{width:205px}
.comparison-grid{display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px}
.slot{border:1px solid var(--line);
  border-radius:7px;
  background:var(--panel);
  overflow:hidden}
.slot.locked{border-color:var(--acid)}
.slot-top{padding:13px 16px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between}
.slot-fields{padding:16px;
  display:grid;
  grid-template-columns:1fr 110px;
  gap:10px}
.slot .card-art{height:150px;
  border-top:1px solid var(--line)}
.slot .card-art .specimen-svg{width:120px;
  height:130px}
.slot .state-card{border-left:0;
  border-right:0;
  border-bottom:0;
  border-radius:0;
  min-height:200px;
  padding:22px}
.slot .state-card h3{font-size:28px}
.slot .effect{font-size:14px}
.slot-footer{padding:12px 20px;
  font:11px var(--mono);
  color:var(--muted);
  border-top:1px solid var(--line)}
.comparison-tip{margin-top:20px;
  padding:17px 20px;
  border-left:2px solid var(--acid);
  background:var(--panel);
  color:var(--muted);
  font-size:13px}
.slot.empty-slot .empty{border:0;
  min-height:350px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column}

@media(min-width:1550px){.library-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.workspace-a{grid-template-columns:1fr 1.1fr}
.card-art{height:135px}
}

@media(max-width:1150px){.workspace-a{grid-template-columns:minmax(280px,.65fr) minmax(450px,1fr)}
.library-grid{grid-template-columns:1fr}
.card-art{height:95px}
.hero-note{display:none}
.topbar{padding:0 22px}
.page{padding:25px 22px 115px}
}

@media(max-width:800px){.library-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.library-pane{max-height:370px;
  overflow:auto;
  padding:2px}
.comparison-grid{grid-template-columns:1fr}
.slot .state-card{min-height:0}
.slot .card-art{height:100px}
.hero h1{font-size:36px}
.hero{align-items:center}
.toolbar{flex-wrap:wrap}
.toolbar .search{flex-basis:100%}
.comparison-head{align-items:start;
  flex-direction:column}
.topbar{height:auto;
  min-height:76px;
  flex-wrap:wrap;
  padding:15px 20px;
  gap:14px}
.topnav button{padding:7px 10px}
.state-grid{grid-template-columns:1fr}
.field-pair{grid-template-columns:1fr}
.hero .primary{white-space:nowrap}
.page{padding:22px 16px 115px}
.panel-body,.panel-head,.preview-region{padding:18px}
.bottom-meta{flex-direction:column;
  gap:4px}
}

@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;
  transition:none!important}
}

/* Keep the card-library direction usable as a single editing station on desktop. */
.editor-title>div:first-child{min-width:0}
.editor-title h2{overflow-wrap:anywhere}
.editor-title>.row{flex-shrink:0}
.preview-reference{width:100%;
  height:70px;
  object-fit:cover;
  border-radius:3px;
  margin-top:10px}

@media(min-width:801px){.variant-a .workspace-a>.panel{position:sticky;
  top:18px}
.variant-a .workspace-a>.panel>.panel-body{max-height:clamp(240px,calc(100vh - 730px),440px);
  overflow:auto;
  scrollbar-width:thin;
  scrollbar-color:var(--line) var(--panel)}
.variant-a .workspace-a .preview-region{padding-top:16px;
  padding-bottom:16px}
.variant-a .workspace-a .panel-head{padding-top:14px;
  padding-bottom:14px}
}

@media(max-width:800px){.editor-title{align-items:start;
  flex-direction:column}
.editor-title>.row{width:100%;
  justify-content:flex-end}
}

/* A refinement: adjustable density, independent preview arrangements, and anatomy visuals. */
.library-controls,.segmented,.preview-heading{display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap}

.library-controls{justify-content:flex-end}
.segmented{gap:0;
  border:1px solid var(--line);
  border-radius:5px;
  overflow:hidden;
  flex-wrap:nowrap}
.segmented button{border:0;
  border-radius:0;
  white-space:nowrap}
.segmented button.active{background:#c0ee6c18;
  box-shadow:inset 0 -2px var(--acid)}

.size-control{display:flex;
  align-items:center;
  gap:8px;
  font-size:11px}
.size-control select{width:auto;
  margin:0;
  padding:5px 8px;
  font-size:12px}
.preview-heading{justify-content:space-between;
  margin-bottom:14px}
.preview-heading .eyebrow{margin:0}
.roller-layout-control{display:flex;
  justify-content:flex-end;
  margin-bottom:14px}

.library-grid.size-small{--entry-width:140px;
  --art-height:75px;
  --entry-font:17px}
.library-grid.size-medium{--entry-width:180px;
  --art-height:105px;
  --entry-font:20px}
.library-grid.size-large{--entry-width:220px;
  --art-height:140px;
  --entry-font:23px}

.library-grid[class*=size-]{grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--entry-width)),1fr))}
.library-grid .card-art{height:var(--art-height)}
.library-grid .card-name{font-size:var(--entry-font)}
.library-grid.size-small .specimen-svg{height:64px;
  width:64px}
.library-grid.size-small .card-body{padding:10px}
.library-grid.size-small .card-caption{display:none}
.library-grid.size-small .card-index{font-size:8px;
  bottom:5px;
  left:8px}

.mutation-list{display:grid;
  gap:8px}
.mutation-list-item{display:flex;
  text-align:left;
  gap:15px;
  padding:13px;
  background:var(--panel);
  min-width:0}
.mutation-list-item.selected{border-color:var(--acid);
  box-shadow:inset 2px 0 var(--acid)}
.list-art{width:70px;
  flex:0 0 70px;
  display:grid;
  place-items:center;
  background:radial-gradient(#38422c,#1a201b);
  border-radius:4px;
  align-self:stretch}
.list-art .specimen-svg{width:60px;
  height:75px;
  color:#bbc89c}
.list-art img{width:100%;
  height:90px;
  object-fit:cover}
.list-copy{flex:1;
  min-width:0}
.list-copy .card-name{font-size:21px;
  margin:0 0 5px}
.list-effects{display:grid;
  gap:4px;
  font-size:12px;
  overflow-wrap:anywhere}
.list-effects .positive{color:var(--acid)}
.list-effects .negative{color:var(--red)}
.mutation-list.size-small .mutation-list-item{padding:8px;
  gap:10px}
.mutation-list.size-small .list-art{width:38px;
  flex-basis:38px}
.mutation-list.size-small .specimen-svg{width:33px;
  height:42px}
.mutation-list.size-small .card-name{font-size:16px}
.mutation-list.size-small .list-effects>span{white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis}
.mutation-list.size-small .tags{display:none}
.mutation-list.size-medium .list-art{width:52px;
  flex-basis:52px}
.mutation-list.size-medium .specimen-svg{width:45px;
  height:55px}
.mutation-list.size-medium .card-name{font-size:19px}

.preview-art{height:52px;
  float:right;
  margin:0 0 6px 8px;
  color:var(--muted)}
.preview-art .specimen-svg{height:52px;
  width:48px}
.preview-art img{width:65px;
  height:52px;
  object-fit:cover;
  border-radius:4px}
.state-card::after{content:'';
  display:block;
  clear:both}

.state-grid.layout-stacked{grid-template-columns:1fr}
.state-grid.layout-stacked .state-card{display:grid;
  grid-template-columns:65px minmax(0,1fr);
  gap:3px 14px}
.state-grid.layout-stacked .state-label{grid-column:2;
  grid-row:1}
.state-grid.layout-stacked .state-card h3{grid-column:2;
  grid-row:2;
  margin:3px 0 6px}
.state-grid.layout-stacked .preview-art{grid-column:1;
  grid-row:1/span 5;
  float:none;
  margin:0;
  height:auto;
  display:flex;
  align-items:center}
.state-grid.layout-stacked .effect{grid-column:2}
.state-grid.layout-stacked .state-card::after{display:none}

.comparison-grid.layout-stacked{grid-template-columns:1fr}
.comparison-grid.layout-stacked .slot{display:grid;
  grid-template-columns:180px minmax(0,1fr)}
.comparison-grid.layout-stacked .slot-top,.comparison-grid.layout-stacked .slot-fields,.comparison-grid.layout-stacked .slot-footer{grid-column:1/-1}
.comparison-grid.layout-stacked .slot-fields{padding:10px 16px;
  grid-template-columns:minmax(200px,1fr) 160px}
.comparison-grid.layout-stacked .slot .card-art{grid-column:1;
  height:100%;
  min-height:150px;
  border-bottom:0}
.comparison-grid.layout-stacked .slot .state-card{grid-column:2;
  min-height:0;
  border-top:0;
  border-left:2px solid var(--state)}
.comparison-grid.layout-stacked .empty{grid-column:1/-1;
  min-height:140px}
.comparison-grid.layout-stacked .slot{transform:none!important}

.icon-picker{display:grid;
  grid-template-columns:repeat(auto-fill,minmax(72px,1fr));
  gap:7px;
  margin:10px 0}
.icon-choice{display:grid;
  justify-items:center;
  padding:8px 4px;
  font-size:11px;
  gap:4px;
  min-width:0}
.icon-choice .specimen-svg{height:52px;
  width:48px}
.icon-choice.active{background:#c0ee6c12;
  box-shadow:inset 0 0 0 1px var(--acid)}
.visual-picker{border-top:1px solid var(--line);
  padding-top:15px}
.image-controls{flex-wrap:wrap}






@media(min-width:801px){
 .library-section{align-self:start;
  min-width:0}
.variant-a .library-pane{max-height:max(720px,calc(100vh - 330px));
  overflow:auto;
  padding:2px 5px 2px 2px;
  scrollbar-width:thin;
  scrollbar-color:var(--line) var(--panel)}

 .variant-a .workspace-a>.adjustable-editor{position:static;
  display:grid;
  grid-template-rows:auto minmax(220px,1fr) max-content;
  min-width:0}

 .variant-a .workspace-a>.adjustable-editor>.panel-body{max-height:none;
  min-height:0;
  overflow:auto}
.variant-a .adjustable-editor>.preview-region{min-height:0;
  overflow:auto;
  scrollbar-width:thin;
  scrollbar-color:var(--line) var(--panel)}

 .state-grid.layout-columns{grid-template-columns:repeat(3,minmax(0,1fr))}

}

@media(max-width:800px){
.variant-a .workspace-a>.adjustable-editor{height:auto!important}
.variant-a .workspace-a>.adjustable-editor>.panel-body{max-height:none}
.library-controls{justify-content:flex-start}
.library-pane{max-height:480px}
.comparison-grid.layout-stacked .slot{grid-template-columns:85px minmax(0,1fr)}
.comparison-grid.layout-stacked .slot .card-art .specimen-svg{width:65px;
  height:85px}
.comparison-grid.layout-stacked .slot .state-card{padding:14px}
.comparison-grid.layout-stacked .slot .state-card h3{font-size:23px}
.comparison-grid.layout-stacked .slot-fields{grid-template-columns:1fr 110px}
.preview-heading{align-items:flex-start}
.state-grid.layout-columns{grid-template-columns:1fr}
.roller-layout-control{justify-content:flex-start}
}

/* Auto-fit reserves the complete preview's natural height;
   long copy grows the panel. */
@media(min-width:801px){
 .variant-a .workspace-a>.adjustable-editor{grid-template-rows:auto minmax(220px,1fr) max-content}

 .variant-a .adjustable-editor>.preview-region{overflow:visible}

 .comparison-grid.layout-stacked{gap:10px}

 .comparison-grid.layout-stacked .slot{grid-template-columns:100px minmax(0,1fr) 290px;
  grid-template-rows:auto auto 1fr}

 .comparison-grid.layout-stacked .slot .card-art{grid-column:1;
  grid-row:1/4;
  min-height:120px;
  border-top:0}

 .comparison-grid.layout-stacked .slot .card-art .specimen-svg{width:70px;
  height:90px}

 .comparison-grid.layout-stacked .slot .card-index{font-size:8px;
  left:8px;
  bottom:6px}

 .comparison-grid.layout-stacked .slot .state-card{grid-column:2;
  grid-row:1/4;
  padding:12px 18px}

 .comparison-grid.layout-stacked .slot .state-card h3{font-size:23px;
  margin:4px 0 7px}

 .comparison-grid.layout-stacked .slot .effect{font-size:13px;
  padding-top:3px}

 .comparison-grid.layout-stacked .slot .effect strong{display:inline;
  margin-right:6px}

 .comparison-grid.layout-stacked .slot .effect+.effect{margin-top:5px;
  padding-top:5px}

 .comparison-grid.layout-stacked .slot-top{grid-column:3;
  grid-row:1;
  padding:7px 10px;
  border-left:1px solid var(--line)}

 .comparison-grid.layout-stacked .slot-fields{grid-column:3;
  grid-row:2;
  grid-template-columns:minmax(0,1fr) 105px;
  padding:7px 10px;
  gap:6px;
  border-left:1px solid var(--line)}

 .comparison-grid.layout-stacked .slot-fields select{padding:6px;
  font-size:12px}

 .comparison-grid.layout-stacked .slot-footer{grid-column:3;
  grid-row:3;
  padding:7px 10px;
  font-size:10px;
  border-left:1px solid var(--line)}

 .comparison-grid.layout-stacked .slot.empty-slot .empty{grid-column:1/3;
  grid-row:1/4;
  min-height:120px;
  font-size:12px;
  padding:12px}

}

@media(max-width:800px){
 .comparison-grid.layout-stacked{gap:10px}

 .comparison-grid.layout-stacked .slot-top{padding:6px 10px}

 .comparison-grid.layout-stacked .slot-fields{padding:6px 10px}

 .comparison-grid.layout-stacked .slot .card-art{min-height:85px}

 .comparison-grid.layout-stacked .slot .state-card{padding:10px 12px}

 .comparison-grid.layout-stacked .slot .state-card h3{font-size:20px;
  margin:4px 0 7px}

 .comparison-grid.layout-stacked .slot .effect{font-size:12px;
  padding-top:4px}

 .comparison-grid.layout-stacked .slot-footer{padding:6px 10px}

}

/* Saved application controls and accessible file exchange dialogs. */
.page{padding-bottom:35px}.topbar{min-height:76px;height:auto;padding-block:14px;flex-wrap:wrap}.save-state{font:11px var(--mono);white-space:nowrap;color:var(--muted)}.save-state.saved{color:var(--acid)}.save-state.error{color:var(--red)}.storage-warning{padding:12px 32px;background:#61302355;color:var(--text);border-bottom:1px solid var(--red)}.storage-warning button{margin-left:10px}.welcome{padding:35px;max-width:900px;margin:35px auto;display:grid;gap:20px}.welcome .eyebrow{color:var(--acid)}.welcome p{max-width:650px;line-height:1.7}.card-shell{position:relative;min-width:0}.card-shell>.mutation-card{height:100%;width:100%}.bulk-checkbox{position:absolute;right:10px;top:10px;z-index:1;padding:3px;background:var(--panel);border-radius:3px;line-height:1}.bulk-checkbox input,.list-checkbox input,.check-line input{width:16px;height:16px;accent-color:var(--acid);margin:0;cursor:pointer}.list-shell{display:flex;gap:8px;align-items:center;min-width:0}.list-shell>.mutation-list-item{flex:1}.selection-tools{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:12px;font-size:11px;color:var(--muted)}.selection-tools>span{margin-right:auto}.editor-title>.row{max-width:55%;justify-content:flex-end}.danger{color:#ffc4bb;background:#702d26;border-color:#a94c41}.danger:hover{background:#863c31}.size-control select{width:auto}.list-art img{max-height:90px}.mutation-list.size-small .list-art img{height:42px}.mutation-list.size-medium .list-art img{height:60px}
dialog{color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:25px;width:min(1100px,calc(100vw - 32px));max-height:90vh;box-shadow:0 20px 90px #0009}dialog[open]{display:flex;flex-direction:column;gap:18px}dialog::backdrop{background:#080c09bc;backdrop-filter:blur(3px)}.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.dialog-heading h2{font-size:29px}.dialog-fields{max-width:600px}.dialog-actions{display:flex;justify-content:flex-end;align-items:center;gap:10px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:17px;margin-top:8px}.dialog-actions>span{margin-right:auto}.check-line{display:flex;align-items:center;gap:10px}.import-review{overflow:auto;min-height:0;padding-right:8px}.conflict{border:1px solid var(--line);border-radius:5px;padding:18px;margin:0 0 20px}.conflict-columns{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:15px 0}.conflict-columns article{background:var(--bg);padding:17px;min-width:0}.conflict-columns .eyebrow{color:var(--acid);margin-bottom:10px}.conflict-columns h3{font:24px var(--serif);overflow-wrap:anywhere}.conflict-columns dl{margin:12px 0}.conflict-columns dt{color:var(--muted);font-size:11px}.conflict-columns dd{margin:3px 0 0;font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere}.conflict-image{width:120px;height:100px;object-fit:contain;background:var(--raised)}[hidden]{display:none!important}.toast{bottom:24px}.preview-heading>.row{justify-content:flex-end}.editor-title h2{font-size:26px}.list-copy .card-name{display:block}.library-pane{scrollbar-gutter:stable}
@media(max-width:1100px){.topbar{gap:12px}.topbar>.row{margin-left:auto}.workspace-a{grid-template-columns:minmax(260px,.7fr) minmax(450px,1fr)}}
@media(max-width:800px){.workspace-a{grid-template-columns:1fr}.editor-title>.row{max-width:100%}.topbar>.row{margin-left:0}.conflict-columns{grid-template-columns:1fr}.dialog-heading h2{font-size:23px}.storage-warning{padding:12px 16px}.welcome{padding:22px}.preview-heading>.row{justify-content:flex-start}.list-shell{gap:5px}}
/* Compact state readouts retain full effect text and auto-fit naturally. */
.state-grid.layout-stacked { gap: 8px; }
.state-grid.layout-stacked .state-card {
  grid-template-columns: 44px minmax(0,1fr);
  gap: 2px 12px;
  padding: 10px 12px;
}
.state-grid.layout-stacked .state-card h3 {
  font-size: 19px;
  margin: 1px 0 4px;
}
.state-grid.layout-stacked .preview-art .specimen-svg { width: 38px; height: 44px; }
.state-grid.layout-stacked .preview-art img { width: 44px; height: 44px; }
.state-grid.layout-stacked .effect { padding-top: 2px; line-height: 1.45; }
.state-grid.layout-stacked .effect strong { display: inline; margin-right: 5px; }
.state-grid.layout-stacked .effect + .effect { margin-top: 3px; padding-top: 4px; }
/* Keep side-by-side artwork in the heading, clear of full-width effect copy. */
.state-grid.layout-columns .state-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  column-gap: 10px;
  align-content: start;
}
.state-grid.layout-columns .state-label { grid-column: 1; grid-row: 1; }
.state-grid.layout-columns .state-card h3 { grid-column: 1; grid-row: 2; }
.state-grid.layout-columns .preview-art {
  grid-column: 2;
  grid-row: 1 / span 2;
  float: none;
  margin: 0;
  align-self: start;
  justify-self: end;
}
.state-grid.layout-columns .preview-art img { width: 48px; height: 52px; object-fit: contain; }
.state-grid.layout-columns .effect { grid-column: 1 / -1; }
.state-grid.layout-columns .state-card::after { display: none; }