/* Studio: Terminal (kiri) + Lab (kanan) + Write-up (tengah bawah), plus animasi fitur baru.
   Aturan animasi: hanya transform/opacity, gerak terus-menerus hanya saat terlihat (.vis), mati di mode Hemat. */
.studio{padding:11vh 4vw 9vh}
.studio .mask{margin-bottom:3.5vh}
.dkg{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
.dk{--ea:cubic-bezier(.2,.9,.1,1);position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;background:var(--bg);color:var(--fg);border:2px solid var(--bd);scroll-margin-top:72px}
.dk-t{--bg:#121212;--fg:#f2f2f2;--bd:rgba(242,242,242,.34);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.dk-l{--bg:#f2f2f2;--fg:#0a0a0a;--bd:rgba(10,10,10,.32)}
.dk-w{--bg:#2c2c2c;--fg:#f2f2f2;--bd:rgba(242,242,242,.3)}
.dkh{display:flex;align-items:baseline;gap:6px 14px;flex-wrap:wrap;padding:12px 16px 10px;border-bottom:2px solid var(--bd)}
.dkh h3{font:400 clamp(1rem,2.6vw,1.25rem)/1.1 var(--cc)}
.dkh p{font:500 .85rem/1.35 var(--fg2);opacity:.7;margin:0}
.dkh code{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:700}
.dkb{flex:1 1 0;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:auto;touch-action:pan-y;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--fg) transparent}
@media(min-width:900px){
  .dkg{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .dk-t,.dk-l{height:clamp(500px,76vh,680px);max-height:calc(100svh - 96px)}
  .dk-w{grid-column:1/-1}
}
/* terminal */
.dk .term{flex:1;display:flex;flex-direction:column;min-height:0;margin:0;max-width:none;border:0;background:transparent}
.dk .tbar{display:none}
.dk .tout{flex:1;height:auto;min-height:0}
@media(max-width:899px){.dk .tout{flex:none;height:clamp(230px,40vh,330px)}}
.dk .tchips{flex-wrap:nowrap;overflow-x:auto;margin:0;max-width:none;padding:10px 12px;gap:8px;border-top:2px solid var(--bd);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.dk .tchips::-webkit-scrollbar{display:none}
.dk .tchips .btn{flex:none}
.dk .tin{padding:10px 14px}
/* lab */
.dk .tabs{position:relative;flex:none;flex-wrap:nowrap;overflow-x:auto;margin:0;max-width:none;scrollbar-width:none;-webkit-overflow-scrolling:touch;border-bottom:2px solid var(--bd)}
.dk .tabs::-webkit-scrollbar{display:none}
.dk .tabs button{flex:none;padding:12px 18px;margin:0;border:0;transition:opacity .25s}
.dk .tabs button[aria-selected=true]{background:none}
.dk .tabs .ink{position:absolute;left:0;bottom:0;width:1px;height:4px;background:var(--fg);transform-origin:0 50%;transform:translate3d(var(--x,0px),0,0) scaleX(var(--w,0));transition:transform .5s var(--ea,cubic-bezier(.2,.9,.1,1))}
.dk .lp{max-width:none;padding:16px 16px 20px;gap:14px}
/* write-up */
.dk-w #wlist{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:0 28px;align-items:start;padding:0 16px;margin:0;max-width:none;border:0;overflow:visible}
.dk-w .wu{border-bottom:0;border-top:2px solid var(--bd)}
.dk-w .wh{padding:16px 0}
.wb{display:grid;grid-template-rows:1fr;opacity:1;transition:grid-template-rows .5s var(--ea,cubic-bezier(.2,.9,.1,1)),opacity .35s}
.wb[hidden]{display:grid!important;grid-template-rows:0fr;opacity:0;visibility:hidden;transition:grid-template-rows .45s cubic-bezier(.2,.9,.1,1),opacity .25s,visibility 0s .45s}
.wbi{min-height:0;overflow:hidden;display:grid;gap:18px}
.wbi>:last-child{margin-bottom:22px}
.wb{padding:0}
/* ===== animasi ===== */
.sjs .dk{opacity:0;transform:translate3d(0,44px,0) scale(.97);transition:opacity .7s var(--ea),transform .95s var(--ea);transition-delay:calc(var(--d,0)*130ms)}
.sjs .dk.in{opacity:1;transform:none}
.dk::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(105deg,transparent 38%,color-mix(in srgb,var(--fg) 16%,transparent) 50%,transparent 62%);transform:translate3d(-130%,0,0)}
.dk.in::before{animation:glint 1.4s calc(var(--d,0)*130ms + .45s) var(--ea) 1 both}
@keyframes glint{to{transform:translate3d(130%,0,0)}}
.dk-t::after{content:"";position:absolute;left:0;right:0;top:0;height:30%;z-index:3;pointer-events:none;background:linear-gradient(transparent,color-mix(in srgb,var(--fg) 8%,transparent),transparent);transform:translate3d(0,-110%,0)}
.dk-t.vis::after{animation:scan 5.5s linear infinite}
@keyframes scan{to{transform:translate3d(0,340%,0)}}
.tl{animation:tl .3s var(--ea) both}
@keyframes tl{from{opacity:0;transform:translate3d(-10px,0,0)}}
.dk-t.vis .ps{animation:ps 1.6s ease-in-out infinite}
@keyframes ps{50%{opacity:1}}
.dk.in .tchips .btn{animation:pop .55s var(--ea) calc(var(--i,0)*70ms + .6s) both}
@keyframes pop{from{opacity:0;transform:translate3d(0,14px,0) scale(.8)}}
.dk .tchips .btn:active,.dk .lp .btn:active,.dk .wa .btn:active{transform:scale(.94)}
.tabs button:active{opacity:1}
.lp{animation:lpin .45s var(--ea,cubic-bezier(.2,.9,.1,1)) both}
@keyframes lpin{from{opacity:0;transform:translate3d(18px,0,0)}}
.meter i.on{transform-origin:50% 100%;animation:seg .45s cubic-bezier(.2,.9,.1,1)}
@keyframes seg{from{transform:scaleY(.15)}}
.hx .df{animation:dfl .6s ease-out}
@keyframes dfl{from{background:transparent;color:inherit}}
.dk-w.in .wu{animation:wuin .65s var(--ea) calc(var(--i,0)*90ms + .3s) both}
@keyframes wuin{from{opacity:0;transform:translate3d(0,26px,0)}}
.wx:not([hidden]),.wsol:not([hidden]){animation:lpin .4s var(--ea) both}
.wu.open .ws{animation:wuin .55s var(--ea) .12s both}
.wu.open .ws+.ws{animation-delay:.22s}.wu.open .ws+.ws+.ws{animation-delay:.32s}.wu.open .ws+.ws+.ws+.ws{animation-delay:.42s}
/* fitur lain: Tanya AI, Statistik, Rahasia */
.sjs .chat{opacity:0;transform:translate3d(0,36px,0);transition:opacity .7s var(--ea),transform .9s var(--ea,cubic-bezier(.2,.9,.1,1))}
.sjs .chat.in{opacity:1;transform:none}
.cb{animation:cbin .42s cubic-bezier(.2,.9,.1,1) both}
.cb.user{--fx:16px}.cb:not(.user){--fx:-16px}
@keyframes cbin{from{opacity:0;transform:translate3d(var(--fx,0),10px,0) scale(.96)}}
.in .tchips .btn,#csug.in .btn{animation:pop .55s cubic-bezier(.2,.9,.1,1) calc(var(--i,0)*70ms) both}
.sjs .gt{opacity:0;transform:translate3d(0,22px,0);transition:opacity .6s,transform .8s cubic-bezier(.2,.9,.1,1);transition-delay:calc(var(--i,0)*110ms)}
.sjs .gtiles.in .gt{opacity:1;transform:none}
.sjs .gheat i{opacity:0;transform:scale(.3)}
.sjs .gheat.in i{opacity:1;transform:none;transition:opacity .4s,transform .5s cubic-bezier(.2,.9,.1,1);transition-delay:calc(var(--i,0)*38ms)}
.sjs .gl i::after{transform:scaleX(0);transform-origin:0 50%;transition:transform 1.1s cubic-bezier(.2,.9,.1,1) calc(var(--i,0)*130ms + .25s)}
.sjs .glangs.in .gl i::after{transform:none}
.sjs .gr{opacity:0;transform:translate3d(0,22px,0);transition:opacity .6s,transform .8s cubic-bezier(.2,.9,.1,1),border-color .25s,background-color .25s;transition-delay:calc(var(--i,0)*100ms),calc(var(--i,0)*100ms),0s,0s}
.sjs .grecent.in .gr{opacity:1;transform:none}
.flagbox{position:relative;overflow:hidden}
.flagbox::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 40%,color-mix(in srgb,var(--fg) 25%,transparent) 50%,transparent 60%);transform:translate3d(-130%,0,0)}
.flagbox.vis::after{animation:glint 2.6s 1s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.sjs .dk,.sjs .chat,.sjs .gt,.sjs .gr,.sjs .gheat i{opacity:1;transform:none}.sjs .gl i::after{transform:none}.dk::before,.dk-t::after,.flagbox::after{display:none}}
.lite .dk::before,.lite .dk-t::after,.lite .flagbox::after{display:none}
.lite .dk-t.vis .ps{animation:none}
.lite .sjs .dk,.sjs.lite .dk{transform:translate3d(0,24px,0)}
.lite.sjs .dk{transform:translate3d(0,24px,0);transition-duration:.5s,.6s}
.lite.sjs .dk.in{transform:none}
.lite .tl{animation-duration:.18s}

/* Sembunyikan kursor ketik di teks biasa (muncul saat Caret Browsing aktif di browser). Kolom isian tetap punya kursor. */
body{caret-color:transparent}
input,textarea,select{caret-color:currentColor}
.tin input{caret-color:var(--fg)}