.ev2{--ev2-accent:var(--accent,#dca85e);--ev2-ink:var(--bone,#f5efe5);--ev2-muted:color-mix(in srgb,var(--ev2-ink) 66%,transparent);max-width:1180px;margin:clamp(28px,6vw,72px) auto;padding:clamp(18px,3vw,34px);color:var(--ev2-ink);border:1px solid color-mix(in srgb,var(--ev2-accent) 38%,transparent);border-radius:20px;background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(0,0,0,.24)),#111410;box-shadow:0 30px 80px rgba(0,0,0,.32);box-sizing:border-box;font-family:inherit}
.ev2 *{box-sizing:border-box}.ev2-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:24px}.ev2-kicker{font:700 11px/1.3 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.16em;color:var(--ev2-accent)}.ev2-title{margin:7px 0 6px;font-size:clamp(26px,4vw,44px);line-height:1}.ev2-lede{max-width:760px;margin:0;color:var(--ev2-muted);line-height:1.55}.ev2-live{flex:none;padding:8px 10px;border:1px solid rgba(106,211,142,.5);border-radius:999px;color:#9be6b4;background:rgba(62,157,94,.12);font:700 10px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.11em}.ev2-grid{display:grid;grid-template-columns:minmax(230px,.72fr) minmax(0,1.55fr);gap:clamp(20px,4vw,44px)}.ev2-preview{min-width:0}.ev2-pattern-frame{position:relative;aspect-ratio:1;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:linear-gradient(45deg,rgba(255,255,255,.025) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.025) 75%),linear-gradient(45deg,rgba(255,255,255,.025) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.025) 75%),#080a08;background-position:0 0,10px 10px;background-size:20px 20px}.ev2-pattern-frame.is-loading:before{content:'Composing bounded UV preview…';position:absolute;inset:0;display:grid;place-items:center;padding:20px;text-align:center;color:var(--ev2-muted)}.ev2-pattern-frame .ev2-preview-media{width:100%;height:100%;display:block;object-fit:contain;image-rendering:auto}.ev2-pattern-frame canvas.ev2-preview-media{background:transparent}.ev2-pattern-frame.is-missing:before{content:'Pattern texture unavailable';position:absolute;inset:0;display:grid;place-items:center;padding:20px;text-align:center;color:var(--ev2-muted)}.ev2-pattern-stamp{position:absolute;z-index:1;left:12px;bottom:12px;max-width:calc(100% - 24px);padding:7px 9px;border-radius:8px;background:rgba(0,0,0,.72);font:700 10px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.09em}.ev2-preview-note{margin:12px 2px 0;color:var(--ev2-muted);font-size:12px;line-height:1.5}.ev2-form{min-width:0}.ev2-selectors{display:grid;grid-template-columns:1.2fr 1.2fr .7fr;gap:10px}.ev2-field{display:grid;gap:6px}.ev2-field-label{font:700 10px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.13em;text-transform:uppercase;color:var(--ev2-muted)}.ev2-select,.ev2-hex,.ev2-code{width:100%;border:1px solid rgba(255,255,255,.16);border-radius:9px;background:rgba(0,0,0,.26);color:var(--ev2-ink);font:inherit}.ev2-select{height:42px;padding:0 10px}.ev2-themes{margin-top:17px}.ev2-theme-buttons{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}.ev2-chip,.ev2-button{border:1px solid rgba(255,255,255,.18);border-radius:9px;background:rgba(255,255,255,.055);color:var(--ev2-ink);font:700 11px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.07em;cursor:pointer}.ev2-chip{padding:9px 12px}.ev2-chip.is-on{border-color:var(--ev2-accent);background:color-mix(in srgb,var(--ev2-accent) 17%,transparent)}.ev2-colors{display:grid;gap:10px;margin-top:18px}.ev2-color-row{padding:12px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(255,255,255,.025)}.ev2-color-row.is-advanced{border-color:color-mix(in srgb,var(--ev2-accent) 30%,transparent)}.ev2-color-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}.ev2-color-title strong{font-size:13px}.ev2-preview-ok,.ev2-preview-unavailable{font:600 9px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.05em;text-transform:uppercase}.ev2-preview-ok{color:#9be6b4}.ev2-preview-unavailable{color:#e4c58e}.ev2-color-controls{display:grid;grid-template-columns:44px 104px;gap:8px;align-items:center}.ev2-picker{width:44px;height:36px;padding:2px;border:1px solid rgba(255,255,255,.18);border-radius:8px;background:transparent;cursor:pointer}.ev2-hex{height:36px;padding:0 9px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;text-transform:uppercase}.ev2-swatches{display:flex;gap:5px;overflow-x:auto;padding:9px 0 2px;scrollbar-width:thin}.ev2-swatch{flex:0 0 24px;width:24px;height:24px;border:1px solid rgba(255,255,255,.26);border-radius:50%;background:var(--ev2-swatch);cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}.ev2-swatch:focus-visible,.ev2-chip:focus-visible,.ev2-button:focus-visible,.ev2-select:focus-visible,.ev2-code:focus-visible,.ev2-hex:focus-visible{outline:2px solid var(--ev2-accent);outline-offset:2px}.ev2-tools{margin-top:18px;padding-top:18px;border-top:1px solid rgba(255,255,255,.1)}.ev2-code{min-height:68px;padding:10px;resize:vertical;font:11px/1.45 ui-monospace,SFMono-Regular,Consolas,monospace}.ev2-tool-buttons{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px}.ev2-button{min-height:40px;padding:0 14px}.ev2-button:disabled{opacity:.5;cursor:wait}.ev2-primary{border-color:var(--ev2-accent);background:color-mix(in srgb,var(--ev2-accent) 20%,#111)}.ev2-secondary:hover,.ev2-chip:hover{border-color:color-mix(in srgb,var(--ev2-accent) 70%,transparent)}.ev2-status{min-height:20px;margin:12px 0 0;color:var(--ev2-muted);font-size:12px;line-height:1.5}.ev2-status.is-error{color:#ffaaa5}
@media(max-width:760px){.ev2{margin:20px 12px;padding:18px;border-radius:15px}.ev2-head{display:block}.ev2-live{display:inline-block;margin-top:13px}.ev2-grid{grid-template-columns:1fr}.ev2-preview{max-width:360px}.ev2-selectors{grid-template-columns:1fr 1fr}.ev2-selectors .ev2-field:last-child{grid-column:1/-1}.ev2-tool-buttons{display:grid;grid-template-columns:1fr 1fr}.ev2-button{width:100%}}
@media(max-width:420px){.ev2-selectors,.ev2-tool-buttons{grid-template-columns:1fr}.ev2-selectors .ev2-field:last-child{grid-column:auto}.ev2-color-title{align-items:flex-start;flex-direction:column}.ev2-color-controls{grid-template-columns:44px 1fr}}
@media(prefers-reduced-motion:reduce){.ev2 *{scroll-behavior:auto!important;transition:none!important}}
[data-skin-creator],[data-evrima-skin-v2-root]{container-type:inline-size}
@container (max-width:760px){.ev2{margin:20px 12px;padding:18px;border-radius:15px}.ev2-head{display:block}.ev2-live{display:inline-block;margin-top:13px}.ev2-grid{grid-template-columns:1fr}.ev2-preview{max-width:360px}.ev2-selectors{grid-template-columns:1fr 1fr}.ev2-selectors .ev2-field:last-child{grid-column:1/-1}.ev2-tool-buttons{display:grid;grid-template-columns:1fr 1fr}.ev2-button{width:100%}}
@container (max-width:420px){.ev2-selectors,.ev2-tool-buttons{grid-template-columns:1fr}.ev2-selectors .ev2-field:last-child{grid-column:auto}.ev2-color-title{align-items:flex-start;flex-direction:column}.ev2-color-controls{grid-template-columns:44px 1fr}}
/* 2026-08-25 NARROW-RAIL FIT. `.ev2-colors` had no explicit track, so its implicit
   `auto` column sized to its own min-content - measured 645px - and the whole card
   
   
   track cannot go below min-content; `minmax(0,1fr)` can. The swatch strip already
   scrolls itself (`.ev2-swatches{overflow-x:auto}`), so no control is lost. Proven
   INERT at full width: every measured box identical at a 1180px host. */
@container (max-width:760px){.ev2-colors{grid-template-columns:minmax(0,1fr)}.ev2-color-row{min-width:0}.ev2-swatches{min-width:0}}
@container (max-width:420px){.ev2-color-controls{grid-template-columns:44px minmax(0,1fr)}}
/* 2026-08-25 THE CONTAINER WHERE THERE IS NONE. `advanced-v2.mjs` chooses its
   mount with ONE `querySelector('[data-evrima-skin-v2-root], [data-skin-creator],
   main, .page, #app')`, and a selector LIST returns the first match in DOCUMENT
   
   
   panel lands in `main` - which carries no `container-type`, and EVERY
   `@container` rule in this file, the 08-25 narrow-rail block included, is
   silently inert there. Measured 2026-08-25 in real Chromium: 503px of card
   inside a 368px page at a 394px viewport, with no rule able to fire.
   This gives the panel its own query container ONLY when its parent is one of
   the module's FALLBACK mounts, so an owner whose panel already sits inside
   `[data-evrima-skin-v2-root]` matches nothing here and is not touched. */
:where(main,.page,#app,body)>#evrima-advanced-v2{container-type:inline-size}
