/* Independent Studio — embedded real products and native interaction surfaces. */
.case-live .showcase-hero,.case-speaking .showcase-hero,.case-material .showcase-hero{padding-bottom:clamp(55px,5vw,90px)}
.live-experience{background:#e6ede9;padding:clamp(24px,3vw,44px) 0 clamp(50px,5vw,90px)}
.live-browser-head{background:#172d35;color:#f4faf6;min-height:62px;padding:10px clamp(15px,2vw,29px);display:flex;justify-content:space-between;align-items:center;gap:18px;font-size:var(--body)}
.live-browser-head>span{display:flex;align-items:center;gap:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.live-operating-mark{width:7px;height:7px;border-radius:50%;background:#8ac4ad;flex:none}
.live-browser-head a{font-size:var(--s);display:flex;align-items:center;gap:10px;min-height:43px;border-bottom:1px solid #ffffff75}
.live-browser-head a .icon{width:18px;height:18px}
.live-app-stage{height:clamp(640px,78vh,920px);background:#fafbf8;border:1px solid #c5d3cd;border-top:0;overflow:hidden}
.live-app-stage iframe{display:block;width:100%;height:100%;border:0;background:#fafbf8}
.case-live .showcase-spec-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.practice-section{background:#294a50;color:#f1f6f4;padding:clamp(60px,6.5vw,110px) 0}
.practice-grid{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(30px,5vw,90px);align-items:start}
.practice-article h2{font-size:clamp(38px,4.4vw,68px);font-weight:400;line-height:1.17;letter-spacing:-.045em;margin:32px 0 16px}
.practice-article>p{font-size:var(--body);line-height:1.8;color:#d1dfdd}
.practice-scenario{margin-top:55px;border-top:1px solid #bfd2cf75;padding-top:21px}
.practice-scenario blockquote{font-size:clamp(25px,2.5vw,40px);line-height:1.43;letter-spacing:-.025em;margin:0 0 24px}
.practice-scenario button,.practice-controls button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:9px 17px;background:transparent;color:inherit;border:1px solid #a5c5c0}
.practice-scenario button:hover,.practice-controls button:hover{background:#ffffff15}
.practice-scenario .icon,.practice-controls .icon{width:18px;height:18px}
.practice-board{background:#f8faf7;color:#193139;border:1px solid #e1ece8;box-shadow:0 29px 66px #0a22252b}
.practice-board-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:22px 25px;border-bottom:1px solid #dce6e1;font-size:var(--body)}
.practice-board-heading span:last-child{font-size:var(--s);color:#849a94}
.practice-thread{padding:28px 25px;min-height:160px;max-height:290px;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:13px}
.practice-thread p{font-size:clamp(18px,2vw,26px);line-height:1.55;letter-spacing:-.015em;max-width:86%;border-radius:2px 17px 17px 17px;background:#e5efea;padding:13px 16px;align-self:flex-start;overflow-wrap:anywhere}
.practice-thread .practice-response{background:#c8ded7;align-self:flex-end;border-radius:17px 2px 17px 17px}
.practice-board form{border-top:1px solid #d7e3dd;padding:22px 25px}
.practice-board label{display:block;font-size:var(--body);margin-bottom:12px}
.practice-board textarea{display:block;width:100%;min-height:135px;max-height:290px;padding:15px 17px;background:#fff;border:1px solid #c7d7d0;border-radius:0;color:#193139;outline:none;resize:vertical;font-size:18px;line-height:1.65;letter-spacing:normal;font-family:"Newsreader","Noto Serif TC","Noto Serif SC","Songti TC","Songti SC","PingFang TC","PingFang SC",serif;word-break:normal;overflow-wrap:break-word;white-space:pre-wrap;caret-color:#225d65;touch-action:pan-y}
.practice-board textarea:focus{border-color:#3d8790;box-shadow:0 0 0 2px #3d87901d}
.practice-board textarea::placeholder{color:#8fa09d;opacity:1}
.practice-controls{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:15px}
.practice-controls button{border-color:#a9beb7;background:#fff;color:#25494f;font-size:var(--body)}
.practice-controls button:disabled{opacity:.5;cursor:not-allowed}
.practice-controls .practice-submit{background:#27585f;color:#fff;border-color:#27585f}
.practice-controls .practice-submit:hover{background:#346d75}
.practice-footer{border-top:1px solid #e0e8e2;padding:14px 25px 18px;display:flex;justify-content:space-between;align-items:center;gap:20px;color:#718781;font-size:var(--s)}
.practice-footer button{padding:8px 0;border:0;background:none;color:#415f5a;font-size:var(--s)}
.practice-footer button:hover{text-decoration:underline;text-underline-offset:5px}
.material-section{background:#122a2d;padding:clamp(35px,4vw,65px) 0 clamp(55px,6vw,95px);color:#d4e7df}
.material-label{display:flex;justify-content:space-between;align-items:center;gap:15px;padding-bottom:16px;font-size:var(--s);letter-spacing:.05em}
#material-canvas{width:100%;height:auto;aspect-ratio:1440/860;display:block;touch-action:none;cursor:crosshair;border:1px solid #5e81767d}
.material-section p{margin-top:18px;font-size:var(--body);color:#b1cbc1}
.case-live .showcase-action,.case-speaking .showcase-action{gap:30px}
.case-live .showcase-action a,.case-speaking .showcase-action a{min-height:42px}
.showcase-page input,.showcase-page textarea,.showcase-page select,.showcase-page [contenteditable="true"]{font-size:max(16px,1rem);text-rendering:optimizeLegibility;-webkit-text-size-adjust:100%;-webkit-user-select:text;user-select:text}
@media(max-width:1000px){
 .practice-grid{grid-template-columns:1fr}
 .practice-article{max-width:820px}
 .practice-scenario{margin-top:28px}
}
@media(max-width:700px){
 .live-experience{padding:0 0 55px}
 .live-experience>.shell{padding-left:0;padding-right:0}
 .live-browser-head{padding:9px 15px;min-height:55px}
 .live-browser-head a{font-size:14px;white-space:nowrap}
 .live-app-stage{height:min(76dvh,770px);min-height:520px}
 .practice-section{padding:55px 0 70px}
 .practice-article h2{margin:20px 0 12px}
 .practice-scenario{margin:26px 0 0}
 .practice-scenario blockquote{font-size:26px}
 .practice-board-heading{padding:15px 17px}
 .practice-thread{min-height:130px;max-height:240px;padding:19px 17px}
 .practice-thread p{font-size:19px}
 .practice-board form{padding:18px 17px}
 .practice-board textarea{font-size:18px;min-height:122px}
 .practice-controls{gap:8px}
 .practice-controls button{font-size:15px;min-height:47px;padding:9px 12px}
 .practice-footer{padding:14px 17px}
 #material-canvas{min-height:400px;aspect-ratio:4/5;object-fit:cover}
 .material-section{padding:30px 0 54px}
}
@media(prefers-reduced-motion:reduce){.practice-board *,.live-experience *{animation:none!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}