* {
box-sizing:border-box}
html {
color-scheme:dark}
body {
margin:0;
background:var(--canvas);
color:var(--ink);
font-family:var(--sans);
font-size:14px}
button,input,select {
font:inherit}
button,a,input,select {
touch-action:manipulation}
button {
cursor:pointer;
border:1px solid var(--line);
border-radius:var(--radius);
color:inherit;
background:transparent;
min-height:var(--control-height);
transition:background var(--dur-fast),border-color var(--dur-fast)}
button:hover {
background:var(--surface-hover);
border-color:var(--line-strong)}
button:disabled {
opacity:.4;
cursor:default}
a {
color:inherit;
text-decoration:none}
a:hover {
color:var(--accent)}
:focus-visible {
outline:2px solid var(--accent);
outline-offset:3px}
button svg {
pointer-events:none}
[hidden] {
display:none!important}
.coral {
color:var(--accent)}
.micro,.section-label,.topbar-label,.version,.original-link,.canvas-meta,.studio-footer,.rail-footnote {
font-family:var(--mono);
font-size:10px;
letter-spacing:.055em}
.topbar {
height:var(--bar-height);
display:flex;
align-items:center;
justify-content:space-between;
padding:0 var(--space-lg);
border-bottom:1px solid var(--line);
gap:var(--space-lg)}
.brand {
display:flex;
align-items:center;
gap:12px;
font-family:var(--mono);
font-size:14px;
font-weight:600;
letter-spacing:-.02em}
.brand svg {
width:28px;
height:28px;
color:var(--accent)}
.topbar-label {
color:var(--muted)}
.topbar-label span {
padding:0 12px;
color:var(--soft)}
.topbar-right {
display:flex;
align-items:center;
gap:24px}
.version {
color:var(--soft)}
.original-link {
color:var(--muted);
padding:12px 0}
.workspace {
display:grid;
grid-template-columns:var(--rail-width) minmax(0,1fr);
min-height:calc(100vh - var(--bar-height))}
.rail {
border-right:1px solid var(--line);
padding:28px 22px 16px;
display:flex;
flex-direction:column}
.rail-heading h1 {
font-family:var(--display);
font-weight:400;
font-size:46px;
line-height:1.02;
letter-spacing:-2px;
margin:0 0 12px}
.rail-heading p {
color:var(--muted);
font-size:12px;
margin:0 0 30px}
.section-label {
display:flex;
justify-content:space-between;
align-items:center;
color:var(--muted);
margin-bottom:12px}
.preset-grid {
display:grid;
grid-template-columns:1fr 1fr;
gap:8px}
.preset {
padding:0;
text-align:left;
border:1px solid var(--line);
overflow:hidden}
.preset[aria-pressed=true] {
border-color:var(--accent)}
.preset canvas {
width:100%;
height:56px;
display:block;
pointer-events:none}
.preset span {
display:block;
font-family:var(--mono);
font-size:10px;
padding:9px 8px;
border-top:1px solid var(--line);
white-space:nowrap}
.preset[aria-pressed=true] span {
color:var(--accent)}
.control-tabs {
display:flex;
border-bottom:1px solid var(--line);
margin:24px -22px 20px;
padding:0 16px;
gap:2px}
.control-tabs button {
border:0;
border-bottom:2px solid transparent;
flex:1;
font-family:var(--mono);
font-size:10px;
min-height:42px}
.control-tabs button[aria-selected=true] {
border-bottom-color:var(--accent);
color:var(--ink)}
.control-tabs button[aria-selected=false] {
color:var(--muted)}
.control-panel {
min-height:293px}
.field {
margin-bottom:18px}
.field label {
display:flex;
justify-content:space-between;
gap:12px;
align-items:center;
margin-bottom:10px;
font-size:12px}
.field output {
color:var(--accent);
font:11px var(--mono)}
input[type=range] {
width:100%;
height:20px;
margin:0;
accent-color:var(--accent);
cursor:pointer;
appearance:none;
background:transparent}
input[type=range]::-webkit-slider-runnable-track {
height:2px;
background:var(--line-strong)}
input[type=range]::-webkit-slider-thumb {
appearance:none;
width:11px;
height:16px;
background:var(--accent);
margin-top:-7px;
border:2px solid var(--canvas);
box-shadow:0 0 0 1px var(--accent)}
input[type=range]::-moz-range-track {
height:2px;
background:var(--line-strong)}
input[type=range]::-moz-range-thumb {
height:14px;
width:8px;
border-radius:0;
background:var(--accent);
border:2px solid var(--canvas)}
.field-note {
font-size:10px;
color:var(--muted);
line-height:1.5;
margin:7px 0 0}
.seed-field {
display:grid;
grid-template-columns:1fr 98px;
gap:8px;
align-items:center}
.seed-field label {
margin:0}
.seed-field .field-note {
grid-column:1/-1;
margin:0}
input[type=number],select {
width:100%;
min-height:36px;
border:1px solid var(--line-strong);
border-radius:0;
padding:8px 10px;
background:var(--surface);
color:var(--ink);
font:11px var(--mono)}
.rail-actions {
margin-top:auto;
padding-top:24px}
.primary-button,.secondary-button {
padding:0 14px;
font:11px var(--mono);
display:inline-flex;
align-items:center;
justify-content:space-between;
gap:20px;
min-height:40px}
.primary-button {
background:var(--accent);
color:var(--canvas);
border-color:var(--accent);
font-weight:600}
.primary-button:hover {
background:var(--ink);
border-color:var(--ink)}
.secondary-button {
border-color:var(--line-strong)}
.full-width {
width:100%}
.rail-footnote {
color:var(--soft);
text-align:center;
font-size:9px;
margin:12px 0 0}
.studio {
min-width:0;
display:flex;
flex-direction:column}
.workspace-bar {
min-height:72px;
display:flex;
align-items:center;
justify-content:space-between;
padding:12px 30px;
border-bottom:1px solid var(--line);
gap:16px}
.workspace-bar>div:first-child {
display:flex;
align-items:center;
gap:20px}
.scene-name {
font-family:var(--mono);
font-size:11px}
.workspace-actions {
display:flex;
align-items:center;
gap:16px}
.icon-text,.text-button {
border:0;
min-height:40px;
font:10px var(--mono);
padding:0 8px}
.icon-text {
color:var(--muted)}
.canvas-zone {
padding:20px 30px 12px;
flex:1;
min-height:460px;
display:flex;
flex-direction:column;
justify-content:center}
.canvas-meta {
display:flex;
justify-content:space-between;
gap:12px;
color:var(--soft);
padding-bottom:12px}
.artwork-wrap {
position:relative;
min-height:0;
width:100%;
margin:auto;
display:flex;
align-items:center;
justify-content:center}
.artwork-wrap canvas {
display:block;
max-width:100%;
width:100%;
background:var(--canvas);
touch-action:none;
cursor:grab}
.artwork-wrap canvas:active {
cursor:grabbing}
.registration {
position:absolute;
color:var(--soft);
font:14px var(--mono);
pointer-events:none;
line-height:1}
.top-left {
top:0;
left:0}
.top-right {
top:0;
right:0}
.bottom-left {
bottom:0;
left:0}
.bottom-right {
bottom:0;
right:0}
.canvas-toolbar {
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
margin-top:12px}
.view-switch {
display:flex}
.view-switch button {
font:10px var(--mono);
min-height:32px;
padding:0 14px}
.view-switch button+button {
border-left:0}
.view-switch [aria-pressed=true] {
background:var(--ink);
color:var(--canvas);
border-color:var(--ink)}
.camera-tools {
display:flex;
align-items:center}
.camera-tools button {
min-height:32px;
width:32px;
border:0;
font-size:18px}
.camera-tools span {
font:10px var(--mono);
color:var(--muted);
min-width:54px;
text-align:center}
.canvas-toolbar .text-button {
color:var(--muted);
min-height:32px}
.variations {
border-top:1px solid var(--line);
padding:20px 30px}
.variations-head {
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
margin-bottom:14px}
.variations-head h2 {
font-size:13px;
font-weight:400;
margin:0}
.variations-head h2 span {
font:10px var(--mono);
color:var(--soft);
margin-left:10px}
.variations-head>div {
display:flex;
gap:12px}
.variant-list {
display:flex;
gap:12px;
overflow-x:auto;
padding:2px 2px 6px;
min-height:86px}
.empty-variants {
font-size:12px;
line-height:1.7;
margin:6px 0;
color:var(--muted)}
.empty-variants span {
color:var(--soft);
font-size:11px}
.variant {
position:relative;
min-width:138px;
max-width:138px;
border:1px solid var(--line);
background:var(--surface);
flex:none}
.variant-restore {
display:block;
padding:0;
border:0;
width:100%;
text-align:left}
.variant canvas {
display:block;
width:100%;
height:65px;
pointer-events:none}
.variant-name {
display:block;
font:10px var(--mono);
padding:8px 28px 8px 8px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap}
.variant-remove {
position:absolute;
bottom:0;
right:0;
width:28px;
min-height:28px;
border:0;
color:var(--muted);
padding:0}
.studio-footer {
border-top:1px solid var(--line);
padding:14px 30px;
color:var(--soft);
display:flex;
justify-content:space-between;
gap:20px;
font-size:9px}
.palettes {
display:flex;
flex-direction:column;
gap:6px;
margin-bottom:20px}
.palette {
display:flex;
align-items:center;
justify-content:space-between;
padding:0 9px;
font-size:11px;
min-height:36px}
.palette[aria-pressed=true] {
border-color:var(--accent)}
.swatches {
display:flex;
gap:3px}
.swatches i {
width:15px;
height:15px;
display:block}
.checkbox {
display:flex;
align-items:center;
gap:8px;
min-height:34px;
font-size:12px}
.checkbox input {
accent-color:var(--accent);
width:16px;
height:16px}
.color-fields {
display:flex;
justify-content:space-between;
gap:12px;
margin-top:16px}
.color-fields label {
font-size:10px;
color:var(--muted);
display:flex;
align-items:center;
gap:8px}
.color-fields input {
width:32px;
height:32px;
padding:0;
border:0;
background:transparent;
cursor:pointer}
.toast {
position:fixed;
bottom:24px;
left:50%;
transform:translate(-50%,12px);
opacity:0;
background:var(--ink);
color:var(--canvas);
padding:14px 20px;
max-width:calc(100vw - 32px);
font:11px var(--mono);
z-index:10;
pointer-events:none;
transition:opacity var(--dur-base),transform var(--dur-base)}
.toast.visible {
opacity:1;
transform:translate(-50%,0)}
dialog {
background:var(--surface);
color:var(--ink);
border:1px solid var(--line-strong);
padding:0;
width:440px;
max-width:calc(100vw - 28px);
max-height:calc(100dvh - 28px)}
dialog::backdrop {
background:#000000bf;
backdrop-filter:blur(5px)}
.dialog-heading {
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
padding:24px;
border-bottom:1px solid var(--line)}
.dialog-heading p {
margin:0 0 8px}
.dialog-heading h2 {
font:28px var(--display);
margin:0;
letter-spacing:-1px}
.close-dialog {
width:36px;
min-height:36px;
font-size:22px}
.dialog-body {
padding:20px 24px 24px}
.dialog-body>p:first-child {
color:var(--muted);
font-size:12px;
line-height:1.6;
margin:0 0 16px}
.export-preview {
height:145px;
display:flex;
justify-content:center;
align-items:center;
margin-bottom:18px;
background:repeating-conic-gradient(#191919 0% 25%,#272727 0% 50%) 50%/16px 16px}
.export-preview canvas {
height:100%;
max-width:100%;
object-fit:contain}
.export-fields {
display:grid;
grid-template-columns:1fr 1fr;
gap:16px}
.dialog-body .full-width {
margin-top:18px}
.compare-dialog {
width:900px}
.compare-grid {
display:grid;
grid-template-columns:1fr 1fr;
gap:24px;
padding:24px}
.compare-grid label {
font:11px var(--mono);
display:block;
margin-bottom:8px}
.compare-grid canvas {
width:100%;
display:block;
margin:16px 0;
background:var(--canvas)}
.compare-grid select {
width:100%}
noscript {
position:fixed;
top:80px;
left:30px;
background:var(--accent);
color:var(--canvas);
padding:12px}

@media(min-width:1500px) {
.canvas-zone {
padding-inline:48px}
.workspace-bar,.variations,.studio-footer {
padding-inline:48px}
.rail {
padding-top:36px}
.rail-heading h1 {
font-size:52px}
}

@media(max-width:1000px) {
:root {
--rail-width:250px}
.rail {
padding-inline:18px}
.control-tabs {
margin-inline:-18px}
.workspace-bar,.canvas-zone,.variations,.studio-footer {
padding-inline:20px}
.workspace-bar>div:first-child {
gap:12px}
.workspace-bar .micro {
display:none}
.studio-footer {
font-size:8px}
.canvas-toolbar {
gap:8px}
.canvas-toolbar .text-button {
font-size:9px}
}

@media(max-width:680px) {
:root {
--bar-height:56px}
.topbar {
padding:0 16px;
gap:8px}
.brand {
font-size:11px;
gap:8px}
.brand svg {
width:23px;
height:23px}
.topbar-label,.version {
display:none}
.original-link {
font-size:10px}
.workspace {
display:flex;
flex-direction:column}
.studio {
order:0}
.rail {
order:1;
border-right:0;
border-top:1px solid var(--line);
padding:24px 20px}
.rail-heading h1 {
font-size:40px;
line-height:1;
letter-spacing:-1px}
.rail-heading h1 br {
display:none}
.rail-heading p {
margin-bottom:22px}
.preset canvas {
height:70px}
.preset-grid {
grid-template-columns:repeat(4,1fr)}
.preset span {
font-size:8px;
padding:8px 5px}
.control-panel {
min-height:0}
.control-tabs {
margin-inline:-20px}
.control-tabs button {
font-size:12px}
.field {
margin-bottom:20px}
.field label {
font-size:13px}
.field-note {
font-size:11px}
.rail-actions {
padding-top:20px}
.workspace-bar {
min-height:64px;
padding:10px 16px;
gap:8px}
.scene-name {
font-size:10px}
.workspace-actions {
gap:6px}
.primary-button {
gap:10px;
padding-inline:12px}
.icon-text {
font-size:9px;
padding-inline:6px}
.canvas-zone {
min-height:0;
padding:14px 16px 12px}
.canvas-meta {
font-size:8px}
.canvas-toolbar {
gap:4px;
flex-wrap:wrap}
.canvas-toolbar .text-button {
font-size:8px;
padding:0 4px}
.view-switch button {
padding:0 9px}
.camera-tools span {
min-width:40px;
font-size:9px}
.camera-tools button {
width:28px}
.variations {
padding:18px 16px}
.variations-head {
gap:8px}
.variations-head>div {
gap:4px}
.variations-head .secondary-button {
font-size:9px;
padding-inline:10px;
gap:4px}
.variations-head .text-button {
font-size:9px}
.variant-list {
min-height:70px}
.empty-variants {
font-size:11px}
.studio-footer {
padding:12px 16px}
.studio-footer>span:first-child {
display:none}
.compare-grid {
grid-template-columns:1fr;
gap:20px;
padding:18px}
.dialog-heading {
padding:20px}
.dialog-heading h2 {
font-size:24px}
.dialog-body {
padding:18px}
.color-fields label {
font-size:12px}
.palettes .palette {
min-height:42px}
}

@media(min-width:681px) and (max-height:1000px) {
.rail {
padding-top:22px}
.rail-heading h1 {
font-size:42px}
.rail-heading p {
margin-bottom:22px}
.preset canvas {
height:48px}
.control-tabs {
margin-top:20px;
margin-bottom:16px}
.field {
margin-bottom:14px}
.field label {
margin-bottom:8px}
.rail-actions {
padding-top:16px}
}

.variant canvas {
object-fit:contain;
background:var(--canvas)}
.variant-name {
padding-right:44px;
min-height:40px;
display:flex;
align-items:center}
.compare-grid canvas {
height:320px;
object-fit:contain;
background:var(--canvas)}

.camera-tools button,.view-switch button,.canvas-toolbar .text-button,.variant-remove,.close-dialog,.palette {
min-height:var(--control-height);
min-width:var(--control-height)}
.camera-tools button,.variant-remove,.close-dialog {
width:var(--control-height)}
input[type=number],select,.checkbox {
min-height:var(--control-height)}
.color-fields input {
width:var(--control-height);
height:var(--control-height)}
input[type=range] {
height:var(--control-height);
display:block;
margin-top:-8px;
margin-bottom:-12px}
.variant-remove {
height:var(--control-height)}

@media(max-width:680px) {
#clear-selection:disabled {
display:none}
.compare-grid canvas {
height:300px}
.camera-tools button {
width:var(--control-height)}
}

.lab-mark{display:block;width:var(--control-height);height:var(--control-height);background:var(--accent);mask:url(/generators/brand-mark.png) center/contain no-repeat;-webkit-mask:url(/generators/brand-mark.png) center/contain no-repeat}