.social-depth{max-width:1100px;margin:auto;color:#294a3b;text-align:start;line-height:1.65}
.social-depth *{box-sizing:border-box}
.social-depth button,.social-depth select,.social-depth input,.social-depth textarea{font:inherit;color:inherit;max-width:100%;border:1px solid #a5b5a3;border-radius:.8rem;background:#fffdf7;padding:.6rem .8rem;min-height:46px;line-height:1.5}
.social-depth button{cursor:pointer;white-space:normal;overflow-wrap:anywhere}
.social-depth button:disabled{cursor:default;opacity:.48}
.social-depth button[aria-pressed=true],.social-depth .depth-current{background:#dbe9d8;border-color:#507756;box-shadow:inset 0 0 0 1px #507756}
.social-depth :is(button,input,textarea,select):focus-visible{outline:3px solid #506fa0;outline-offset:3px}
.social-depth :is(h3,h4,p){overflow-wrap:anywhere}
.social-depth h3,.social-depth h4{line-height:1.6;margin:.6rem 0}
.social-depth p{margin:.6rem 0}
.depth-tabs,.depth-actions,.depth-roles{display:flex;gap:.6rem;flex-wrap:wrap;margin:1rem 0}
.depth-tabs button,.depth-actions button,.depth-roles button{flex:1 1 9rem}
.social-depth label{display:block;font-weight:650;margin:.6rem 0 .3rem}
.social-depth select,.social-depth textarea,.social-depth input{width:100%}
.social-depth textarea{min-height:6rem;resize:vertical}
.depth-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:1.3rem;align-items:start;margin-top:1.1rem}
.depth-image{margin:0;border:1px solid #ddd9c5;border-radius:1rem;overflow:hidden;background:#f5efdf}
.depth-image img{display:block;width:100%;max-height:420px;object-fit:contain}
.depth-image figcaption{padding:.6rem 1rem}
.depth-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
.depth-choices button{text-align:start}
.depth-choices button::before{content:'○';margin-inline-end:.5rem}
.depth-choices button[aria-pressed=true]::before{content:'●'}
.depth-prompt{font-size:1.15rem;line-height:1.7}
.depth-muted{font-size:.92rem;color:#5e6958}
.depth-record{background:#eef2e7;border-radius:1rem;padding:.8rem 1rem;margin:.8rem 0;overflow-wrap:anywhere}
.depth-panels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem;list-style:none;padding:0;margin:1rem 0}
.depth-panel{border:1px solid #becbb7;border-radius:1rem;padding:.7rem;min-width:0;background:#fffdf8}
.depth-panel .depth-image img{height:130px;object-fit:cover}
.depth-panel .depth-image figcaption{font-size:.9rem;padding:.3rem .5rem}
.depth-panel .depth-actions{display:grid;grid-template-columns:1fr 1fr;gap:.3rem;margin:.6rem 0 0}
.depth-panel .depth-actions button{font-size:.9rem;padding:.5rem}
.depth-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem;margin:1rem 0}
.depth-column{padding:.6rem;border-radius:1rem;background:#f0f2e9;min-width:0;border:1px solid #cad2c1}
.depth-column>h4{padding:.4rem .5rem;margin:0 0 .6rem;background:#dbe6d4;border-radius:.6rem}
.depth-column .depth-panel{margin:.7rem 0}
.depth-frame{height:135px;overflow:hidden;background:#f8f4e9;border-radius:.7rem}
.depth-frame svg,.depth-frame img{width:100%;height:100%;object-fit:contain}
.depth-routine-add{display:grid;grid-template-columns:2fr 1fr auto;gap:.7rem;align-items:end}
.depth-replay{max-width:760px;margin:auto}
.depth-replay-nav{display:grid;grid-template-columns:1fr auto 1fr;gap:.8rem;align-items:center;margin:1rem 0}
.depth-name-row{display:grid;grid-template-columns:2fr 1fr 1fr;gap:.7rem;align-items:end;margin:1rem 0}
.depth-saved{list-style:none;padding:0;display:grid;gap:1rem}
.depth-saved>li{padding:1rem;border:1px solid #bdcbb6;border-radius:1rem;background:#f7f5eb}
.depth-miniatures{display:flex;gap:.5rem;overflow:hidden}
.depth-miniatures img{width:80px;height:60px;object-fit:cover;border-radius:.5rem}
.social-depth details{border-radius:1rem;background:#f7f5ee;padding:1rem;margin:1rem 0}
.social-depth summary{cursor:pointer;font-weight:650}
.social-depth [hidden]{display:none!important}
@media(max-width:760px){.depth-layout{grid-template-columns:1fr}.depth-panels{grid-template-columns:repeat(2,minmax(0,1fr))}.depth-strip{grid-template-columns:1fr}.depth-column .depth-panel{display:block}.depth-routine-add,.depth-name-row{grid-template-columns:1fr 1fr}.depth-routine-add>div:first-child,.depth-name-row>div:first-child{grid-column:1/-1}.depth-frame{height:180px}.depth-column{padding:.8rem}}
@media(max-width:400px){.depth-panels{grid-template-columns:1fr}.depth-choices{grid-template-columns:1fr}.depth-replay-nav{gap:.4rem}.depth-panel .depth-image img{height:180px}}
@media(prefers-reduced-motion:reduce){.social-depth *{transition:none!important;animation:none!important;scroll-behavior:auto}}