.newtoolstudio{max-width:1100px;padding:36px 0 56px}.newtoolstudio h1{font-size:clamp(32px,4vw,50px)}.toolsteps,.toolactions{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}.toolsteps [aria-current=step]{background:var(--rose);color:#fff}.toolcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,235px),1fr));gap:12px}.toolcard{display:grid;text-align:left;gap:10px;padding:20px;min-width:0}.toolcard strong{font:500 23px 'Playfair Display',Georgia,serif}.toolcard span{line-height:1.6}.toolcard small,.toolcounter{color:var(--muted)}.toolfilters{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:12px;margin:16px 0}.toolfilters label,.toolformgrid label,.newtoolstudio>label,.newtoolstudio form>label{display:grid;gap:7px;min-width:0}.toolformgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:18px 0}.toolformgrid textarea{resize:vertical}.toolcheck{display:flex!important;align-items:center;gap:10px;margin:12px 0}.toolcheck input{width:auto;flex:none}.sheetgroup,.toolreferences{border:1px solid var(--line);border-radius:10px;padding:14px;margin:12px 0}.sheetgroup summary,.toolreferences summary{cursor:pointer;font-weight:600;padding:4px}.sunooutputs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:18px;margin:24px 0}.sunooutputs>div{min-width:0}.sunooutputs textarea,#templateoutput{margin-top:8px;resize:vertical;line-height:1.7}.toolover{color:var(--rose);font-weight:700}.toolimport{display:grid;gap:7px;margin-top:24px;max-width:460px}.toolreferences a{color:var(--rose);line-height:1.8}.toolreferences li{margin:5px 0}.trackergallery{display:block!important}.trackergroup{border:1px solid var(--line);border-radius:10px;padding:14px;margin:12px 0}.trackergroup summary{cursor:pointer;font:500 23px 'Playfair Display',Georgia,serif}.trackergroup summary small{font:12px 'DM Sans',sans-serif;color:var(--muted);margin-left:10px}.trackergroupgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}.trackerlines .trackergroupgrid{grid-template-columns:1fr}.trackergroup .trackertile{min-width:0}.trackergroup code{overflow-wrap:anywhere;white-space:pre-wrap}#trackerstudio input:focus-visible,#oocstudio input:focus-visible,.newtoolstudio :is(input,select,textarea):focus-visible{outline:3px solid var(--rose);outline-offset:3px}.newtoolstudio p,.newtoolstudio label,.trackergroup,.toolreferences{overflow-wrap:anywhere}#toolcopyfallback{min-height:180px;margin:12px 0}#oockind{max-width:100%}.newtoolstudio button{transition:background .18s,border-color .18s}.newtoolstudio button:disabled{opacity:.55;cursor:not-allowed}@media(max-width:700px){.toolformgrid,.sunooutputs,.trackergroupgrid,.toolfilters{grid-template-columns:1fr}.newtoolstudio{padding-top:24px}.toolsteps button{flex:1;min-width:90px;padding:10px}.toolactions button{flex:1}.trackergroup{padding:12px}.trackergroup summary{font-size:20px}.toolreferences ul{padding-left:18px}}@media(prefers-reduced-motion:reduce){.newtoolstudio button{transition:none}}
.characterreference{display:block;width:min(100%,280px);max-height:350px;object-fit:contain;border:1px solid var(--line);border-radius:12px;margin:15px 0}.characterreference[hidden]{display:none}.fullfield{grid-column:1/-1}.charactertraits{border:1px solid var(--line);border-radius:10px;margin:18px 0;padding:14px}.charactertraits>div{display:flex;flex-wrap:wrap;gap:9px}.charactertraits label{display:flex;align-items:center;gap:6px;padding:8px;border:1px solid var(--line);border-radius:20px}.charactertraits input{width:auto;margin:0}.chosenstarter{border-color:var(--rose);box-shadow:0 0 0 1px var(--rose)}.savedcharacter{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;border-bottom:1px solid var(--line)}.savedcharacter>div{display:flex;gap:6px}.headergallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.headercard{min-width:0;border:1px solid var(--line);border-radius:12px;background:var(--panel-bg,#fffcf8);padding:16px}.headercard small{color:var(--muted)}.headercard pre{white-space:pre-wrap;overflow-wrap:anywhere;font:19px/1.6 Georgia,'Noto Serif',serif;color:var(--ink);min-height:65px}.symbolpicker>div{margin:16px 0}.symbolpicker button{font:22px Georgia,serif;padding:10px;margin:4px;min-width:45px}#characteroutput{line-height:1.7}#charactersteps{gap:6px}#charactersteps button{padding:10px}#headercopyarea{font:18px/1.6 Georgia,serif}@media(max-width:700px){.headergallery{grid-template-columns:1fr}.headercard pre{font-size:17px}.charactertraits label{font-size:12px}.fullfield{grid-column:auto}}
.tooldetailbox{border:1px solid var(--line);border-radius:12px;padding:16px;margin:18px 0}.tooldetailbox>label{display:grid;gap:7px;margin:10px 0}.tooldetailbox>button{margin:8px 0}.detailselection{display:grid;grid-template-columns:minmax(0,1fr) minmax(110px,180px) auto;align-items:center;gap:10px;border-bottom:1px solid var(--line);padding:10px 0}.detailreference{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;border-bottom:1px solid var(--line)}.detailreference a{color:var(--rose);overflow-wrap:anywhere;flex:1;min-width:0}.detailreference>div{display:flex;gap:7px}.tooldetailbox textarea{line-height:1.65}#charflawchoices .toolcard{padding:14px}#charflawchoices{margin-top:12px}#charpreferences[hidden],#chartensorpanel[hidden]{display:none}@media(max-width:600px){.tooldetailbox{padding:12px}.detailselection{grid-template-columns:minmax(0,1fr) auto}.detailselection>span{grid-column:1/-1}.detailreference{display:grid;grid-template-columns:minmax(0,1fr)}}
.studio-update{border:1px solid var(--line);border-radius:12px;background:var(--panel-bg,#fffcf8);margin:14px 0;overflow:hidden}.studio-update summary{cursor:pointer;padding:18px;list-style-position:inside}.studio-update summary>strong{display:block;font:500 24px/1.3 'Playfair Display',Georgia,serif;margin:12px 0 7px}.updatemeta{display:inline-flex;flex-wrap:wrap;align-items:center;gap:12px;color:var(--muted);font-size:12px}.updatebadge{border:1px solid var(--line);border-radius:20px;padding:4px 9px;color:var(--rose)}.updatesummary{display:block;font-size:13px;line-height:1.6;color:var(--muted)}.studio-update ul{margin:0;padding:0 28px 20px 38px}.studio-update li{margin:9px 0;line-height:1.7}.studio-update summary:focus-visible{outline:3px solid var(--rose);outline-offset:-4px}@media(max-width:600px){.studio-update summary{padding:14px}.studio-update summary>strong{font-size:21px}.studio-update ul{padding:0 20px 16px 30px}}
.occupationpicker{display:grid;gap:8px;min-width:0}.occupationpicker select{width:100%;min-width:0}#characterform label>select,#tensorform label>select{max-width:100%}#characterform label>small{line-height:1.6;color:var(--muted)}#wbzipsave{display:inline-block;padding:12px;border:1px solid var(--rose);border-radius:8px;color:var(--rose)}#wbzipsave[hidden]{display:none}.wbfile>details>summary{cursor:pointer;padding:12px 0}.wbfile>details>label{display:grid;gap:8px}.wbfile>.wbfileactions{margin-top:8px}

/* Keep short identity fields compact beside longer controls. */
#characterstep1>.toolformgrid{align-items:start}
#characterstep1>.toolformgrid>label{align-self:start;align-content:start}
#characterstep1 .occupationfield{grid-column:1/-1}
#characterstep1 .occupationpicker{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:700px){#characterstep1 .occupationpicker{grid-template-columns:1fr}}
#charactertraits.traitpicker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}#charactertraits.traitpicker>:is(select,input){width:100%;min-width:0}#charactertraits.traitpicker>button{justify-self:start;min-height:40px}#charactertraits.traitpicker>.selectedtraits{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px}.selectedtraits button{font-size:12px;padding:8px 11px;min-height:40px}.selectedtraits p{font-size:12px;line-height:1.6}.voicepanel>label{display:grid;gap:7px}.voicepanel .toolformgrid{align-items:start}.voicepanel p{font-size:12px;line-height:1.7}#flawpreset{display:block;margin-top:8px}#flawcustom{margin:10px 0}#characterstep2 .toolformgrid>label{align-content:start}@media(max-width:600px){#charactertraits.traitpicker{grid-template-columns:1fr}#charactertraits.traitpicker>button{width:100%;min-height:44px}.selectedtraits button{min-height:44px}}