@layer theme,base;@layer components{.trial{background:var(--bg-canvas);min-height:100dvh;color:var(--text);font-family:var(--font-ui);grid-template-rows:auto auto 1fr;display:grid}.trial-head{justify-content:space-between;align-items:center;gap:var(--space-4);padding:var(--space-3) var(--gutter);border-bottom:1px solid var(--rule);background:var(--bg-surface);display:flex}.trial-home{border-radius:var(--radius-pill);color:var(--text-strong)}.trial-switch{padding:var(--space-3) var(--gutter) 0;justify-content:center;display:flex}.trial-body{min-height:0;display:grid}.trial-panel{align-content:start;gap:var(--space-4);padding:var(--space-5) var(--gutter) var(--space-10);display:grid}.trial-form,.trial-names{gap:var(--space-4);display:grid}.trial-accents{gap:var(--space-2);border:0;flex-wrap:wrap;margin:0;padding:0;display:flex}.trial-accents legend{margin-bottom:var(--space-2)}.trial-accent{width:var(--control-h);height:var(--control-h);border-radius:var(--radius-pill);cursor:pointer;border:2px solid #0000;place-items:center;display:grid;position:relative}.trial-accent input{opacity:0;cursor:pointer;margin:0;position:absolute;inset:0}.trial-swatch{aspect-ratio:1;border:1px solid var(--rule);border-radius:var(--radius-pill);width:70%}.trial-accent:has(input:checked){border-color:var(--text-strong)}.trial-accent:has(input:focus-visible){outline:2px solid var(--ring-focus);outline-offset:2px}.trial-templates{align-items:flex-start;gap:var(--space-2);border:0;flex-direction:column;margin:0;padding:0;display:flex}.trial-templates legend{margin-bottom:var(--space-2)}.trial-template-list{gap:var(--space-3);grid-template-columns:repeat(auto-fill,minmax(96px,1fr));width:100%;display:grid}.trial-template{gap:var(--space-1);cursor:pointer;display:grid;position:relative}.trial-template input{opacity:0;cursor:pointer;margin:0;position:absolute;inset:0}.trial-template img{aspect-ratio:3/4;object-fit:cover;border-radius:var(--radius-field);background:var(--bg-sunken);width:100%;height:auto;display:block}.trial-template:has(input:checked) img{outline:2px solid var(--text-strong);outline-offset:2px}.trial-template:has(input:focus-visible) img{outline:2px solid var(--ring-focus);outline-offset:3px}.trial-template-name{font:600 var(--type-sm) / 1.3 var(--font-ui);color:var(--text-strong)}.trial-preview{min-height:0;padding:var(--space-3) var(--gutter) var(--space-4);grid-template-rows:auto 1fr;display:grid;position:relative}.trial-updating{min-height:var(--space-6);margin:0}.trial-frame{border:1px solid var(--rule);border-radius:var(--radius-surface);background:var(--bg-surface);width:100%;height:100%;min-height:70dvh}.trial[data-view=settings] .trial-preview,.trial[data-view=preview] .trial-panel{display:none}@media (min-width:768px){.trial-names{grid-template-columns:1fr 1fr}}@media (min-width:1024px){.trial{grid-template-rows:auto 1fr;height:100dvh}.trial-switch{display:none}.trial-body{grid-template-columns:minmax(22rem,26rem) minmax(0,1fr);overflow:hidden}.trial[data-view] .trial-panel,.trial[data-view] .trial-preview{display:grid}.trial-panel{border-right:1px solid var(--rule);background:var(--bg-surface);overflow-y:auto}.trial-names{grid-template-columns:1fr}.trial-frame{min-height:0}}@media (min-width:1440px){.trial-body{grid-template-columns:28rem minmax(0,1fr)}}}@layer utilities;