@font-face{font-family:Kota;src:url('../assets/kota-book.woff')}@font-face{font-family:Kota;src:url('../assets/kota-demi.woff');font-weight:700}:root{--ink:#26464e;--muted:#627a7e;--teal:#11646b;--purple:#775196;--line:#dce5dc;--paper:#fffff8}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;font:16px/1.35 Kota,Arial,sans-serif;color:var(--ink);background:linear-gradient(120deg,#e8f5ee,#eee9f7)}button,select,input,textarea{font:inherit}button,a{touch-action:manipulation}button{border:1px solid #d7e2d6;background:#f7f9ed;color:#214f57;font-weight:700;border-radius:13px;padding:10px 15px;min-height:46px;cursor:pointer}button:disabled{opacity:.4;cursor:default}button:hover:not(:disabled){filter:brightness(.97)}.primary{background:var(--teal);border-color:var(--teal);color:white}.story-shell{min-height:100dvh;display:flex;flex-direction:column}.topbar{padding:15px 24px;display:flex;align-items:center;gap:16px;background:var(--paper);border-bottom:1px solid var(--line)}.back{display:grid;place-items:center;width:48px;height:48px;color:var(--teal);background:#ecf2e2;border-radius:15px;text-decoration:none;font-size:34px}.brand{display:flex;gap:12px;align-items:center}.brand>span{font-size:40px}h1{margin:0;font-size:30px;line-height:1.1}.brand p{margin:4px 0 0;font-size:15px;color:var(--muted)}.tools{display:flex;gap:10px;margin-left:auto}.tools button:last-child{font-size:26px;min-width:48px;padding:3px}main{padding:14px 20px;max-width:1800px;width:100%;margin:auto;flex:1;display:flex;flex-direction:column;gap:12px}.story-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.story-heading>label{color:var(--purple);font-size:12px;letter-spacing:.1em;font-weight:700;max-width:60%}.story-heading input{display:block;border:0;border-bottom:2px solid #cbdccc;background:transparent;font-size:25px;padding:3px 0;letter-spacing:normal;color:var(--ink);width:100%}.heading-actions{display:flex;align-items:center;gap:15px}#gradeBadge{color:var(--purple);font-size:14px;font-weight:700}.editor{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px;flex:1;min-height:0}.stage-column{min-width:0;display:flex;flex-direction:column;background:var(--paper);border-radius:23px;border:1px solid var(--line);padding:12px;gap:10px}.stage-top{display:flex;align-items:center;gap:15px}.stage-top label{display:flex;align-items:center;gap:8px;margin-left:auto}.stage-top select{max-width:180px}.stage-top button{font-size:14px;min-height:40px;padding:8px 12px}.stage{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:16px;background-size:cover;background-position:center;touch-action:none;user-select:none;min-height:160px}.park{background-image:url('../kota-bentuk/assets/playground.webp')}.classroom{background-image:url('assets/classroom.webp')}.forest{background-image:url('assets/forest.webp')}#actors{position:absolute;inset:0;pointer-events:none}.actor{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;border:2px solid transparent;border-radius:20px;background:transparent;padding:2px 8px;min-height:0;line-height:1;pointer-events:auto;touch-action:none}.actor .emoji{display:block;filter:drop-shadow(0 4px 2px #24373b20);font-size:clamp(35px,6vw,88px);line-height:1.05;transform:scaleX(var(--flip,1))}.actor .name{display:block;background:#fffef2ed;padding:5px 10px;border-radius:15px;font-size:14px;line-height:1;color:#2b4f52;margin-top:3px;white-space:nowrap}.actor.selected{background:#ffffff45;border:2px dashed #1d666e}.actor:focus-visible{outline:3px solid #c28013}.actor-tools{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.actor-tools>span{flex:1;font-size:14px;min-width:160px}.actor-tools button{font-size:14px;min-height:40px;padding:7px 12px}.actor-bank{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:7px}.actor-bank button{font-size:13px;display:flex;flex-direction:column;align-items:center;padding:8px 3px;min-height:66px;background:#f4f2fc;border-color:#e5deee;font-weight:700;color:#61516d}.actor-bank button span{font-size:30px;line-height:1.15}.actor-bank button.selected{outline:3px solid var(--purple);background:#e8ddf7}#emptyStage{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);background:#fffff4e6;padding:18px 30px;text-align:center;border-radius:22px;width:max-content;max-width:90%;pointer-events:none}#emptyStage>span{display:block;font-size:33px}#emptyStage b{font-size:22px}#emptyStage p{margin:7px 0 0;font-size:15px}.script-panel{background:var(--paper);border:1px solid var(--line);border-radius:23px;padding:18px;display:flex;flex-direction:column;gap:10px;min-height:0}.eyebrow{font-size:13px;color:var(--purple);font-weight:700;letter-spacing:.09em}label{display:block;font-weight:700;font-size:15px}input,textarea,select{border:1px solid #cddcd4;border-radius:10px;background:white;color:var(--ink);padding:10px;width:100%;margin-top:5px}select{margin-top:0;width:auto;min-height:42px}textarea{resize:vertical;min-height:115px;line-height:1.5;font-weight:400}#wordCount{margin:-5px 0 0;text-align:right;font-size:13px;color:var(--muted)}.prompt{background:#f2eafa;border-radius:15px;padding:14px;color:#604576}.prompt p{font-size:16px;margin:6px 0 10px}.prompt button{background:#fdfaff;border-color:#ddceeb;font-size:14px;min-height:38px;padding:7px 13px}.note{font-size:14px;color:var(--muted);margin:0}.script-panel>button{margin-top:auto}.timeline-panel{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:12px 15px}.timeline-head{display:flex;align-items:center;justify-content:space-between;gap:15px}.timeline-head small{font-size:14px;background:#eae6f4;border-radius:10px;padding:5px 8px;margin-left:10px;color:var(--purple)}.timeline-head>div{display:flex;gap:7px}.timeline-head button{min-height:36px;font-size:14px;padding:7px 12px}.timeline{display:flex;gap:9px;margin-top:10px;overflow-x:auto;padding:3px}.scene-chip{min-width:125px;max-width:200px;flex:1;position:relative;text-align:left;display:flex;align-items:center;gap:9px;padding:9px 10px;background:#f5f4ec;border-color:#e4e4d5;min-height:49px}.scene-chip.active{border:2px solid var(--purple);background:#f0e6f8}.scene-number{display:grid;place-items:center;background:white;border-radius:8px;width:28px;height:28px;flex-shrink:0}.scene-chip small{font-size:13px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.bottom-line{display:flex;justify-content:space-between;align-items:center;gap:12px}.bottom-line p{margin:0;font-size:15px;color:#41666d}.bottom-line>div{display:flex;gap:7px}.bottom-line button{font-size:14px;min-height:38px;padding:8px 12px}footer{text-align:center;padding:0 10px 10px;font-size:14px;color:#4d6d69}dialog{border:0;border-radius:24px;padding:28px;color:var(--ink);font-family:inherit;max-width:590px;width:calc(100% - 30px);max-height:92dvh;overflow:auto}dialog::backdrop{background:#173b5088}dialog h2{margin:0 0 18px;font-size:26px}dialog label{margin-bottom:18px}dialog select{display:block;width:100%;margin-top:8px}.check{display:flex;align-items:center;gap:12px}.check input{width:23px;height:23px}.dialog-actions{display:flex;gap:10px;justify-content:flex-end}dialog form{text-align:right}#reviewContent p{background:#eef4e6;padding:12px;border-radius:12px}#playerDialog{max-width:1300px;width:95vw;padding:20px;background:var(--paper)}.player-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.player-head h2{margin:0}.player-head button{margin-left:20px}.player-caption{padding:16px 10px 12px}.player-caption b{font-size:22px}.player-caption p{margin:8px 0 0;font-size:19px;white-space:pre-wrap;max-height:150px;overflow:auto}.player-controls{display:flex;justify-content:space-between;align-items:center;gap:12px}#playStage{max-height:57vh;aspect-ratio:16/9;margin:auto}#playStage .actor{cursor:default}#playStage .actor .emoji{font-size:90px}@media(min-width:1100px) and (min-height:700px){.story-shell{height:100dvh}.topbar{padding-block:10px}main{min-height:0}.stage-column{min-height:0}.stage{flex:1;aspect-ratio:auto}.editor{min-height:290px}.actor-bank button{min-height:60px;padding-block:5px}.timeline-panel{flex-shrink:0}.script-panel{overflow:auto}.script-panel textarea{min-height:95px}.script-panel .prompt{padding:10px}.script-panel .prompt p{margin:5px 0 7px}.script-panel .note{font-size:13px}.timeline-head{min-height:36px}}@media(max-width:1050px){.editor{grid-template-columns:minmax(0,1fr) 270px}.brand p{display:none}.topbar{padding:12px 16px}.brand h1{font-size:27px}.actor-bank{grid-template-columns:repeat(4,1fr)}.actor-tools span{width:100%;flex:auto}.timeline-head{align-items:flex-start;flex-direction:column}.script-panel{padding:14px}main{padding:12px}.actor .emoji{font-size:64px}}@media(max-width:740px){.editor{grid-template-columns:1fr}.script-panel{display:grid;grid-template-columns:1fr}.brand>span{display:none}.brand h1{font-size:23px}.tools button{font-size:14px;padding:8px}.topbar{gap:10px}.story-heading{align-items:flex-start;flex-direction:column}.story-heading>label{max-width:100%;width:100%}.heading-actions{width:100%;justify-content:space-between}.stage-top{flex-wrap:wrap;gap:7px}.stage-top select{max-width:150px}.stage-top button{padding:6px;font-size:12px}.actor-tools span{min-width:100%}.actor .emoji{font-size:45px}.actor .name{font-size:12px}.timeline-head>div{flex-wrap:wrap}.bottom-line{flex-direction:column;align-items:flex-start}.player-controls{flex-wrap:wrap}.player-controls button{font-size:14px}.player-head h2{font-size:20px}.player-caption p{font-size:17px}#playStage .actor .emoji{font-size:48px}}