.editor-page{background:#f9f6f8;overflow-x:hidden;font-size:12px}.editor-header{height:70px;background:var(--cream);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 22px;gap:20px}.editor-brand,.editor-actions{display:flex;align-items:center;gap:14px}.editor-header .brand{font-size:24px}.editor-header .brand img{width:31px;height:31px}.editor-divider{width:1px;height:23px;background:var(--line);margin:0 8px}#project-name{border:0;background:transparent;width:175px;padding:7px 0;font-size:12px;color:var(--ink);border-bottom:1px solid transparent}#project-name:focus{border-color:var(--pink)}.save-indicator{font-size:9px;color:var(--muted)}.editor-actions .language{font-size:10px;padding:7px 10px}.studio-workspace{display:grid;grid-template-columns:235px minmax(300px,1fr) 244px;height:calc(100vh - 350px);min-height:450px;max-height:820px}.media-panel,.inspector{background:#fffdfb;padding:21px 16px;overflow:auto}.media-panel{border-right:1px solid var(--line)}.inspector{border-left:1px solid var(--line)}.panel-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.panel-heading h1{font-size:15px;margin:0;letter-spacing:0}.panel-mark{font-size:23px;color:var(--hot)}.media-panel .btn{font-size:11px;min-height:39px}.import-note{font-size:9px;color:var(--muted);text-align:center;margin:11px 0 18px;line-height:1.8}.library{display:grid;grid-template-columns:1fr 1fr;gap:9px}.library-empty{grid-column:1/-1;border:1px dashed #dfcbd5;border-radius:10px;padding:26px 14px;text-align:center;line-height:1.7;color:var(--muted);font-size:11px}.library-empty .empty-symbol{font-size:25px;margin-bottom:10px;display:block;color:var(--pink)}.library-empty p{font-size:9px;margin:10px 0 0}.media-card{min-width:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:white;position:relative}.media-thumb{height:61px;width:100%;object-fit:cover;background:#f7eaf0;display:grid;place-items:center;font-size:25px;color:var(--pink)}.media-card-name{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:6px 6px 2px}.media-type{font-size:8px;color:var(--muted);margin:0 6px 5px}.media-add{font-size:17px;position:absolute;right:4px;top:34px;width:23px;height:23px;border:1px solid #ecdae2;border-radius:6px;background:#fff;color:var(--pink);line-height:1;padding:0}.sample-button{display:flex;align-items:center;gap:9px;font-size:9px;border:1px solid var(--line);border-radius:8px;background:#fff7fa;width:100%;padding:8px;margin-top:18px;text-align:left}.sample-button img{width:41px;height:31px;object-fit:cover;border-radius:5px}.sample-button span:last-child{font-size:18px;color:var(--pink);margin-left:auto}.browser-note{font-size:9px;color:var(--muted);margin-top:18px;line-height:1.8}.preview-panel{padding:0 23px 15px;display:flex;flex-direction:column;min-width:0;background:radial-gradient(ellipse at center,#f9f1f5,#f4eff2)}.preview-bar{display:flex;align-items:center;justify-content:space-between;min-height:54px;gap:10px}.preview-label{font-size:9px;letter-spacing:1.3px;font-weight:750}.preview-label span{color:var(--hot);margin-left:5px}.preview-bar select{font-size:10px;border:1px solid var(--line);border-radius:6px;background:#fffdfb;padding:5px;max-width:150px}.canvas-stage{position:relative;display:flex;align-items:center;justify-content:center;flex:1;min-height:0;padding:4px;overflow:hidden}#preview{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;background:#28232b;box-shadow:0 5px 25px #5c45551c;aspect-ratio:16/9}.canvas-empty{position:absolute;inset:4px;background:#fffaf6;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px dashed #dac4cf;border-radius:10px;padding:20px;text-align:center}.canvas-empty img{width:65px;height:65px;transform:rotate(-8deg);margin-bottom:20px;box-shadow:0 8px 30px #bf588e15;border-radius:23px}.canvas-empty h2{font-size:22px}.canvas-empty p{font-size:11px;color:var(--muted);max-width:250px}.canvas-empty .btn{font-size:11px;min-height:38px}.player-controls{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 0 3px}.player-time{display:flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums;font-size:10px;white-space:nowrap;color:var(--muted)}#current-time{color:var(--ink);font-weight:700}.play-buttons{display:flex;gap:8px;align-items:center}.icon-button,.play-button{display:grid;place-items:center;border:0;background:none;width:27px;height:28px;font-size:15px;padding:0}.play-button{border-radius:50%;color:white;background:var(--pink);width:32px;height:32px;font-size:12px}.privacy-chip{font-size:8px;color:#617569;display:flex;align-items:center;gap:5px}.privacy-chip>span:first-child{font-size:16px}.seek-bar{width:100%;height:3px;accent-color:var(--pink);margin:10px 0 0}.inspector{padding:0 15px 20px}.inspector-tabs{display:flex;border-bottom:1px solid var(--line);margin-bottom:17px;height:54px}.inspector-tabs button{flex:1;background:none;border:0;border-bottom:2px solid transparent;font-size:11px;color:var(--muted);font-weight:700}.inspector-tabs button[aria-selected=true]{border-bottom-color:var(--pink);color:var(--pink)}#selection-empty{font-size:11px;color:var(--muted);padding:15px 0}fieldset{border:0;padding:0;margin:0;min-width:0}fieldset:disabled{opacity:.42}legend{font-size:10px;font-weight:700;max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0;margin-bottom:3px}.field-group{border-bottom:1px solid var(--line);padding:14px 0}.field-group h2{font-size:11px;font-weight:700;letter-spacing:0;margin:0 0 12px}.field-group label,#export-options label{display:block;font-size:10px;margin:8px 0 6px;font-weight:600;color:var(--muted)}.field-group input:not([type=range]),.field-group textarea,.field-group select,#export-options select{width:100%;border:1px solid #e2d9df;background:#fff;border-radius:7px;padding:7px 8px;font-size:10px;color:var(--ink)}.field-group textarea{resize:vertical}.field-group input[type=range]{width:100%;accent-color:var(--pink)}.field-group input[type=color]{padding:3px;height:32px}.trim-fields,.two-fields{display:grid;grid-template-columns:1fr 1fr;gap:9px}.field-note{font-size:9px;line-height:1.8;color:var(--muted);margin:10px 0}#clip-volume-value{float:right;font-weight:400}.subtle-button{background:none;border:0;color:var(--pink);font-size:10px;text-decoration:underline;padding:8px 0}.danger{color:#a94350}.field-group .btn{font-size:10px;min-height:35px;margin-top:8px}#music-name{font-size:10px;overflow-wrap:anywhere}.timeline-panel{background:#fffdfb;border-top:1px solid var(--line)}.timeline-toolbar{display:flex;align-items:center;gap:20px;height:53px;padding:0 22px;border-bottom:1px solid #f0e7eb}.timeline-toolbar h2{font-size:12px;margin:0;min-width:108px;letter-spacing:0}.timeline-tools{display:flex;align-items:center;gap:6px}.tool-button{border:1px solid transparent;background:none;border-radius:6px;min-width:29px;height:29px;display:flex;align-items:center;gap:6px;justify-content:center;font-size:15px;padding:3px 7px}.tool-button:hover{border-color:var(--line);background:#faeef4}.tool-button span+span{font-size:10px}.tool-divider{height:18px;width:1px;background:var(--line);margin:0 5px}.zoom-control{display:flex;align-items:center;gap:8px;margin-left:auto;font-size:12px}.zoom-control input{width:80px;accent-color:var(--pink)}.timeline-scroll{overflow:auto;position:relative;height:195px;padding:0 22px}.timeline-scroll::-webkit-scrollbar{height:7px}.timeline-scroll::-webkit-scrollbar-thumb{border-radius:7px;background:#ddc6d2}#timeline-content{position:relative;min-width:100%;height:177px;padding-top:32px}.ruler{position:absolute;top:0;left:0;right:0;height:29px;border-bottom:1px solid #e9dfe5;cursor:crosshair}.ruler-tick{position:absolute;bottom:0;width:1px;height:5px;background:#d4c6cf}.ruler-tick.major{height:9px}.ruler-tick span{position:absolute;bottom:9px;left:3px;white-space:nowrap;font-size:8px;color:#7f6b79;font-variant-numeric:tabular-nums}.clip-track{display:flex;gap:0;align-items:stretch;height:65px;min-width:100%;background:#f7f2f5;border-radius:5px}.timeline-clip{position:relative;flex-shrink:0;border:2px solid #d6b6c6;border-radius:5px;min-width:3px;overflow:hidden;background:#f3dee8 url('/assets/sakura-coast.png') center/cover;padding:0;cursor:pointer;text-align:left;height:65px}.timeline-clip.selected{border-color:var(--pink);box-shadow:0 0 0 1px var(--pink);z-index:2}.timeline-clip:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 15%,#322631aa)}.clip-title{position:absolute;z-index:1;bottom:5px;left:8px;right:7px;color:white;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:9px;text-shadow:0 1px 3px #201921}.clip-duration{position:absolute;z-index:1;top:5px;right:6px;border-radius:4px;font-size:8px;background:#fffdfae8;color:var(--ink);padding:1px 4px}.caption-track{position:relative;height:23px;margin-top:6px;min-width:100%;background:#f8f4fa;border-radius:4px}.caption-block{position:absolute;top:0;height:23px;background:#e6daef;border:1px solid #d9c4e6;color:#715780;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:4px;padding:3px 8px}.music-track{position:relative;height:25px;background:#f2f7f2;border-radius:4px;margin-top:5px;font-size:9px;color:#6c8778}.music-block{height:25px;padding:4px 9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:4px;background:repeating-linear-gradient(90deg,#dcece2 0 3px,#c1d9ca 3px 5px);border:1px solid #abcab9}.track-empty{padding:6px 10px;display:block;font-size:9px;color:#8f7f89}.playhead{position:absolute;top:24px;height:150px;width:1.5px;background:var(--pink);pointer-events:none;z-index:4}.playhead>span{position:absolute;left:-4.2px;top:-5px;width:10px;height:10px;background:var(--pink);clip-path:polygon(0 0,100% 0,100% 60%,50% 100%,0 60%)}.studio-status{display:flex;justify-content:space-between;gap:25px;border-top:1px solid var(--line);font-size:9px;padding:9px 22px;color:var(--muted);min-height:34px}.studio-status #status{overflow-wrap:anywhere}.studio-footer{display:flex;justify-content:center;gap:20px;padding:9px;font-size:9px;color:var(--muted);background:var(--cream)}.studio-footer a:hover{text-decoration:underline}#drop-overlay{position:absolute;inset:0;background:#f8e6f2ed;border:2px dashed var(--pink);display:grid;place-items:center;color:var(--pink);font-size:22px;z-index:10}#export-dialog{width:460px;padding:30px}#export-dialog h2{font-size:23px;line-height:1.4}#export-dialog p{font-size:12px}#export-options{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:5px;margin:20px 0}#export-options .field-note{grid-column:1/-1}#export-dialog .fine{font-size:10px}#export-progress{width:100%;accent-color:var(--pink);height:12px;margin-top:20px}#export-progress-text{font-variant-numeric:tabular-nums;color:var(--pink)}#export-error{color:#a63850}.export-flower{font-size:39px;color:var(--hot);display:block;margin-bottom:12px}.exporting .studio,.exporting .editor-header{pointer-events:none;user-select:none;opacity:.65}html[lang=ja] .panel-heading h1{font-size:14px}html[lang=ja] .timeline-toolbar h2{font-size:12px}html[lang=ja] .canvas-empty h2{font-size:20px}html[lang=ja] .field-group h2{font-size:11px}html[lang=ja] #export-title{font-size:23px}
@media(max-width:1100px){.save-indicator{display:none}.studio-workspace{grid-template-columns:205px minmax(250px,1fr) 218px}.editor-header{padding:0 15px}.editor-actions{gap:8px}.privacy-chip{display:none}.preview-panel{padding:0 15px 15px}#project-name{width:135px}.editor-divider{margin:0 2px}.editor-brand{gap:8px}.editor-header .btn{font-size:10px}.editor-header .brand{font-size:22px}.studio-workspace{min-height:460px}}
@media(max-width:800px){.editor-header{height:auto;min-height:100px;flex-wrap:wrap;padding:13px 16px;gap:10px}.editor-brand{width:100%}.editor-actions{width:100%;justify-content:flex-end}.editor-actions .language{margin-right:auto}.studio-workspace{grid-template-columns:160px minmax(200px,1fr);height:auto;min-height:0;max-height:none}.media-panel{padding:14px 10px;grid-row:1/3}.preview-panel{height:350px;padding:0 10px 10px}.inspector{grid-column:2;max-height:285px;border-top:1px solid var(--line);padding:0 12px 10px}.inspector-tabs{height:38px;margin-bottom:6px}.field-group{padding:8px 0}#clip-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}#clip-fields legend{display:none}#clip-fields .field-group:nth-of-type(2){grid-column:2;grid-row:1/3}.canvas-empty h2{font-size:17px}.canvas-empty p{font-size:10px}.canvas-empty img{width:45px;height:45px;margin-bottom:13px}.library{grid-template-columns:1fr}.sample-button{flex-wrap:wrap;font-size:9px}.sample-button img{display:none}.media-panel .btn{font-size:10px;padding:8px}.preview-label{font-size:7px;letter-spacing:.8px}.preview-bar select{font-size:9px;max-width:100px}.timeline-toolbar{padding:0 12px;gap:8px;flex-wrap:wrap;height:auto;min-height:73px}.timeline-toolbar h2{display:none}.timeline-tools{gap:3px}.zoom-control input{width:60px}.tool-button{min-width:25px;padding:2px 4px}.timeline-scroll{padding:0 12px}.keyboard-note{display:none}.studio-status{padding:8px 12px}.studio-footer{gap:12px;font-size:8px}html[lang=ja] .canvas-empty h2{font-size:16px}}
@media(max-width:480px){.studio-workspace{grid-template-columns:125px minmax(200px,1fr)}.preview-panel{height:295px}.canvas-empty{padding:12px}.canvas-empty h2{font-size:15px}.canvas-empty p{font-size:9px}.preview-label{display:none}.preview-bar{justify-content:flex-end;height:41px;min-height:41px}.inspector{max-height:310px}.trim-fields{grid-template-columns:1fr}.two-fields{gap:5px}.media-panel{padding:12px 8px}.panel-heading h1{font-size:12px}.panel-mark{font-size:18px}.player-controls{gap:3px}.player-time{font-size:8px}.icon-button{width:20px}.play-button{width:27px;height:27px}.library-empty{padding:15px 8px;font-size:10px}.library-empty p{font-size:8px}.studio-workspace{min-width:335px}.editor-header .btn{padding:8px 12px}.timeline-tools{gap:2px}.zoom-control{margin:4px 0 7px auto}.timeline-toolbar{padding-top:7px}.field-group input:not([type=range]),.field-group textarea,.field-group select{font-size:9px;padding:6px}html[lang=ja] .panel-heading h1{font-size:11px}}
