.twin-portrait-workspace { display:grid; grid-template-columns:minmax(320px,1fr) minmax(340px,1fr); align-items:start; gap:24px; margin-top:12px; }
.twin-portrait-workspace [hidden] { display:none !important; }
.twin-back-to-avatar { display:none; }
.twin-portrait-workspace .digital-stage { height:clamp(480px,calc(100dvh - 230px),640px); min-height:480px; border-radius:8px; }
.twin-portrait-workspace .digital-stage-copy { padding:24px; pointer-events:none; }
.twin-portrait-workspace .digital-stage-copy h3 { font-size:28px; line-height:1.2; margin:8px 0; }
.twin-portrait-workspace .digital-stage-copy p:not(.eyebrow) { color:#c2dcd5; font-size:13px; margin:0; }
.twin-portrait-workspace .digital-avatar { top:95px; bottom:auto; height:calc(100% - 95px); width:100%; }
.twin-portrait-workspace .dh-avatar-rig { height:100%; }
.twin-portrait-workspace .dh-portrait { height:100%; max-width:100%; object-fit:contain; }
.twin-portrait-workspace .dh-hotspot-layer { inset:0; width:100%; height:100%; transform:none; pointer-events:none; }
.twin-portrait-workspace .dh-hotspot { opacity:1; visibility:visible; pointer-events:auto; display:inline-flex; align-items:center; gap:7px; padding:10px 12px; border-radius:8px; background:#133e3ee8; border:1px solid #70b6ab; color:#f3ffff; font-size:13px; box-shadow:0 4px 18px #001e2855; transform:none; transition:background .2s,box-shadow .2s; }
.twin-portrait-workspace .dh-hotspot svg { width:17px; height:17px; }
.twin-portrait-workspace .dh-hotspot:hover,.twin-portrait-workspace .dh-hotspot.active { background:#176f63; box-shadow:0 0 0 3px #90edda30; }
.twin-portrait-workspace .dh-hotspot.twin-incomplete { border-color:#d7a39f; }
.twin-missing-marker { width:9px; height:9px; flex:0 0 9px; border-radius:50%; background:#ee5c52; box-shadow:0 0 0 3px #ee5c5233; }
.twin-lock-marker { display:inline-flex; width:15px; height:15px; flex:0 0 15px; color:#ff7067; filter:drop-shadow(0 0 4px #ef4b44); }
.twin-lock-marker .ws-icon { width:15px; height:15px; }
.twin-portrait-workspace .twin-locked { opacity:.65; cursor:not-allowed; }
.twin-portrait-workspace .twin-unlock-ready { border-color:#f4b762; box-shadow:0 0 0 3px #f4b76233,0 0 18px #f4b76266; animation:twin-unlock-pulse 2.2s ease-in-out 3; }
@keyframes twin-unlock-pulse { 50% { box-shadow:0 0 0 6px #f4b76220,0 0 24px #f4b7629c; } }
@media(prefers-reduced-motion:reduce){.twin-portrait-workspace .twin-unlock-ready{animation:none}}
.twin-portrait-workspace .twin-profile { left:16px; top:33%; }
.twin-portrait-workspace .twin-thinking { right:16px; top:33%; }
.twin-portrait-workspace .twin-personality { left:16px; top:52%; }
.twin-portrait-workspace .twin-consumption { right:16px; top:52%; }
.twin-portrait-workspace .twin-expression { left:16px; top:71%; }
.twin-portrait-workspace .twin-experiences { right:16px; top:71%; }
.twin-stage-actions { position:absolute; z-index:40; bottom:16px; left:16px; right:16px; display:flex; justify-content:center; gap:8px; }
.twin-stage-actions button { display:inline-flex; align-items:center; justify-content:center; gap:6px; border:1px solid #83b4ac; background:#082b30ef; color:#fff; border-radius:6px; min-height:42px; padding:8px 12px; font-size:13px; }
.twin-stage-actions button.active,.twin-stage-actions button:hover { background:#176f63; }
.twin-stage-actions svg { width:16px; height:16px; flex-shrink:0; }
.twin-portrait-workspace button:focus-visible { outline:3px solid #e9b440; outline-offset:3px; }
.twin-portrait-workspace .dh-panel { height:clamp(480px,calc(100dvh - 230px),640px); overflow:auto; min-width:0; border:0; border-radius:0; box-shadow:none; background:transparent; padding:0 2px; display:block; scroll-margin-top:80px; }
.twin-progress-overview { display:flex; align-items:center; gap:20px; padding:20px; margin:0 0 18px; background:#edf6f2; border:1px solid #d3e5dc; border-radius:8px; }
.twin-progress-ring { --twin-progress:0%; position:relative; width:112px; height:112px; flex:0 0 112px; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:50%; background:conic-gradient(#178566 var(--twin-progress),#cddfd6 0); color:#194c3c; }
.twin-progress-ring::before { content:""; position:absolute; inset:9px; border-radius:50%; background:#edf6f2; }
.twin-progress-ring strong,.twin-progress-ring span { position:relative; z-index:1; line-height:1.1; }
.twin-progress-ring strong { font-size:27px; font-weight:750; }
.twin-progress-ring span { margin-top:6px; font-size:10px; color:#617d6d; }
.twin-progress-copy { flex:1; min-width:0; }
.twin-progress-label { font-size:10px; font-weight:750; color:#427b64; }
.twin-portrait-workspace .twin-progress-copy h3 { font-size:19px; margin:5px 0 3px; }
.twin-progress-copy p { margin:0 0 14px; font-size:12px; color:#637970; }
.twin-reward-line { display:flex; align-items:baseline; flex-wrap:wrap; justify-content:space-between; gap:4px 12px; padding-top:11px; border-top:1px solid #d1e2d9; }
.twin-reward-line span { font-size:12px; color:#486759; }
.twin-reward-line strong { font-size:21px; color:#126f50; }
.twin-progress-copy small { display:block; margin-top:5px; font-size:11px; line-height:1.5; color:#657c70; }
.twin-rate-details { margin-top:7px; font-size:11px; line-height:1.5; color:#526c5e; }
.twin-rate-details summary { cursor:pointer; color:#126e51; font-weight:700; }
.twin-rate-details p { margin:7px 0 0; overflow-wrap:anywhere; }
.twin-progress-next { display:inline-flex; align-items:center; gap:6px; margin-top:11px; padding:0; border:0; background:transparent; color:#126e51; font:inherit; font-size:12px; font-weight:700; cursor:pointer; }
.twin-progress-next svg { width:14px; height:14px; }
.twin-progress-next:hover { text-decoration:underline; }
.twin-portrait-workspace .tg-tabs button.twin-incomplete { display:inline-flex; align-items:center; justify-content:center; gap:6px; }
.twin-portrait-workspace .tg-tabs .twin-missing-marker { width:7px; height:7px; flex-basis:7px; }
.twin-portrait-workspace .dh-panel h3 { font-size:20px; line-height:1.4; margin:0 0 16px; }
.twin-portrait-workspace .tg-tabs { margin:0 0 20px; position:sticky; top:0; background:#f7f9f8; z-index:2; }
.twin-portrait-workspace .tg-tabs button { white-space:normal; font-size:13px; padding:14px 10px; }
.twin-portrait-workspace .tg-center .tg-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; overflow:visible; }
.twin-portrait-workspace .tg-center .tg-tabs button { flex:1; }
.tg-core-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 16px; margin:0; }
.tg-core-summary>div { padding:12px 0; border-bottom:1px solid #dce6e2; min-width:0; }
.tg-core-summary dt { font-size:12px; color:#71847b; margin-bottom:6px; }
.tg-core-summary dd { font-size:14px; color:#24473a; margin:0; overflow-wrap:anywhere; white-space:pre-wrap; line-height:1.6; }
.tg-section-label { font-size:12px; color:#688175; margin:24px 0 6px; }
.tg-dialog [hidden] { display:none !important; }
.tg-choice-field { min-width:0; }
.tg-material-status { display:block; color:#71847b; font-size:12px; font-weight:400; margin-top:4px; }
.tg-choice-field [data-choice-custom] { padding:12px; background:#f3f7f5; border-radius:6px; }
.twin-portrait-workspace .tg-panel-title { align-items:flex-start; gap:12px; }
.twin-portrait-workspace .tg-panel-title h3 { font-size:18px; margin-bottom:6px; }
.twin-portrait-workspace .tg-panel-title p { font-size:13px; line-height:1.6; }
.twin-portrait-workspace .tg-panel-title button { flex-shrink:0; font-size:12px; }
.twin-portrait-workspace .tg-modules { grid-template-columns:1fr; gap:8px; }
.twin-portrait-workspace .tg-module { border-radius:6px; min-height:68px; }
.twin-appearance-fields { display:grid; gap:20px; }
.twin-appearance-fields label { display:grid; gap:8px; font-size:13px; }
.twin-appearance-fields input,.twin-appearance-fields select { width:100%; min-height:44px; }
.twin-portrait-workspace .dh-form-card { border:0; padding:20px 0; background:transparent; }
.twin-portrait-workspace .dh-chat { border:0; padding:0; border-radius:0; background:transparent; }
.twin-portrait-workspace .dh-chat-log { height:390px; border-radius:6px; background:#eef5f2; padding:16px; }
.twin-portrait-workspace .dh-voice-row { flex-wrap:wrap; }
.twin-portrait-workspace .dh-chat-input input { min-width:0; }
.twin-growth-below { margin-top:36px; padding-top:28px; border-top:1px solid #d7e2dd; scroll-margin-top:80px; }
.twin-growth-below .tg-header { min-height:0; padding:0; background:transparent; border:0; }
.twin-growth-below .tg-header h2 { font-size:23px; margin:8px 0; }
.twin-growth-below .tg-header p { max-width:760px; }
.twin-growth-below .tg-growth-details { border-top:1px solid #d7e2dd; padding-top:24px; margin-top:24px; }
@media (max-width:1100px) and (min-width:901px) {
  .twin-portrait-workspace { grid-template-columns:minmax(300px,.9fr) minmax(320px,1fr); gap:16px; }
  .twin-portrait-workspace .tg-panel-title { flex-wrap:wrap; }
}
@media (max-width:900px) {
  .twin-back-to-avatar { display:inline-flex; align-items:center; gap:6px; border:0; background:transparent; color:#176f63; padding:10px 0; margin-bottom:10px; font-size:13px; }
  .twin-back-to-avatar svg { width:16px; height:16px; }
  .twin-portrait-workspace .digital-stage { scroll-margin-top:20px; }
  .twin-portrait-workspace { grid-template-columns:minmax(0,1fr); gap:24px; }
  .twin-portrait-workspace .digital-stage { height:520px; min-height:520px; }
  .twin-portrait-workspace .digital-avatar { top:70px; height:450px; }
  .twin-portrait-workspace .dh-portrait { height:450px; }
  .twin-portrait-workspace .digital-stage-copy { padding:18px; }
  .twin-portrait-workspace .digital-stage-copy h3 { font-size:24px; }
  .twin-portrait-workspace .digital-stage-copy p:not(.eyebrow) { display:none; }
  .twin-portrait-workspace .twin-profile,.twin-portrait-workspace .twin-personality,.twin-portrait-workspace .twin-expression { left:12px; }
  .twin-portrait-workspace .twin-thinking,.twin-portrait-workspace .twin-consumption,.twin-portrait-workspace .twin-experiences { right:12px; }
  .twin-portrait-workspace .dh-panel { height:auto; min-height:360px; max-height:none; overflow:visible; }
  .twin-portrait-workspace .tg-tabs { position:static; }
  .twin-portrait-workspace .tg-modules { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:520px) {
  .twin-progress-overview { gap:14px; padding:15px; }
  .twin-progress-ring { width:96px; height:96px; flex-basis:96px; }
  .twin-progress-ring strong { font-size:23px; }
  .twin-reward-line strong { font-size:18px; }
  .twin-portrait-workspace .digital-stage { height:475px; min-height:475px; }
  .twin-portrait-workspace .digital-avatar,.twin-portrait-workspace .dh-portrait { height:405px; }
  .twin-portrait-workspace .dh-hotspot { font-size:12px; gap:5px; padding:9px; }
  .twin-stage-actions { gap:6px; left:10px; right:10px; bottom:12px; }
  .twin-stage-actions button { padding:8px; font-size:12px; flex:1; }
  .twin-portrait-workspace .tg-modules { grid-template-columns:1fr; }
  .twin-portrait-workspace .tg-panel-title { flex-wrap:wrap; }
}
@media (prefers-reduced-motion:reduce) {
  .twin-portrait-workspace *, .twin-portrait-workspace *::before, .twin-portrait-workspace *::after { animation:none !important; transition:none !important; }
}