/* Key Atelier — Sakura. Interface styling only; artwork keeps its own colors. */
:root{--bg:#faf8f9;--paper:#fff;--ink:#302b30;--muted:#817680;--line:#eee8ec;--green:#95516d;--light:#f5e6eb;--pink:#f5e6eb;--accent:#95516d;--accent-soft:#f5e6eb;--accent-text:#79435a;--ui-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif}
body{font:13px/1.5 var(--ui-font);-webkit-font-smoothing:antialiased;color:var(--ink);background:var(--bg)}
button,input,select,textarea{font-family:var(--ui-font)}
button{border-radius:10px;padding:9px 13px;background:#fff;border-color:#e9e3e7;box-shadow:0 1px 2px #39233203;transition:background .16s,border-color .16s,box-shadow .16s,transform .16s}
button:hover{background:#fcf5f8;border-color:#d9c3ce;box-shadow:0 2px 8px #7f4a6110}
button:active{transform:translateY(1px)}
button:focus-visible,.upload-small:focus-within{outline:3px solid #dcb6c8;outline-offset:3px}
button.primary{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 3px 10px #95516d20}
button.primary:hover{background:#82445e;border-color:#82445e}
button.ghost{box-shadow:none;color:#71636e}
button.active{background:var(--accent-soft);border-color:#e5cbd6;color:var(--accent-text)}
input,select,textarea{border-color:#e9e3e7;border-radius:9px;padding:10px;background:#fff;min-height:38px}
input:focus,select:focus,textarea:focus{outline:2px solid #dfbdcd;outline-offset:2px}
input[type=range]{accent-color:var(--accent);height:24px;min-height:24px;background:transparent}
input[type=checkbox]{accent-color:var(--accent);min-height:0;width:15px;height:15px}
input[type=color]{height:37px;min-height:37px;width:48px;border-radius:9px}
input[type=number]{width:88px}
header{height:78px;padding:0 28px;gap:22px;background:#ffffffde;border-bottom:1px solid #ece5ea;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);position:relative;z-index:4}
.brand{gap:12px}.brand-symbol{width:42px;height:42px;border-radius:13px;background:#f5e6eb;border:1px solid #edd6e0;color:#95516d;font-size:27px;box-shadow:inset 0 1px 0 #fff9}
.brand b{font-size:18px;font-weight:600;letter-spacing:.5px}.brand small{font-size:9px;font-weight:500;letter-spacing:2.7px;color:#9b8190;margin-top:3px}
.project{gap:8px}.project input{font-size:14px;font-weight:500;width:156px;padding:7px;min-height:34px;border-radius:8px}.project input:hover{background:#faf6f8;border-color:#eee3e9}.project span{font-size:11px;color:#8c8089;white-space:nowrap}
.project span:before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:#b68a9d;margin-right:6px;vertical-align:middle}
nav{gap:7px}nav button{font-size:12px;padding:9px 12px;white-space:nowrap}nav #exportBtn{padding-left:17px;padding-right:17px}
main{padding:30px 34px}.eyebrow{font-size:11px;letter-spacing:2px;color:#9b7e8d}h1{font-size:29px;font-weight:600;letter-spacing:-.6px;margin-top:7px;line-height:1.3}
.layout-switch select{font-size:12px;border-radius:11px;background:#fff;padding:10px 12px;box-shadow:0 2px 6px #3c263005;max-width:175px}
.canvas-toolbar{font-size:11px;margin:25px 0 17px;gap:5px}.canvas-toolbar>button{font-size:11px;color:#786b75;padding:6px 9px;box-shadow:none}.canvas-toolbar>span{font-size:11px;color:#8e7c87}
.mode-switch{background:#ece7ea;border-radius:10px;padding:3px;gap:2px}.mode-switch button{font-size:11px;padding:6px 13px;border-radius:8px;color:#8b7c86;box-shadow:none}.mode-switch button.active{background:#fff;color:#75465d;box-shadow:0 1px 4px #4a273012}
.stage{background:#f5e6eb;border:1px solid #eddae3;border-radius:23px;padding:20px 22px;box-shadow:0 10px 35px #83556d06,inset 0 1px 0 #fff9}
.stage-top{font-size:11px;color:#8c6e7e;margin-bottom:25px;gap:7px}.stage-top>span:last-child{font-size:10px;color:#a18293}.dot{background:#b37d97;width:6px;height:6px}.canvas-wrap{filter:drop-shadow(0 12px 22px #5d3b4c12)}#keyboard{border-radius:13px}
.stage-bottom{font-size:10px;color:#886e7c;margin-top:20px;line-height:1.7}.stage-bottom button{font-size:11px;color:#80536a;padding:6px 9px}
.guide-strip{font-size:11px;color:#8f7b87;gap:12px;margin-top:21px}.guide-strip i{color:#c8b5bf}.step{gap:7px}.step b{background:#f0e7ec;color:#a47d90;width:21px;height:21px;font-size:10px}.device-note{font-size:10px;color:#9a8994;line-height:1.9;max-width:620px}
aside{background:#fff;border-color:#ece4e9}.library{padding:23px 24px 20px;border-color:#f0e9ed}.section-title h2{font-size:16px;letter-spacing:-.2px;font-weight:600}.upload-small{background:#f7edf1;border-color:#ecd9e2;color:#90546f;border-radius:9px;padding:8px 12px;font-size:12px;transition:background .15s}.upload-small:hover{background:#f1e0e8}
.library-toolbar{margin:16px 0 12px;gap:8px}.library-toolbar>span{font-size:11px;color:#9a8994}.library-tabs{gap:3px}.library-tabs button{font-size:11px;padding:5px 9px;border-radius:8px;color:#82727e;box-shadow:none}.library-tabs button.active{background:#f5e6eb;color:#8b4f69}
#assetDrop{border-color:#e7d4de;background:#fdf9fb;border-radius:13px;padding:11px;min-height:117px}#assetDrop.dragover{border-color:#b9849c;background:#f7e9ef}.asset-grid{gap:8px}.asset-card{height:58px;border-radius:9px;background:repeating-conic-gradient(#f1edef 0% 25%,#fff 0% 50%) 0/12px 12px;box-shadow:none}.asset-card.active{border:2px solid #ac708c;box-shadow:0 0 0 2px #f5e6eb;background-color:#f7eaf0}.asset-card small{color:#8c6478;font-size:9px}.asset-card img{border-radius:4px}
#emptyLibrary{padding:12px 0;color:#977e8c}#emptyLibrary span{color:#c29aae;font-size:28px;font-weight:300}#emptyLibrary p{font-size:12px;margin:5px 0}#emptyLibrary small{font-size:10px;color:#a68e9b}
.asset-info{margin:14px 0 11px}.asset-info b{font-size:12px;color:#67535f;font-weight:500}.asset-info button{font-size:11px}.asset-buttons{gap:7px}.asset-buttons button{font-size:11px;padding:9px 8px;border-radius:9px}.asset-utilities{gap:4px;margin-top:10px;flex-wrap:wrap}.asset-utilities button{font-size:10px;color:#9b7489;box-shadow:none}.asset-utilities select{font-size:10px;min-height:28px;padding:4px 7px}.asset-notice{font-size:10px;color:#907989;margin-top:10px}
.editor{padding:0 24px 24px}.tabs{margin-bottom:22px;gap:4px;border-color:#eee6eb;padding:7px 0}.tabs button{border:0;border-radius:9px;background:transparent;color:#9a8190;padding:9px 10px;font-size:12px;box-shadow:none;flex:1}.tabs button:hover{background:#fcf5f8}.tabs button.active{border:0;background:#f5e6eb;color:#884d67;font-weight:600;box-shadow:inset 0 0 0 1px #eed6e1}
.scope-heading{margin-bottom:21px;gap:10px}.scope-heading h2{font-size:17px;font-weight:600;letter-spacing:-.3px;margin-bottom:6px}.scope-heading p{font-size:11px;line-height:1.8;color:#927e8b}.scope-heading button{font-size:11px;padding:4px 0;color:#a37990}
.control{margin-bottom:18px}.control label,.field-label{font-size:12px;color:#705c69;margin-bottom:8px;font-weight:500}.control label span{font-size:11px;color:#a08394;font-weight:400;font-variant-numeric:tabular-nums}.control select,.control input[type=text],.control textarea{font-size:12px}.control .row>span{font-size:11px;color:#9f8594}.control .hint,.hint{font-size:11px;line-height:1.8;color:#9a8290}.section-label{font-size:12px;color:#73586a;border-color:#eee5eb;margin:24px 0 15px;padding-top:20px;font-weight:600}.two-cols{gap:0 18px}.check-row{font-size:12px;gap:8px;color:#7c6574;margin:15px 0}
.button-row{gap:8px}.button-row>button{font-size:11px;padding:9px 10px}.choice-grid{gap:8px}.choice-grid button{font-size:11px;min-height:42px;border-radius:10px}.choice-grid button.active{background:#f5e6eb;border-color:#dfbdcd;color:#884d67;box-shadow:0 2px 6px #95516d0a}
.layer-add{gap:8px}.layer-add button{font-size:11px}.layer-list{gap:7px}.layer-item{background:#fcfafb;border-color:#eee4ea;border-radius:10px;padding:8px}.layer-item.active{background:#fbf0f5;border-color:#d8b3c5}.layer-select{box-shadow:none}.layer-select img,.layer-select .text-icon{background:#f3eaf0;border-radius:5px;width:31px;height:31px}.layer-select span{font-size:11px}.layer-item .layer-small{color:#ab8196;box-shadow:none}.layer-empty{font-size:11px;color:#a18997;border-color:#eaddE5;border-radius:11px;padding:17px;line-height:1.9}.layer-editor{background:#fcf6f9;border-color:#eddce5;border-radius:13px;padding:15px}.layer-editor>h3{color:#97647e;font-size:12px}.layer-badge{background:#f5e6eb;color:#a16d87;font-size:10px;border-radius:6px;padding:5px 8px}
.font-grid{gap:8px}.font-card{border-radius:11px;padding:12px 5px;min-height:80px}.font-card b{font-size:22px;color:#684d5e}.font-card small{font-size:10px;color:#9a7d8e}.font-card.active{background:#fbf0f5;border-color:#d7afc2}.font-type{font-size:10px;color:#9f8896}.clear-image{font-size:11px}
.sound-grid{gap:8px}.sound-card{padding:11px;border-color:#ece3e9;border-radius:12px;gap:11px}.sound-card.active{background:#fcf1f6;border-color:#d7b2c4}.sound-card .play-sound{background:#f4e6ed;color:#a56685;width:33px;height:33px;box-shadow:none}.sound-name b{font-size:12px;font-weight:500;color:#6b5261}.sound-name small{font-size:10px;color:#a08796}.sound-card .use-sound{font-size:10px;padding:6px 10px}.sound-card.active .use-sound{color:#965c78;background:#f0dce6}
.notice{background:#faf3f6;border-color:#eedfe6;color:#947486;font-size:11px;padding:12px 14px;border-radius:11px;line-height:1.9}.empty-message{background:#fdf8fb;border-color:#ecdde5;color:#a07e92;font-size:12px;border-radius:12px}
footer{border-color:#efe7ed;padding:16px 24px;color:#a28a99;font-size:10px;flex-wrap:wrap}footer button{font-size:10px;padding:4px 0;color:#a37b91}
dialog{background:#fffcfd;color:var(--ink);border-color:#eee3e9;border-radius:23px;box-shadow:0 24px 100px #52304729;padding:34px}dialog::backdrop{background:#46313e50;backdrop-filter:blur(9px)}dialog h2{font-size:26px;font-weight:600;letter-spacing:-.6px}dialog h3{font-size:14px}dialog p,dialog li{font-size:13px;color:#8f7484}dialog .badge{background:#f5e6eb;color:#9c6682;border-radius:7px;font-size:11px}.modal-close{color:#a68a99;box-shadow:none}.modal-image{border-color:#eadce4;border-radius:14px}.source-list a{color:#9d5b7c}.source-list li{font-size:12px}.progress{background:#f4e6ed}.progress span{background:#bd8aa3}#toast{background:#92516f;border-radius:13px;box-shadow:0 6px 24px #7d3e5925;font-size:13px}
*{scrollbar-width:thin;scrollbar-color:#d9c5d0 transparent}
@media(min-width:851px){
  .workspace{grid-template-columns:minmax(380px,1fr) minmax(440px,40vw)}
  .editor .tabs{background:#fffffff2;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);z-index:3;top:0}
  .library{padding-top:23px;padding-bottom:20px}
  .canvas-wrap{width:min(100%,calc((100dvh - 365px)*1.534))}
}
@media(min-width:1650px){main{padding:37px 52px}.library,.editor{padding-left:30px;padding-right:30px}}
@media(max-width:1150px){header{padding:0 20px;gap:14px}nav button{padding:9px 10px}.brand b{font-size:17px}.brand-symbol{width:38px;height:38px}.project input{width:130px}.project span{display:none}main{padding:28px 24px}.library,.editor{padding-left:20px;padding-right:20px}.canvas-toolbar>button{padding:6px}.tabs button{padding:9px 7px;font-size:11px}.asset-buttons button{font-size:10px;padding:8px 6px}}
@media(max-width:850px){header{height:auto;min-height:78px;padding:14px 20px;gap:12px}.project{justify-content:flex-end}.project input{width:145px}nav{justify-content:flex-end}.workspace{height:auto;grid-template-columns:1fr}.library,.editor{padding-left:25px;padding-right:25px}.tabs{gap:6px;justify-content:space-between}.tabs button{flex:1;font-size:12px;padding:10px 8px}.stage{max-width:900px}.canvas-wrap{width:100%}.font-grid{grid-template-columns:repeat(4,1fr)}.asset-grid{grid-template-columns:repeat(8,1fr)}.sound-grid{grid-template-columns:1fr 1fr}footer{padding:16px 25px}.guide-strip{gap:10px}}
@media(max-width:500px){header{padding:13px 15px}.brand b{font-size:17px}.brand small{font-size:8px}.brand-symbol{width:36px;height:36px}.project input{width:116px;font-size:12px}nav{gap:5px;justify-content:space-between}nav button{font-size:10px;padding:8px}nav #exportBtn{padding:8px 11px}.workspace{display:block}main{padding:24px 15px}h1{font-size:25px}.eyebrow{font-size:10px}.layout-switch select{font-size:11px;max-width:145px;padding:8px}.canvas-top{gap:12px}.canvas-toolbar{margin-top:20px;gap:2px}.canvas-toolbar>button{font-size:10px;padding:6px 5px}.mode-switch{margin-right:4px}.mode-switch button{font-size:10px;padding:6px 11px}.stage{padding:16px 13px;border-radius:18px}.stage-top{font-size:10px;margin-bottom:20px}.stage-top>span:last-child{font-size:9px}.stage-bottom{font-size:10px;gap:10px}.stage-bottom span{max-width:60%;line-height:1.8}.stage-bottom button{font-size:10px;padding:6px}.guide-strip{font-size:10px;gap:7px}.device-note{font-size:10px}.library,.editor{padding-left:18px;padding-right:18px}.library{padding-top:23px}.asset-grid{grid-template-columns:repeat(5,1fr)}.tabs{gap:3px}.tabs button{font-size:11px;padding:9px 6px}.font-grid{grid-template-columns:repeat(3,1fr)}.sound-grid{grid-template-columns:1fr}.asset-buttons button{font-size:10px;padding:8px 5px}.two-cols{gap:0 13px}.control label{font-size:11px}.scope-heading h2{font-size:16px}footer{padding:15px 18px;font-size:10px}dialog{padding:26px}}
@media(prefers-reduced-motion:reduce){button{transition:none}}