:root { --studio-bg: #090d0b; --studio-panel: #0d1310; --studio-line: #303933; --studio-fg: #eeeae2; --studio-muted: #999b92; --studio-accent: #e58b4c; --studio-green: #8fcf91; }
.studio-body { background: var(--studio-bg); color: var(--studio-fg); min-height: 100vh; }
.studio-nav { background: rgba(9, 13, 11, .92); border-color: var(--studio-line); }
.studio-nav .nav-links a { color: var(--studio-muted); }.studio-nav .nav-links a[aria-current] { color: var(--studio-fg); }
.studio-shell { max-width: 1540px; margin: 0 auto; padding: 2.25rem; display: grid; grid-template-columns: 260px minmax(0, 1fr) 270px; gap: 1.25rem; align-items: start; }
.studio-panel, .direction-panel, .artboard-section { border: 1px solid var(--studio-line); background: var(--studio-panel); border-radius: 7px; }
.studio-sidebar, .studio-inspector { display: grid; gap: 1.25rem; }.studio-panel { padding: 1.15rem; }.panel-label { color: var(--studio-muted); font-family: var(--mono); font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; margin-bottom: .65rem; }.mono { font-family: var(--mono); font-size: .74rem; }.muted, .quiet { color: var(--studio-muted); }.quiet { font-size: .77rem; line-height: 1.5; }.status { float: right; color: var(--studio-muted); font-size: .68rem; letter-spacing: 0; text-transform: none; }.status i { display: inline-block; width: .42rem; height: .42rem; border-radius: 50%; background: var(--studio-green); margin-right: .28rem; }
.reference-actions, .section-row, .dialog-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }.button, .text-button, .icon-button, .agent-switch button, .format-list button, .layer, .motion-grid button { font: inherit; color: inherit; cursor: pointer; }.button { min-height: 2.5rem; padding: .55rem .8rem; border: 1px solid #687068; background: transparent; border-radius: 6px; text-align: center; font-size: .76rem; }.button.primary { background: var(--studio-accent); color: #21130a; border-color: var(--studio-accent); font-weight: 700; }.icon-button { width: 2.5rem; height: 2.5rem; border: 1px solid #687068; border-radius: 6px; background: transparent; font-size: 1.35rem; line-height: 1; }.icon-button.accent { border-color: #99552c; color: var(--studio-accent); }.text-button { color: var(--studio-muted); border: 0; padding: .35rem 0; background: transparent; font-family: var(--mono); font-size: .68rem; }.text-button:hover { color: var(--studio-fg); }.reference-list { display: grid; gap: .5rem; margin-top: .8rem; }.reference { min-height: 3.1rem; display: grid; grid-template-columns: 2.35rem minmax(0, 1fr) 1.75rem; align-items: center; gap: .55rem; padding: .35rem; border: 1px solid var(--studio-line); border-radius: 4px; font-size: .74rem; }.reference img { width: 2.35rem; height: 2.35rem; object-fit: cover; border-radius: 2px; }.reference span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.reference button { border: 0; background: transparent; color: #e7b7b4; font-size: 1.25rem; cursor: pointer; }
.agent-switch { display: grid; gap: .35rem; }.agent-switch button, .format-list button { text-align: left; background: transparent; border: 1px solid transparent; padding: .55rem .6rem; border-radius: 4px; font-size: .79rem; }.agent-switch button.is-active, .format-list button.is-active { border-color: #87512e; color: var(--studio-fg); background: #1a1612; }.agent-switch span { color: var(--studio-muted); float: right; font-family: var(--mono); font-size: .65rem; }.model-panel label { display: grid; grid-template-columns: 1fr 1.5fr 2rem; align-items: center; gap: .45rem; margin-top: 1rem; color: var(--studio-muted); font-size: .76rem; }.model-panel input { accent-color: #e8e8c5; width: 100%; }.model-panel output { color: #f0d9db; text-align: right; font-family: var(--mono); }.generate-button { margin-top: .55rem; color: var(--studio-accent); }
.studio-workspace { min-width: 0; display: grid; gap: 1.25rem; }.studio-heading { min-height: 8.5rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 1rem 1.5rem; border-bottom: 1px solid var(--studio-line); }.studio-heading .eyebrow { margin: 0 0 .45rem; color: var(--studio-muted); }.studio-heading h1 { margin: 0; font-size: clamp(2rem, 4vw, 3.45rem); line-height: .94; font-weight: 560; }.studio-heading h1 span { font-weight: 300; }.heading-actions { display: flex; gap: .65rem; }.direction-panel { padding: 1.15rem; }.direction-panel label { display: block; margin-bottom: .55rem; font-family: var(--mono); font-size: .72rem; color: var(--studio-muted); }.direction-panel textarea { resize: vertical; width: 100%; background: #111814; border: 1px solid #3f4943; border-radius: 5px; padding: .75rem; color: var(--studio-fg); font: .86rem var(--mono); }.director-note { margin-top: .9rem; color: var(--studio-muted); font-size: .78rem; }.director-note span { color: var(--studio-accent); font-family: var(--mono); font-size: .67rem; margin-right: .5rem; }.artboard-section { overflow: hidden; }.section-row { padding: .9rem 1.15rem; border-bottom: 1px solid var(--studio-line); }.section-row .panel-label { margin: 0; }.format-list { display: flex; flex-wrap: wrap; gap: .25rem; padding: .7rem 1.15rem; }.format-list button { border-color: var(--studio-line); font-family: var(--mono); font-size: .65rem; }.artboard { position: relative; aspect-ratio: 1.35; margin: 0 1.15rem 1.15rem; overflow: hidden; background: #dae0d4; color: #152017; transition: transform .6s ease, filter .6s ease; }.artboard-grid { position: absolute; inset: 0; opacity: .24; background-image: linear-gradient(#1b271f 1px, transparent 1px), linear-gradient(90deg, #1b271f 1px, transparent 1px); background-size: 12% 12%; }.artboard-content { position: relative; z-index: 1; max-width: 67%; padding: clamp(1.25rem, 5vw, 3.5rem); }.artboard-kicker { font: .68rem var(--mono); letter-spacing: .1em; }.artboard h2 { margin: 1.2rem 0 .85rem; font-size: clamp(2.1rem, 6vw, 5.7rem); line-height: .83; font-weight: 650; letter-spacing: 0; }.artboard p { max-width: 29ch; font-size: .8rem; }.artboard-mark { position: absolute; right: 8%; bottom: -13%; font-size: min(28vw, 17rem); color: var(--studio-accent); font-family: Georgia, serif; font-style: italic; line-height: 1; }.palette-panel { padding: 1.15rem; }.palette-panel strong { font-weight: 500; }.swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; margin-top: 1rem; }.swatches button { border: 0; background: transparent; color: var(--studio-muted); cursor: pointer; font: .62rem var(--mono); text-align: left; }.swatches i { display: block; width: 100%; aspect-ratio: 1.35; background: var(--swatch); border-radius: 3px; margin-bottom: .35rem; }.layer-list { display: grid; gap: .35rem; }.layer { display: flex; justify-content: space-between; align-items: center; padding: .65rem .55rem; background: transparent; border: 1px solid transparent; border-radius: 5px; text-align: left; }.layer.is-on { background: #1a1510; border-color: #84502d; }.layer b { font: .75rem var(--mono); color: #f0d9db; }.output-panel > strong { font-size: 1.15rem; }.preflight { list-style: none; margin: 1rem 0; display: grid; gap: .65rem; color: var(--studio-muted); font: .76rem var(--mono); }.preflight li { display: grid; grid-template-columns: 1rem 1fr auto; gap: .35rem; }.preflight li span { color: var(--studio-green); }.preflight b { color: #f0d9db; font-weight: 500; }.output-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }.layer-hidden { opacity: 0 !important; pointer-events: none; }
.studio-dialog { color: var(--studio-fg); width: min(560px, calc(100vw - 2rem)); padding: 1.25rem; background: #101712; border: 1px solid #59645b; border-radius: 7px; }.studio-dialog::backdrop { background: rgba(1, 3, 2, .72); }.studio-dialog h2 { font-weight: 400; }.color-control, .select-control { display: grid; grid-template-columns: 1fr 1.25fr; align-items: center; gap: 1rem; margin-top: 1.2rem; color: var(--studio-muted); font-size: .8rem; }.color-control input, .select-control select { width: 100%; min-height: 2.5rem; background: #172019; border: 1px solid #526056; border-radius: 4px; color: var(--studio-fg); }.dialog-swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: .55rem; margin: 1.2rem 0; }.dialog-swatches i { display: block; aspect-ratio: 1; border-radius: 4px; }.motion-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: 1.2rem; }.motion-grid button { min-height: 7rem; border: 1px solid var(--studio-line); background: #121a14; border-radius: 5px; text-align: left; padding: .9rem; }.motion-grid small { display: block; color: var(--studio-muted); margin-top: .35rem; }.motion-entrance { animation: entrance .8s ease; }.motion-stagger .artboard-content { animation: entrance 1s ease .18s both; }.motion-handoff { animation: handoff 1s ease; }.motion-trace .artboard-grid { animation: trace .9s linear; }@keyframes entrance { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }@keyframes handoff { 50% { filter: hue-rotate(42deg); transform: translateX(1.4%); } }@keyframes trace { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
.td-panel .section-row { padding: 0 0 .8rem; }.td-panel > label { display: block; margin: .9rem 0 .35rem; color: var(--studio-muted); font: .64rem var(--mono); }.td-panel input { width: 100%; min-height: 2.25rem; background: #111814; border: 1px solid #3f4943; color: var(--studio-fg); padding: .45rem; font: .7rem var(--mono); }.td-panel .output-actions { margin-top: .65rem; }.td-panel #td-status { color: var(--studio-muted); }.td-panel #td-status:not(:empty) { color: var(--studio-green); }
.artboard-stage { display: grid; place-items: center; min-height: 31rem; padding: 1.15rem; background: #0a0e0b; border-top: 1px solid var(--studio-line); }.artboard { --board-ratio: 3 / 4; width: min(100%, 32rem); margin: 0; aspect-ratio: var(--board-ratio); background: #080909; color: #f0eee9; border: 1px solid #e9e6de; transition: width .32s ease, aspect-ratio .32s ease, transform .6s ease, filter .6s ease; }.artboard[data-board="desktop"] { width: 100%; }.artboard[data-board="square"] { width: min(100%, 31rem); }.artboard[data-board="story"] { width: min(100%, 23rem); }.artboard-grid { --grid-ink: #555a55; inset: 7%; opacity: .6; border: 1px solid var(--grid-ink); background-image: linear-gradient(var(--grid-ink) 1px, transparent 1px), linear-gradient(90deg, var(--grid-ink) 1px, transparent 1px); background-size: 12.5% 16.667%; }.artboard-content { z-index: 2; max-width: 55%; }.artboard-kicker { font-size: .64rem; color: #d7d5ce; }.artboard [contenteditable="true"] { cursor: text; outline: 0; }.artboard [contenteditable="true"]:focus { box-shadow: 0 0 0 1px var(--studio-accent); }.artboard h2 { font-family: var(--mono); font-size: clamp(1.8rem, 5vw, 4.5rem); line-height: .93; font-weight: 400; }.artboard p { max-width: 26ch; font-size: .75rem; color: #b8b9b2; }.artboard-diagram { --diagram-ink: #e6e2db; position: absolute; z-index: 1; right: 7%; bottom: 10%; width: 39%; height: 60%; border: 1px solid var(--diagram-ink); border-bottom: 0; border-radius: 50% 50% 0 0 / 72% 72% 0 0; opacity: .94; }.artboard-diagram::before, .artboard-diagram::after { content: ''; position: absolute; left: 50%; top: 0; width: 1px; height: 100%; background: var(--diagram-ink); transform-origin: bottom; }.artboard-diagram::before { transform: rotate(45deg); }.artboard-diagram::after { transform: rotate(-45deg); }.artboard-diagram i { position: absolute; left: 10%; right: 10%; height: 1px; background: var(--diagram-ink); }.artboard-diagram i:nth-child(1) { bottom: 22%; }.artboard-diagram i:nth-child(2) { bottom: 38%; }.artboard-diagram i:nth-child(3) { bottom: 54%; }.artboard-diagram i:nth-child(4) { bottom: 70%; }.artboard-diagram b { position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; border: 1px solid var(--diagram-ink); background: #080909; transform: translateX(-50%) rotate(45deg); }.artboard-spectrum { position: absolute; z-index: 3; right: 10%; bottom: 16%; display: flex; align-items: end; gap: 3px; height: 30%; }.artboard-spectrum i { width: 6px; height: 68%; transform: skew(-25deg); }.artboard-spectrum i:nth-child(1) { background: #e64b49; height: 92%; }.artboard-spectrum i:nth-child(2) { background: #e8d548; height: 75%; }.artboard-spectrum i:nth-child(3) { background: #65be63; height: 57%; }.artboard-spectrum i:nth-child(4) { background: #4d81dd; height: 40%; }.swatches i { border-radius: 0; }.layer-panel { padding: 0; }.layer-panel > .section-row { padding: .9rem 1.15rem; }.layer-list { padding: .75rem .75rem 0; }.layer { display: grid; grid-template-columns: 1fr 2.2rem; overflow: hidden; border: 1px solid transparent; border-radius: 2px; }.layer.is-selected { border-color: #84502d; background: #181613; }.layer-select, .layer-toggle { color: var(--studio-fg); border: 0; background: transparent; padding: .6rem; text-align: left; cursor: pointer; }.layer-toggle { color: #f0d9db; border-left: 1px solid var(--studio-line); font: .72rem var(--mono); text-align: center; }.layer-toggle[aria-pressed="false"] { color: var(--studio-muted); }.layer-editor { margin: 1rem .75rem .75rem; padding-top: .85rem; border-top: 1px solid var(--studio-line); }.layer-editor > label { display: grid; gap: .4rem; color: var(--studio-muted); font: .68rem var(--mono); }.layer-editor textarea { width: 100%; resize: vertical; min-height: 4.5rem; background: #111814; border: 1px solid #3f4943; color: var(--studio-fg); padding: .5rem; font: .72rem var(--mono); }.layer-editor textarea:disabled { opacity: .55; }.layer-adjustments { display: grid; grid-template-columns: .8fr 1.7fr; gap: .55rem; margin-top: .7rem; }.layer-adjustments label { display: grid; grid-template-columns: 1fr; gap: .25rem; color: var(--studio-muted); font: .64rem var(--mono); }.layer-adjustments input[type="color"] { width: 100%; height: 1.9rem; background: transparent; border: 0; }.layer-adjustments input[type="range"] { width: 100%; accent-color: #e8e8c5; }.layer-adjustments output { color: #f0d9db; text-align: right; }.split-open .studio-workspace::after { content: 'Claude / Editorial view'; display: block; padding: 1rem; border: 1px dashed #6f573d; color: var(--studio-muted); font: .76rem var(--mono); }
@media (max-width: 1100px) { .studio-shell { grid-template-columns: 230px minmax(0, 1fr); }.studio-inspector { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }.studio-inspector .studio-panel { min-width: 0; } }
.artboard-toolbar { align-items: flex-start; }.preview-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: end; gap: .55rem .9rem; }.preview-controls label { display: grid; grid-template-columns: auto 4.5rem auto; align-items: center; gap: .35rem; color: var(--studio-muted); font: .64rem var(--mono); }.preview-controls input { width: 4.5rem; accent-color: #e8e8c5; }.preview-controls output { min-width: 2.55rem; color: var(--studio-fg); }.artboard-stage { --preview-zoom: .72; overflow: auto; }.artboard { transform: scale(var(--preview-zoom)); transform-origin: center; transition: width .32s ease, aspect-ratio .32s ease, transform .18s ease, filter .6s ease; }
@media (max-width: 720px) { .studio-shell { padding: 1rem; grid-template-columns: 1fr; }.studio-workspace { order: 1; }.studio-sidebar { order: 2; }.studio-inspector { grid-column: auto; grid-template-columns: 1fr; order: 3; }.studio-heading { min-height: 6rem; padding: .5rem 0; }.studio-heading h1 { font-size: 2rem; }.artboard-toolbar { display: grid; gap: .6rem; }.preview-controls { justify-content: space-between; }.format-list { flex-wrap: nowrap; overflow-x: auto; padding-block: .6rem; }.format-list button { flex: 0 0 auto; }.artboard-stage { min-height: 26rem; padding: .75rem; }.artboard-content { max-width: 85%; }.nav-links a:nth-child(n+3) { display: inline; } }
.motion-grid button[aria-pressed="true"] { border-color: #87512e; color: var(--studio-fg); background: #1a1612; }.motion-status { min-height: 1.25rem; margin: .85rem 0 0; color: var(--studio-muted); font: .67rem/1.45 var(--mono); }@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }
.topic-generator { margin-top: .9rem; padding-top: .85rem; border-top: 1px solid var(--studio-line); }.topic-controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: .55rem; align-items: end; }.topic-controls label { display: grid; gap: .3rem; color: var(--studio-muted); font: .62rem var(--mono); }.topic-controls select { min-height: 2.25rem; min-width: 0; padding: .35rem; border: 1px solid #3f4943; border-radius: 3px; background: #111814; color: var(--studio-fg); font: .68rem var(--mono); }.topic-controls .button { min-height: 2.25rem; white-space: nowrap; }.topic-origin { min-height: 1.2rem; margin: .7rem 0 0; color: var(--studio-muted); font: .68rem/1.45 var(--mono); }.knowledge-ledger { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .65rem; }.knowledge-ledger span { border: 1px solid var(--studio-line); padding: .24rem .38rem; color: var(--studio-muted); font: .58rem var(--mono); }@media (max-width: 720px) { .topic-controls { grid-template-columns: 1fr 1fr; }.topic-controls .button { grid-column: 1 / -1; } }
.reference-clear { color: #e7b7b4; }.direction-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem; margin-top: .7rem; }.direction-actions .button { min-height: 2.15rem; }.direction-actions span { color: var(--studio-muted); font: .64rem var(--mono); }.toolbar-command { color: var(--studio-fg); white-space: nowrap; }@media (max-width: 720px) { .direction-actions { align-items: flex-start; flex-direction: column; gap: .4rem; } }
.bridge-panel { padding: 0; }.bridge-panel .section-row { padding: .9rem 1.15rem; }.bridge-panel > label, .bridge-panel > textarea { display: block; width: calc(100% - 2.3rem); margin-inline: 1.15rem; }.bridge-panel > label { margin-top: .85rem; color: var(--studio-muted); font: .62rem var(--mono); }.bridge-panel select, .bridge-panel textarea { width: 100%; margin-top: .35rem; border: 1px solid #3f4943; border-radius: 3px; background: #111814; color: var(--studio-fg); font: .7rem var(--mono); }.bridge-panel select { min-height: 2.1rem; padding: .35rem; }.bridge-panel textarea { min-height: 4.4rem; padding: .55rem; resize: vertical; }.bridge-presence { display: grid; gap: .35rem; padding: .8rem 1.15rem; border-bottom: 1px solid var(--studio-line); color: var(--studio-muted); font: .66rem var(--mono); }.bridge-presence span { display: grid; grid-template-columns: .55rem 1fr auto; align-items: center; gap: .35rem; }.bridge-presence i { width: .38rem; height: .38rem; border: 1px solid var(--studio-muted); border-radius: 50%; }.bridge-presence i.is-live { border-color: var(--studio-green); background: var(--studio-green); }.bridge-presence b { color: var(--studio-fg); font-weight: 400; }.bridge-log { display: grid; gap: .45rem; max-height: 8.5rem; overflow: auto; padding: .8rem 1.15rem; border-bottom: 1px solid var(--studio-line); }.bridge-log p { margin: 0; color: var(--studio-muted); font: .67rem/1.45 var(--mono); }.bridge-log b { color: var(--studio-fg); font-weight: 400; }.bridge-log small { display: block; margin-top: .12rem; color: var(--studio-accent); font: .58rem var(--mono); }.bridge-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; padding: .85rem 1.15rem 1.15rem; }.bridge-panel #bridge-status { color: var(--studio-muted); }.bridge-panel #bridge-status:not(:empty) { color: var(--studio-green); }
.panel-commands { display: flex; align-items: center; gap: .65rem; }.workbench-layer { position: fixed; inset: 0; z-index: 20; pointer-events: none; }.studio-panel.is-detached { position: fixed; z-index: 21; width: min(23rem, calc(100vw - 2rem)); max-height: min(78vh, 42rem); overflow: auto; pointer-events: auto; border-color: #687068; box-shadow: 0 1.15rem 3.5rem rgba(0, 0, 0, .46); }.studio-panel.is-detached .section-row { cursor: grab; user-select: none; }.studio-panel.is-detached .section-row:active { cursor: grabbing; }.studio-panel.is-detached .section-row::after { content: 'move'; color: var(--studio-muted); font: .58rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }.studio-panel.is-detached .panel-commands { margin-left: auto; }.studio-panel.is-detached .detach-panel { color: var(--studio-accent); }.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.shop-pet { position: fixed; right: 1.25rem; bottom: 1rem; z-index: 19; display: grid; justify-items: end; gap: .55rem; }.pet-button { width: 5.35rem; height: 5.35rem; display: grid; place-items: center; border: 0; background: transparent; cursor: pointer; }.pixel-pet { position: relative; display: block; width: 4.15rem; height: 4.55rem; filter: drop-shadow(0 .35rem .45rem rgba(0, 0, 0, .42)); animation: pet-idle 3.2s ease-in-out infinite; }.pixel-pet i { position: absolute; display: block; box-sizing: border-box; }.pet-antenna { left: 2rem; top: .12rem; width: .3rem; height: .72rem; background: var(--studio-accent); box-shadow: .3rem -.08rem 0 var(--studio-accent); }.pet-shell { left: .55rem; top: .65rem; width: 3.05rem; height: 2.35rem; border: .28rem solid #8fcf91; border-radius: .7rem .7rem .42rem .42rem; background: #1a241d; box-shadow: -.22rem .22rem 0 #54775a, .22rem .22rem 0 #b6dcb9; }.pet-screen { left: 1rem; top: 1.18rem; width: 2.1rem; height: 1.1rem; display: grid !important; place-items: center; background: #09110c; border: .13rem solid #d9e6d8; color: var(--studio-accent); font: .66rem var(--mono); }.pet-screen b { font-weight: 400; letter-spacing: -.12em; }.pet-body { left: 1.25rem; top: 3rem; width: 1.6rem; height: .98rem; border: .2rem solid #8fcf91; background: #273a2c; box-shadow: .2rem .14rem 0 #54775a; }.pet-body::after { content: ''; position: absolute; left: .48rem; bottom: -.42rem; width: .22rem; height: .35rem; background: #d9e6d8; box-shadow: .52rem 0 0 #d9e6d8; }.pet-arm { top: 3.05rem; width: .52rem; height: .82rem; border: .16rem solid #8fcf91; background: #273a2c; }.pet-arm-left { left: .8rem; }.pet-arm-right { right: .8rem; }.pet-card { width: 13.5rem; padding: .85rem .95rem; border: 1px solid #59645b; border-radius: 5px; background: #101712; box-shadow: 0 .9rem 2.6rem rgba(0, 0, 0, .4); }.pet-card .panel-label { margin: 0 0 .35rem; }.pet-card strong { font-size: .84rem; font-weight: 500; }.pet-card p:not(.panel-label) { margin: .3rem 0 .55rem; color: var(--studio-muted); font: .67rem/1.45 var(--mono); }.shop-pet:has(.pet-card:not([hidden])) .pixel-pet { animation-duration: 1.1s; }.shop-pet:has(.pet-card:not([hidden])) .pet-screen { color: #8fcf91; }@keyframes pet-idle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.28rem); } }@media (max-width: 720px) { .studio-panel.is-detached { width: min(22rem, calc(100vw - 1.5rem)); max-height: 70vh; }.shop-pet { right: .6rem; bottom: .45rem; }.pet-button { transform: scale(.82); transform-origin: bottom right; }.pet-card { width: min(13.5rem, calc(100vw - 1.5rem)); } }
.pet-crest { display: none; }.pixel-pet[data-level="3"] .pet-crest, .pixel-pet[data-level="4"] .pet-crest, .pixel-pet[data-level="5"] .pet-crest { display: block; left: 1.28rem; top: -.28rem; width: .26rem; height: .26rem; background: #d9e6d8; box-shadow: .4rem -.12rem 0 #d9e6d8, .8rem 0 0 #d9e6d8; }.pixel-pet[data-form="scholar"][data-level="2"] .pet-antenna { height: .95rem; top: -.06rem; }.pixel-pet[data-form="scholar"][data-level="3"] .pet-antenna { height: .95rem; top: -.06rem; box-shadow: .3rem -.08rem 0 var(--studio-accent), -.32rem -.2rem 0 #8fcf91; }.pixel-pet[data-form="scholar"][data-level="4"] .pet-antenna, .pixel-pet[data-form="scholar"][data-level="5"] .pet-antenna { height: 1.1rem; top: -.2rem; box-shadow: .3rem -.08rem 0 var(--studio-accent), -.32rem -.2rem 0 #8fcf91, .62rem -.26rem 0 #8fcf91; }.pixel-pet[data-form="scholar"][data-level="4"] .pet-arm, .pixel-pet[data-form="scholar"][data-level="5"] .pet-arm { box-shadow: 0 -.28rem 0 #b6dcb9; }.pixel-pet[data-level="5"] { filter: drop-shadow(0 .35rem .45rem rgba(0, 0, 0, .42)) drop-shadow(0 0 .55rem rgba(143, 207, 145, .33)); }.pixel-pet[data-level="5"] .pet-screen { color: #d9e6d8; border-color: var(--studio-accent); }.pixel-pet[data-form="glutton"] { animation-duration: 4.6s; }.pixel-pet[data-form="glutton"] .pet-shell, .pixel-pet[data-form="glutton"] .pet-body { transform-origin: 50% 100%; }.pixel-pet[data-form="glutton"][data-level="2"] .pet-shell { transform: scaleX(1.12); }.pixel-pet[data-form="glutton"][data-level="2"] .pet-body { transform: scaleX(1.18); }.pixel-pet[data-form="glutton"][data-level="3"] .pet-shell { transform: scaleX(1.24); }.pixel-pet[data-form="glutton"][data-level="3"] .pet-body { transform: scaleX(1.34); }.pixel-pet[data-form="glutton"][data-level="4"] .pet-shell { transform: scaleX(1.38) scaleY(1.05); border-radius: 1rem 1rem .6rem .6rem; }.pixel-pet[data-form="glutton"][data-level="4"] .pet-body { transform: scaleX(1.5); }.pixel-pet[data-form="glutton"][data-level="4"] .pet-arm-left { left: .5rem; }.pixel-pet[data-form="glutton"][data-level="4"] .pet-arm-right { right: .5rem; }.pixel-pet[data-form="glutton"][data-level="5"] .pet-shell { transform: scaleX(1.52) scaleY(1.1); border-radius: 1.4rem 1.4rem .8rem .8rem; }.pixel-pet[data-form="glutton"][data-level="5"] .pet-body { transform: scaleX(1.66) scaleY(1.12); }.pixel-pet[data-form="glutton"][data-level="5"] .pet-arm-left { left: .32rem; }.pixel-pet[data-form="glutton"][data-level="5"] .pet-arm-right { right: .32rem; }.pixel-pet[data-form="glutton"][data-level="5"] { animation-duration: 5.6s; }
.pet-meter { display: grid; gap: .32rem; margin: .15rem 0 .6rem; }.pet-meter-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }.pet-meter-head span { font: .68rem var(--mono); color: #d9e6d8; }.pet-meter-head small { font: .6rem var(--mono); color: var(--studio-muted); }.pet-meter-bar { display: block; height: .38rem; border: 1px solid #59645b; background: #0a0f0b; }.pet-meter-bar b { display: block; height: 100%; width: 0; background: var(--studio-accent); transition: width .3s ease; }.pet-meter-caption { display: block; font: .58rem/1.5 var(--mono); color: var(--studio-muted); }.pet-actions { display: flex; flex-wrap: wrap; gap: .3rem .75rem; }
.pet-out-stage { margin: 0; min-height: 100vh; display: grid; place-items: center; background: #0c110d; }.pet-out-stage .shop-pet { position: static; justify-items: center; }.pet-out-stage .pet-card { box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .pixel-pet { animation: none; } .pet-meter-bar b { transition: none; } }
.skill-dex-panel { padding: 0; }.skill-dex-panel .section-row { padding: .9rem 1.15rem; }.skill-dex-panel .quiet { margin: .8rem 1.15rem; }.skill-dex-actions { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .65rem; padding: 0 1.15rem 1.15rem; }.skill-dex-actions .button { min-height: 2.15rem; }.skill-dex-actions .mono { color: var(--studio-muted); text-align: right; }.skill-dex-dialog { width: min(850px, calc(100vw - 2rem)); }.dex-search { display: grid; gap: .4rem; margin-top: 1rem; color: var(--studio-muted); font: .66rem var(--mono); }.dex-search input { width: 100%; min-height: 2.45rem; padding: .5rem; border: 1px solid #526056; border-radius: 4px; background: #111814; color: var(--studio-fg); font: .72rem var(--mono); }.skill-dex-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(13rem, .8fr); gap: .9rem; margin-top: .85rem; }.skill-dex-list { display: grid; gap: .45rem; max-height: 28rem; overflow: auto; }.skill-card { display: grid; grid-template-columns: 2.55rem minmax(0, 1fr); gap: .65rem; align-items: center; width: 100%; padding: .55rem; border: 1px solid var(--studio-line); border-radius: 3px; background: #111814; color: var(--studio-fg); text-align: left; cursor: pointer; }.skill-card[aria-pressed="true"] { border-color: #87512e; background: #1a1612; }.skill-sprite { width: 2.45rem; aspect-ratio: 1; position: relative; display: block; border: 1px solid currentColor; background: #0a0e0b; color: #8fcf91; }.skill-sprite::before, .skill-sprite::after { content: ''; position: absolute; background: currentColor; }.skill-sprite::before { left: .48rem; top: .48rem; width: 1.25rem; height: .45rem; box-shadow: 0 .8rem 0 currentColor; }.skill-sprite::after { left: .88rem; top: .18rem; width: .45rem; height: 1.9rem; }.skill-sprite[data-tone="orange"] { color: var(--studio-accent); }.skill-sprite[data-tone="blue"] { color: #6ba3df; }.skill-sprite[data-tone="cream"] { color: #e8e8c5; }.skill-sprite[data-tone="brass"] { color: #c9a24b; }.skill-card strong { display: block; font-size: .78rem; font-weight: 500; }.skill-card small { display: block; margin-top: .18rem; color: var(--studio-muted); font: .61rem var(--mono); }.skill-detail { padding: .9rem; border: 1px solid var(--studio-line); background: #0d1310; }.skill-detail h3 { margin: .35rem 0 .65rem; font-size: 1.15rem; font-weight: 400; }.skill-detail > p:not(.panel-label) { margin: 0; color: var(--studio-muted); font-size: .76rem; line-height: 1.5; }.skill-detail-tags { display: flex; flex-wrap: wrap; gap: .32rem; margin: .85rem 0; }.skill-detail-tags span { border: 1px solid var(--studio-line); padding: .2rem .35rem; color: var(--studio-muted); font: .58rem var(--mono); }.skill-detail-actions { display: grid; gap: .45rem; }.skill-detail-actions .button { min-height: 2.2rem; }@media (max-width: 720px) { .skill-dex-layout { grid-template-columns: 1fr; }.skill-dex-list { max-height: 16rem; }.skill-dex-actions { grid-template-columns: 1fr; }.skill-dex-actions .mono { text-align: left; } }
.skill-score, .skill-evidence { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: .2rem .55rem; margin-top: .85rem; padding: .55rem 0; border-top: 1px solid var(--studio-line); color: var(--studio-muted); font: .62rem var(--mono); }.skill-score strong, .skill-evidence strong { color: var(--studio-fg); font: 1rem var(--mono); }.skill-score small, .skill-evidence small { grid-column: 1 / -1; color: var(--studio-muted); font: .57rem var(--mono); }.skill-metrics { display: grid; gap: .35rem; margin-top: .65rem; }.skill-metric { display: grid; grid-template-columns: 4.9rem 1fr 1.8rem; align-items: center; gap: .45rem; color: var(--studio-muted); font: .58rem var(--mono); }.skill-metric i { display: block; height: .32rem; overflow: hidden; background: #1d251f; }.skill-metric i::after { content: ''; display: block; width: var(--metric); height: 100%; background: var(--studio-green); }.skill-metric b { color: var(--studio-fg); font-weight: 400; text-align: right; }
.skill-detail .skill-activation { margin-top: .7rem; padding-left: .6rem; border-left: 1px solid var(--studio-accent); color: var(--studio-fg); font: .66rem/1.5 var(--mono); }
.print-shop-panel .print-shop-controls { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; margin: .8rem 0; }.print-shop-controls label { display: grid; gap: .3rem; font: .62rem var(--mono); color: var(--studio-muted); text-transform: uppercase; letter-spacing: .08em; }.print-shop-controls select { background: var(--studio-bg); color: var(--studio-fg); border: 1px solid var(--studio-line); border-radius: 4px; padding: .4rem .5rem; font: .78rem var(--sans, inherit); }.print-shop-controls .button { grid-column: 1 / -1; }
.print-shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }.print-thumb { padding: 0; border: 1px solid var(--studio-line); background: var(--studio-bg); border-radius: 4px; overflow: hidden; cursor: pointer; aspect-ratio: 4 / 5; transition: border-color .15s; }.print-thumb:hover, .print-thumb:focus-visible { border-color: var(--studio-accent); }.print-thumb svg { display: block; width: 100%; height: 100%; }
.print-shop-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 1rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--studio-line); }.print-shop-preview { border: 1px solid var(--studio-line); border-radius: 4px; overflow: hidden; aspect-ratio: 4 / 5; }.print-shop-preview svg { display: block; width: 100%; height: 100%; }
.print-shop-meta { display: grid; gap: .35rem; align-content: start; }.print-shop-meta textarea { width: 100%; background: var(--studio-bg); color: var(--studio-fg); border: 1px solid var(--studio-line); border-radius: 4px; padding: .4rem .5rem; font: .72rem/1.4 var(--sans, inherit); resize: vertical; margin-top: .25rem; }.print-shop-meta label { font: .6rem var(--mono); color: var(--studio-muted); text-transform: uppercase; letter-spacing: .08em; }
.print-size-list { display: grid; gap: .3rem; margin-bottom: .3rem; }.print-size-item { display: flex; align-items: center; gap: .4rem; font: .74rem var(--sans, inherit); color: var(--studio-fg); text-transform: none; letter-spacing: 0; }
@media (max-width: 900px) { .print-shop-detail { grid-template-columns: 1fr; } .print-shop-grid { grid-template-columns: repeat(2, 1fr); } }