.studio-main { padding: 48px 0 80px; }
.studio-intro { max-width: 780px; margin-bottom: 34px; }
.studio-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 30px; align-items: start; }
.pin-preview-wrap { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: rgba(255,255,255,.45); }
.pin-preview { width: min(100%, 500px); aspect-ratio: 2/3; margin: auto; padding: 46px; display: flex; flex-direction: column; justify-content: space-between; color: var(--pin-ink, var(--ink)); background: var(--pin-bg, var(--mint)); border-radius: 4px; box-shadow: 0 28px 70px rgba(23,34,29,.17); overflow: hidden; position: relative; }
.pin-preview::before { content: ""; position: absolute; width: 260px; height: 260px; border: 7px solid currentColor; border-radius: 44% 56% 43% 57%; right: -100px; top: 90px; opacity: .12; transform: rotate(18deg); }
.pin-preview::after { content: ""; position: absolute; width: 120px; height: 24px; left: 44px; bottom: 160px; border-top: 7px solid currentColor; border-bottom: 7px solid currentColor; opacity: .22; transform: rotate(-9deg); }
.pin-kicker { position: relative; z-index: 1; font-size: clamp(.7rem, 2vw, 1rem); text-transform: uppercase; letter-spacing: .16em; font-weight: 900; }
.pin-headline { position: relative; z-index: 1; max-width: 92%; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.2rem, 7vw, 4.6rem); font-weight: 500; line-height: .98; letter-spacing: -.055em; }
.pin-footer { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: end; gap: 18px; font-weight: 850; }
.pin-footer span:last-child { width: 70px; height: 70px; display: grid; place-items: center; border: 3px solid currentColor; border-radius: 50%; font-size: 1.5rem; }
.palette-mint { --pin-bg: #b9dec9; --pin-ink: #17221d; }
.palette-coral { --pin-bg: #f06f4f; --pin-ink: #fffdf8; }
.palette-sun { --pin-bg: #f1c85b; --pin-ink: #17221d; }
.palette-ink { --pin-bg: #17221d; --pin-ink: #fffdf8; }
.palette-paper { --pin-bg: #fffdf8; --pin-ink: #17221d; }
.studio-panel { position: sticky; top: 102px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper-2); }
.studio-panel label { display: block; margin-bottom: 8px; font-size: .8rem; font-weight: 850; }
.studio-panel select { width: 100%; min-height: 50px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: white; }
.studio-copy { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.studio-copy p { color: var(--ink-soft); font-size: .9rem; }
.studio-actions { display: grid; gap: 10px; margin-top: 18px; }
.studio-actions .button { width: 100%; }
.studio-status { min-height: 24px; margin-top: 10px; color: var(--mint-dark); font-size: .82rem; font-weight: 750; }
.pin-index-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 40px; }
.pin-index-button { min-height: 74px; padding: 10px; text-align: left; border: 1px solid var(--line); border-radius: 12px; background: var(--paper-2); cursor: pointer; font-weight: 750; }
.pin-index-button.is-active { outline: 3px solid var(--coral); outline-offset: 1px; }
@media (max-width: 960px) { .studio-grid { grid-template-columns: 1fr; } .studio-panel { position: static; } .pin-index-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .pin-preview { padding: 28px; } .pin-index-grid { grid-template-columns: repeat(2, 1fr); } }