/* A drawing desk, with a separate strip of saved work. */
:root { background:#f8edef; --ink:#59444e; --muted:#947e86; --pink:#bc718e; }
body { background:#f8edef url('https://img.morri-thinks.site/kako-studio/assets/pink-desk-fec175a5c1c2.webp') center top/cover fixed; }
.studio { background:transparent; padding:0 32px 28px; }
.brand { display:flex; align-items:center; gap:8px; }
.cat-icon { width:36px; height:36px; border-radius:50%; }
.topbar { max-width:1120px; min-height:76px; margin:12px auto 22px; padding:0 20px; background:rgba(255,250,252,.87); border-bottom:1px solid #fff; -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); }
.brand-wordmark { width:210px; height:64px; }
.top-actions button { background:#fff9fa; border:1px solid #d8a8ba; border-radius:22px; padding:11px 20px; color:#795064; font-size:14px; font-weight:600; box-shadow:0 3px 0 #e4c6d1; }
.book-tabs,.page-number { display:none!important; }
.book-spread { display:flex; flex-direction:column; width:min(1040px,100%); height:auto; min-height:0; padding:0; background:none; filter:none; gap:28px; }
.book-page { display:block!important; overflow:visible; padding:0; min-height:0; }
.creator-panel { order:0; position:relative; margin:12px 0 0; padding:36px 56px 28px; background:#fffefd; border:1px solid #ece3df; box-shadow:0 10px 30px #7755630b,3px 4px 0 #fff8f5,4px 5px 0 #e8d8dd; }
.creator-panel::before { content:''; position:absolute; pointer-events:none; width:110px; height:38px; top:-19px; left:calc(50% - 55px); background:url('https://img.morri-thinks.site/kako-studio/assets/tape-pink-b7d5fa2d359d.webp') center/contain no-repeat; }
.creator-panel>.section-heading { margin-bottom:22px; }
.eyebrow { font-size:12px; margin-bottom:8px; }
h2 { font-size:25px; font-weight:500; }
#imageForm { display:grid; grid-template-columns:minmax(0,1fr) 260px; column-gap:40px; }
.prompt-field { grid-column:1; grid-row:1/4; margin:0; }
.prompt-field>span { display:none; }
.prompt-field textarea { font-size:17px; line-height:1.95; height:240px; min-height:180px; margin:0; padding:12px 0; border-bottom:1px solid #eee1e7; }
.prompt-field textarea::placeholder { color:#b4a1a8; }
.prompt-field textarea:focus { border-color:#c27a99; }
.drop-zone { grid-column:2; grid-row:1; min-height:96px; padding:24px 18px; }
.drop-zone small { font-size:11px; }
.prompt-guide { grid-column:2; grid-row:3; margin:8px 10px 0; font-size:12px; }
.prompt-guide input { font-size:16px; }
.model-choice { grid-column:1/-1; display:flex; align-items:center; gap:14px; margin-top:18px; padding:12px 16px; background:#fff8fa; border:1px solid #ebdbe2; border-radius:6px; }
.model-choice>span { flex:none; color:#785c69; font-size:13px; font-weight:600; }
.model-choice select { flex:1; min-width:0; min-height:40px; padding:8px 34px 8px 12px; border:1px solid #d9bdc9; border-radius:5px; background:#fffefd; color:#59444e; font:inherit; font-size:14px; }
.model-choice select:focus-visible { outline:2px solid #bc718e; outline-offset:2px; }
.preview-area { grid-column:2; grid-row:2; margin-top:12px; }
.preview-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px 12px; max-height:260px; overflow:auto; padding:22px 8px 14px; }
.preview-head button { min-height:32px; font-size:12px; }
.preview-item button { width:30px; height:30px; }
.submit-row { grid-column:1/-1; margin-top:14px; }
.primary-button { padding:13px 30px; background:#aa607e; box-shadow:0 3px 0 #8d4f68; }
.primary-button:hover { background:#974f6e; }
.primary-button:active { transform:translateY(2px); box-shadow:none; }
.gallery-panel { order:1; padding:18px 20px 12px; background:rgba(255,250,252,.86); border-top:1px solid #fff; border-bottom:1px solid #e9d8df; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.gallery-heading { justify-content:flex-start; gap:14px; margin-bottom:10px; padding:0 4px 10px; border-bottom:1px solid #eadde2; }
.gallery-heading h2 { font-size:16px; font-weight:600; color:#614453; padding:15px 24px; min-height:48px; background:url('https://img.morri-thinks.site/kako-studio/assets/tape-pink-b7d5fa2d359d.webp') center/100% 100% no-repeat; }
.gallery-heading button { display:inline-flex; align-items:center; gap:5px; min-height:40px; width:auto; padding:8px 12px; border:1px solid #ddc6d1; background:#fff9fc; color:#795465; font-size:12px; font-weight:500; }
.gallery-heading button>span:first-child { font-size:19px; line-height:1; }
.gallery-heading button:hover { background:#f7e8ee; }
.history-grid { display:flex; gap:16px; overflow-x:auto; overscroll-behavior-x:contain; padding:8px 4px 14px; scrollbar-width:thin; scrollbar-color:#dfbbc9 transparent; scroll-snap-type:x proximity; }
.history-row,.history-new { width:150px; flex:0 0 150px; height:160px; padding:8px; display:flex; flex-direction:column; gap:8px; background:#fffdfb; border:1px solid #e9dce0; border-radius:3px; text-align:left; scroll-snap-align:start; box-shadow:0 3px 5px #70405406; }
.history-row.is-selected,.history-new.is-selected { border-color:#b66e8b; box-shadow:0 0 0 1px #b66e8b; filter:none; }
.history-thumb { display:block; width:100%; height:92px; min-height:0; overflow:hidden; background:#f3eeef; color:#baa1aa; font-size:28px; }
.history-thumb img { display:block; width:100%; height:100%; min-height:0; max-width:100%; max-height:100%; border:0; object-fit:contain; }
.history-row>span:last-child { width:100%; }
.history-row strong { font-size:12px; line-height:1.4; display:block; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
.history-row small { font-size:10px; margin-top:5px; white-space:nowrap; }
.history-new { align-items:center; justify-content:center; background:#f6f9f5; color:#789784; }
.history-new>span { font-size:32px; font-weight:300; }
.history-new strong { font-size:12px; font-weight:400; }
.history-empty { flex:0 0 330px; min-height:148px; padding:25px 28px; gap:12px; display:flex; align-items:center; text-align:left; background:url('https://img.morri-thinks.site/kako-studio/assets/history-note-92e9177025fc.webp') center/100% 100% no-repeat; }
.history-empty img { width:58px; height:72px; object-fit:contain; flex:none; }
.history-empty strong { display:block; font-size:15px; line-height:1.6; font-weight:600; color:#644a57; }
.history-empty p { font-size:13px; line-height:1.7; margin:6px 0 0; color:#846775; }
.current-artwork { min-height:280px; max-width:740px; margin:auto; }
.task-references { margin:24px 0; padding-top:18px; border-top:1px solid #eadde2; }
.task-references h3 { margin:0 0 14px; font-size:15px; font-weight:600; }
.task-reference-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:12px; }
.task-reference { display:flex; flex-direction:column; min-width:0; gap:8px; padding:6px; border:1px solid #e5d9df; border-radius:6px; background:#fffafc; }
.task-reference img { display:block; width:100%; aspect-ratio:1; object-fit:contain; background:#f5f0f2; }
.task-reference span { width:100%; font-size:12px; line-height:1.6; overflow-wrap:anywhere; }
.drawing-paper { height:300px; min-height:0; max-width:600px; margin:auto; }
.drawing-brush { top:20%; }
.drawing-status { font-size:13px; }
.finished-art { width:fit-content; max-width:100%; display:block; margin:24px auto 0; box-shadow:none; padding:8px; }
.finished-art img { width:auto; max-width:100%; max-height:52svh; }
.artwork-caption { margin:20px 0 10px; }
.history-actions { margin:16px 0; }
.new-page-button { margin-top:16px; }
.login-view { background:transparent; padding:40px 24px; }
.cover-book { width:min(800px,100%); aspect-ratio:auto; min-height:0; display:flex; flex-direction:column; background:none; align-items:center; }
.cover-gallery { width:340px; height:210px; order:1; margin-top:36px; }
.cover-work { width:150px; padding:5px 5px 18px; }
.cover-work::before { content:''; position:absolute; top:-10px; left:40px; width:65px; height:22px; background:url('https://img.morri-thinks.site/kako-studio/assets/tape-blue-446b350b7980.webp') center/contain no-repeat; }
.cover-work-one { top:10px; left:14px; transform:rotate(-8deg); }
.cover-work-two { top:18px; right:10px; transform:rotate(7deg); }
.login-copy { width:min(440px,100%); padding:0; min-height:0; text-align:center; }
.title-stage { padding:0 0 38px; }
.original-title-stroke { bottom:0; }
.login-intro { margin:22px 0 32px; font-size:14px; }
.login-form { width:min(340px,100%); margin:auto; text-align:left; }
.password-row { flex-wrap:nowrap; }
.password-row input { flex-basis:auto; width:0; min-height:48px; }
.password-row button { padding:12px 20px; flex:none; }
@media(max-width:900px) {
 .studio { padding:0 24px 24px; }
 .creator-panel { padding:32px; }
 #imageForm { grid-template-columns:minmax(0,1fr) 220px; column-gap:24px; }
 .topbar { min-height:80px; }
}
@media(max-width:600px) {
 .studio { padding:0 12px max(20px,env(safe-area-inset-bottom)); }
 .topbar { min-height:64px; margin:8px auto 20px; padding:0 10px; }
 .gallery-panel { padding:12px 10px 8px; }
 .gallery-heading { gap:8px; padding:0 0 8px; }
 .brand-wordmark { width:154px; height:48px; }
 .cat-icon { width:28px; height:28px; }
 .brand { gap:3px; }
 .top-actions button { font-size:12px; min-height:44px; padding:8px; }
 .book-spread { gap:20px; }
 .creator-panel { padding:26px 18px 18px; margin-top:8px; }
 .creator-panel>.section-heading { margin-bottom:16px; }
 h2 { font-size:23px; }
 #imageForm { display:flex; flex-direction:column; }
 .prompt-field { order:0; }
 .prompt-field textarea { height:120px; min-height:110px; font-size:16px; line-height:1.75; }
 .drop-zone { order:1; margin-top:14px; min-height:76px; padding:18px; }
 .preview-area { order:2; }
 .preview-grid { grid-template-columns:repeat(3,minmax(0,1fr)); max-height:240px; }
 .prompt-guide { order:3; margin:8px 0 0; }
 .model-choice { order:4; flex-direction:column; align-items:stretch; gap:8px; margin-top:10px; padding:12px; }
 .model-choice select { width:100%; font-size:16px; }
 .submit-row { order:5; margin-top:8px; gap:6px; }
 .submit-row .form-status:empty { display:none; }
 .primary-button { width:100%; }
 .history-row,.history-new { flex-basis:128px; width:128px; height:148px; }
 .history-thumb { height:80px; }
 .drawing-paper { height:270px; }
 .current-artwork { min-height:0; }
 .finished-art img { max-height:50svh; }
 .login-view { padding:40px 24px 24px; }
 .cover-gallery { width:280px; height:170px; margin-top:22px; }
 .cover-work { width:124px; }
 .login-copy { padding:0; min-height:0; }
 .history-empty { flex-basis:270px; min-width:0; padding:22px 20px; }
 .history-empty img { width:42px; height:60px; }
 .history-grid:has(.history-empty) { gap:10px; }
 .history-grid:has(.history-empty) .history-new { flex-basis:96px; width:96px; }
 .history-grid:has(.history-empty) .history-empty { flex:1; padding:16px 10px; gap:0; }
 .history-grid:has(.history-empty) .history-empty img { display:none; }
 .history-grid:has(.history-empty) .history-empty strong { font-size:13px; }
 .history-grid:has(.history-empty) .history-empty p { font-size:12px; }
}