/* Live personal studio. Scoped to this route. */
.live-heading{padding-bottom:24px;gap:6vw;background:#f3f5ed}
.live-heading>div:last-child{align-self:end;max-width:460px;color:#586b57;font-size:15px}
.live-heading>div:last-child p{margin:0 0 16px}
.live-heading h1{font-size:clamp(42px,4.5vw,65px)}
.composer-layout{display:grid;grid-template-columns:1fr 1fr;gap:4vw;padding:36px 5vw 65px;align-items:start;max-width:1600px;margin:auto}
.live-form{grid-column:1;grid-row:1;min-width:0}
.live-preview{grid-column:2;grid-row:1;position:sticky;top:106px;min-width:0;background:#f4f2e9;border:1px solid #d4dac9;padding:23px;box-shadow:0 16px 50px #33442e07;z-index:5}
.live-preview-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}
.live-preview-heading .section-index{margin:0 0 5px;font-size:9px}
.live-preview h2{font:30px/1.15 var(--serif);letter-spacing:-.02em;margin:0}
.live-indicator{font-size:10px;color:#45643f;display:flex;align-items:center;gap:5px}
.live-indicator:before{content:'';width:6px;height:6px;border-radius:50%;background:#6e9163}
.live-drawing{height:clamp(230px,34vh,330px);display:grid;align-items:center}
.live-drawing svg{width:100%;height:100%;max-height:330px;display:block}
.live-drawing [data-piece],#large-drawing [data-piece]{cursor:pointer;outline:none}
[data-piece]:hover .piece-focus,[data-piece]:focus-visible .piece-focus{stroke:#365d45}
.preview-tools{display:flex;flex-wrap:wrap;border-top:1px solid #d6decc;border-bottom:1px solid #d6decc;gap:4px;justify-content:space-between}
.preview-tools button{border:0;background:transparent;color:#3a513d;padding:10px 5px;font-size:11px;min-height:44px}
button:disabled{opacity:.4;cursor:default}
.live-caption{font-size:10px;color:#65725e;margin:12px 0}
.live-key{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:7px 14px;font-size:11px;color:#435b40}
.live-key li{display:flex;align-items:center;gap:6px}
.live-key i{width:11px;height:11px;border:1px solid #88927e;border-radius:50%;background:var(--tone)}
.live-key b{font-weight:400;color:#7a8470}
.selection-hint{font-size:11px;color:#435b40;margin:15px 0 0}
.edit-piece-link{font-size:10px;text-decoration:underline;text-underline-offset:3px}
.live-form #restore-status:empty{display:none}
.live-form fieldset{padding-bottom:27px}
.material-library{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:20px 0}
.material-card{border:1px solid #d3dccb;background:#f7f7f0;padding:0;display:flex;flex-direction:column;align-items:center;text-align:center;color:#334e39;min-width:0;position:relative}
.material-card.is-reading{border-color:#5b7852;background:#eaf0e2;box-shadow:inset 0 0 0 1px #5b7852}

.stone-orb,.mini-orb{display:inline-block;border-radius:50%;background:radial-gradient(circle at 28% 23%,#ffffffed,var(--tone) 46%,var(--shade));box-shadow:inset -3px -3px 5px #0001,0 6px 12px #243d2b12;border:1px solid #82907825;flex:none}
.stone-orb{width:42px;height:42px;margin:3px 0 12px}
.material-card strong{font:18px/1.2 var(--serif)}
.material-card>span:not(.stone-orb){font-size:10px;margin-top:6px;color:#63735b}
.material-card small{font-size:9px;margin-top:10px;line-height:1.35;min-height:24px;color:#56734a}
.stone-insight{padding:21px;background:#eef2e8;border:1px solid #d3deca}
.insight-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}
.insight-heading .section-index{font-size:8px;letter-spacing:.08em}
.insight-heading h3{font:29px/1.2 var(--serif);margin:4px 0 0}
.small-button{border:1px solid #9caf91;background:#f9faf3;color:#3e5c38;padding:11px 13px;font-size:11px;min-height:44px;flex:none}
.stone-insight>p,.stone-insight details{font-size:12px;color:#52664d}
.insight-meaning{border-top:1px solid #ccd7c2;padding-top:13px}
.insight-meaning strong{display:block;font-size:10px;font-weight:500;color:#59714f;margin-bottom:8px}
.stone-insight summary{cursor:pointer;font-size:11px;min-height:30px;padding-top:4px}
.stone-insight details a{font-size:11px;text-decoration:underline}
.palette-heading{display:flex;align-items:baseline;justify-content:space-between;margin:23px 0 9px;gap:10px}
.palette-heading h3,.piece-editor h3{font:25px var(--serif);margin:0}
.palette-heading>span{font-size:10px;color:#6b7961}
.palette-row{display:flex;gap:10px;align-items:center;padding:7px 0;border-bottom:1px solid #d5ddcd}
.mini-orb{width:25px;height:25px}
.palette-row>strong{font-size:12px;font-weight:400;flex:1;min-width:0}
.weight-stepper{display:flex;align-items:center;font-size:12px;border:1px solid #d5ddcd}
.weight-stepper button,.remove-stone{width:38px;height:38px;min-height:38px;background:transparent;border:0;font-size:18px;color:#455f3e}
.weight-stepper>span{min-width:19px;text-align:center}
.remove-stone{font-size:10px;width:50px}
.control-note{font-size:11px;color:#6a7862;line-height:1.6;margin:13px 0 0}
.preset-row{display:flex;align-items:end;gap:10px;margin-top:18px}
.preset-row .field{flex:1;min-width:0;margin:0}
.preset-row>.small-button{margin-bottom:0}
.live-form .field-row{margin:16px 0;gap:13px}
.piece-editor{border:1px solid #d1dbc7;background:#f2f4eb;padding:19px;margin-top:20px;scroll-margin-top:130px}
.piece-editor-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.piece-editor-top>span{font-size:10px;color:#6c7c61}
.piece-editor>p{font-size:12px;color:#607157}
.piece-editor>small{display:block;font-size:10px;color:#68785e;margin-top:8px}
.piece-editor select{padding-left:8px;padding-right:22px;font-size:12px}
.notes-field{margin-top:18px}
.share-row{display:flex;justify-content:space-between;gap:15px;margin-top:10px;flex-wrap:wrap}
.share-row button{font-size:9px!important}
.preview-dialog{width:min(850px,94vw);max-height:92dvh;border:1px solid #c9d2bf;background:#f4f2e9;padding:22px;color:#294438;overflow:auto}
.preview-dialog::backdrop{background:#14291e8c;backdrop-filter:blur(4px)}
.dialog-heading{display:flex;justify-content:space-between;align-items:center;gap:15px}
.dialog-heading h2{font:28px var(--serif);margin:0}
.dialog-heading button{width:44px;height:44px;background:transparent;border:1px solid #bdcab2;font-size:24px;color:#3d5735}
#large-drawing svg{width:100%;height:auto;max-height:70dvh;display:block}
.preview-dialog>p{font-size:11px;color:#6a785f;text-align:center}
.live-form :focus-visible,.live-preview button:focus-visible{outline:2px solid #5a7750;outline-offset:3px}
@media(max-width:1050px){.composer-layout{gap:25px;padding-left:4vw;padding-right:4vw}.live-preview{top:105px;padding:17px}.live-preview h2{font-size:25px}.material-library{grid-template-columns:repeat(2,minmax(0,1fr))}.insight-heading{align-items:start;flex-direction:column}.live-form .format-option{padding:12px}.live-form .format-option strong{font-size:19px}.palette-row{gap:7px}.weight-stepper button{width:30px}.live-form .studio-actions{flex-direction:row}}
@media(max-width:760px){.live-heading{padding:27px 6vw 25px;gap:13px}.live-heading h1{font-size:39px}.live-heading>div:last-child{font-size:13px}.live-heading>div:last-child p{margin-bottom:9px}.live-heading .text-link{font-size:9px}.composer-layout{display:block;padding:0 6vw 40px}.live-preview{position:sticky;top:68px;padding:10px 12px 8px;margin:0 -2vw 25px;box-shadow:0 9px 18px #223c2412;z-index:10}.live-preview-heading .section-index{display:none}.live-preview h2{font-size:20px}.live-drawing{aspect-ratio:auto;min-height:0;height:170px}.live-drawing svg{height:170px;width:100%}.preview-tools{gap:2px}.preview-tools button{font-size:10px;min-height:34px;padding:7px 4px}.live-caption{font-size:9px;margin:5px 0 0;line-height:1.4}.live-key{display:flex;flex-wrap:nowrap;overflow:auto;font-size:9px;gap:12px;margin:4px 0;white-space:nowrap}.live-key li{flex:none}.selection-hint{display:inline;font-size:9px;margin:0}.edit-piece-link{font-size:9px;margin-left:9px}.live-form .material-library{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.material-card{padding:12px 5px 7px}.material-card strong{font-size:17px}.material-card small{font-size:8px}.stone-orb{width:35px;height:35px;margin-bottom:9px}.material-card>span:not(.stone-orb){font-size:9px}.insight-heading{flex-direction:row;align-items:center}.insight-heading h3{font-size:26px}.stone-insight{padding:16px}.insight-heading .small-button{padding:9px;font-size:10px}.live-form fieldset{scroll-margin-top:355px}.piece-editor{scroll-margin-top:355px;padding:15px}.piece-editor-top h3{font-size:23px}.live-form .studio-actions button{font-size:9px!important}.preset-row{gap:8px}.preset-row .small-button{padding:10px;font-size:10px}.preview-dialog{padding:14px}.dialog-heading h2{font-size:22px}.live-form legend{font-size:24px}}
@media(max-width:380px){.composer-layout{padding-left:5vw;padding-right:5vw}.live-drawing,.live-drawing svg{height:145px}.live-heading h1{font-size:36px}.live-form .field-row{grid-template-columns:1fr}.material-card strong{font-size:16px}.insight-heading{flex-direction:column;align-items:start}.piece-editor-top{align-items:start;flex-direction:column;gap:5px}.live-form .studio-actions{flex-direction:column}.live-form .studio-actions button{width:100%}}
@media(prefers-reduced-motion:reduce){.live-form *,.live-preview *{scroll-behavior:auto;transition:none}}
@media(max-width:760px){html{scroll-padding-top:390px;scroll-padding-bottom:16px}}
/* First-use guidance and distinct read/add actions. */
.studio-quick-guide{padding:27px 5vw 30px;background:#f8f9f2;border-bottom:1px solid #d7dfce}
.quick-guide-heading{display:flex;align-items:end;justify-content:space-between;gap:25px}
.quick-guide-heading .section-index{margin:0 0 8px;font-size:9px}
.quick-guide-heading h2{font:31px/1.15 var(--serif);margin:0}
.quick-guide-heading>p{font-size:12px;color:#63735c;max-width:345px;margin:0}
.quick-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;list-style:none;margin:22px 0 0;padding:0;counter-reset:none}
.quick-steps li{min-width:0}
.quick-steps a{display:block;padding:15px;background:#f1f4e9;border:1px solid #d5dfca;height:100%;color:#344f39}
.quick-steps a:hover{background:#e9efdf;border-color:#829b73}
.quick-steps a:focus-visible{outline:2px solid #527447;outline-offset:3px}
.quick-steps span{font-size:10px;letter-spacing:.1em;display:block;color:#638057;margin-bottom:8px}
.quick-steps strong{display:block;font:22px/1.15 var(--serif)}
.quick-steps p{font-size:12px;color:#62735b;line-height:1.5;margin:9px 0 0}
.live-preview-heading>div{min-width:0}
.help-trigger{background:#edf2e4;border:1px solid #c4d2b8;padding:8px 10px;color:#49693e;font-size:11px;white-space:nowrap;flex:none;min-height:36px}
.material-inspect{border:0;background:transparent;display:flex;flex-direction:column;align-items:center;min-width:0;width:100%;padding:15px 8px 12px;color:inherit;font:inherit;flex:1}
.material-inspect .crystal-theme{font-size:10px;margin-top:6px;color:#63735b}
.material-inspect small{font-size:10px;min-height:16px}
.material-card .material-add{border:0;border-top:1px solid #cbd8bf;background:#e8efdd;color:#385b2c;padding:9px 5px;align-self:stretch;min-height:38px;font:12px var(--sans)}
.material-card .material-add:disabled{background:#f3f5ec;opacity:1;color:#617557}
.palette-feedback{font-size:12px;line-height:1.5;color:#456b36;margin:-6px 0 17px;min-height:18px}
.palette-feedback:empty{display:none}
.studio-help-dialog{width:min(760px,94vw);max-height:90dvh;overflow:auto;background:#f8f9f2;color:#294438;border:1px solid #bfceb3;padding:24px}
.studio-help-dialog::backdrop{background:#14291e8c;backdrop-filter:blur(4px)}
.studio-help-dialog>p{font-size:13px;color:#5c7053;line-height:1.6}
.studio-help-dialog .quick-steps{grid-template-columns:1fr 1fr}
.live-form fieldset{scroll-margin-top:110px}
@media(max-width:760px){.studio-quick-guide{padding:23px 6vw}.quick-guide-heading{display:block}.quick-guide-heading h2{font-size:28px}.quick-guide-heading>p{font-size:11px;margin-top:10px}.quick-steps{grid-template-columns:1fr 1fr;gap:8px;margin-top:15px}.quick-steps a{padding:12px}.quick-steps strong{font-size:19px}.quick-steps p{font-size:11px;margin-top:7px}.quick-steps span{margin-bottom:6px}.help-trigger{font-size:10px;padding:7px;min-height:32px}.live-preview h2{font-size:19px}.live-form .material-card{padding:0}.material-inspect{padding:12px 4px 8px}.material-inspect .crystal-theme{font-size:9px}.material-inspect small{font-size:9px;margin-top:8px}.material-card .material-add{font-size:11px;min-height:36px;padding:8px 4px}.live-form fieldset,.piece-editor{scroll-margin-top:10px}.studio-help-dialog{padding:17px}.studio-help-dialog .dialog-heading h2{font-size:23px}.studio-help-dialog>p{font-size:12px}.remove-stone{font-size:10px;width:43px}html{scroll-padding-top:410px}}