:root { --ink:#503944; --muted:#8b747d; --pink:#be6885; --line:#e8d7da; font-family:"PingFang SC","Hiragino Sans GB",sans-serif; color:var(--ink); background:#f2e5e5; font-synthesis:none; letter-spacing:0; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; }
button,input,textarea { font:inherit; }
button,a,label[for=imageInput] { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; color:inherit; }
button:disabled { opacity:.55; cursor:wait; }
button:focus-visible,a:focus-visible,summary:focus-visible { outline:2px solid var(--pink); outline-offset:4px; }
[hidden] { display:none!important; }
.login-view { min-height:100svh; display:grid; place-items:center; padding:24px; background:#f3e6e8; perspective:1800px; }
.cover-book { position:relative; width:min(1240px,100%,calc((100svh - 48px)*1.5)); aspect-ratio:3/2; display:grid; grid-template-columns:1fr 1fr; background:url('https://img.morri-thinks.site/kako-studio/assets/desk-cover-b14c31cbdc5d.webp') center/100% 100% no-repeat; }
.cover-gallery { position:relative; }
.cover-work { position:absolute; width:43%; margin:0; padding:6px 6px 22px; background:#fffdf8; box-shadow:0 8px 20px #5039441a; }
.cover-work img { display:block; width:100%; }
.cover-work-one { top:23%; left:10%; transform:rotate(-9deg); }
.cover-work-two { top:47%; right:9%; transform:rotate(6deg); }
.login-copy { display:flex; flex-direction:column; justify-content:center; padding:12% 13% 12% 10%; min-width:0; transform-origin:left center; }
.title-stage { position:relative; isolation:isolate; padding-bottom:55px; }
.wordmark-title { margin:0; }
.wordmark-title img { display:block; width:100%; height:auto; }
.original-title-stroke { position:absolute; z-index:-1; bottom:0; left:-5%; width:110%; opacity:.8; }
.login-intro { font-size:14px; line-height:1.8; margin:22px 0 40px; }
.login-form label { display:block; margin-bottom:12px; font-size:12px; color:var(--muted); }
.password-row { display:flex; gap:10px; }
.password-row input { width:0; flex:1; min-width:0; padding:12px 16px; border:1px solid #c7a9b4; border-radius:24px; background:#fff9; outline:none; font-size:16px; }
.password-row button,.primary-button { border:0; border-radius:24px; padding:12px 24px; min-height:46px; background:#976078; color:white; }
.form-status { color:var(--muted); font-size:12px; line-height:1.65; min-height:20px; }
.studio { display:none; min-height:100svh; padding:0 24px 30px; background:#f1e4e5 url('/art/empty-desk.jpg') center/cover fixed; }
.app:not(.is-locked) .login-view { display:none; }
.app:not(.is-locked) .studio { display:block; }
.app.is-opening .login-copy { animation:cover-turn .76s ease-in forwards; }
@keyframes cover-turn { to { transform:perspective(1400px) rotateY(-80deg); opacity:0; } }
.topbar { max-width:1280px; min-height:76px; margin:auto; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.brand-wordmark { width:190px; height:60px; object-fit:contain; }
.top-actions { display:flex; align-items:center; gap:16px; }
.quiet-button { border:1px solid #d2bfc2; background:#fff8; border-radius:20px; padding:9px 15px; min-height:40px; font-size:13px; }
.queue-badge { font-size:12px; color:var(--muted); }
.book-tabs { display:none; }
.book-spread { position:relative; display:grid; grid-template-columns:1fr 1fr; width:min(1280px,100%); margin:auto; height:calc(100svh - 108px); min-height:600px; background:url('https://img.morri-thinks.site/kako-studio/assets/open-book-35fe5eeaf05e.webp') center/100% 100% no-repeat; filter:drop-shadow(0 18px 24px #59404a22); padding:50px 24px; }
.book-page { min-width:0; overflow:auto; scrollbar-width:thin; scrollbar-color:#d7b6c1 transparent; padding:26px 40px 45px; }
.book-page-right { transform-origin:left center; }
.section-heading { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:28px; }
.eyebrow { margin:0 0 10px; color:var(--muted); font-size:11px; }
h2 { margin:0; font-size:25px; font-weight:500; }
.mode-badge { font-size:11px; color:var(--muted); }
.mode-badge,#previewCount { display:none!important; }
.preview-head { justify-content:flex-end!important; }
.queue-badge:empty { display:none; }
.turning-paper { position:fixed; z-index:100; transform-origin:left center; transform-style:preserve-3d; pointer-events:none; }
.paper-face { position:absolute; inset:0; backface-visibility:hidden; overflow:hidden; background:#fffdf6 url('https://img.morri-thinks.site/kako-studio/assets/open-book-35fe5eeaf05e.webp') right center/200% 115%; border-radius:0 8px 8px 0; box-shadow:12px 5px 22px #51363d35; }
.paper-back { transform:rotateY(180deg); background-position:left center; }
.paper-front>.book-page { min-height:0!important; padding-top:0; }
.turning-cover .paper-front { background-image:url('https://img.morri-thinks.site/kako-studio/assets/desk-cover-b14c31cbdc5d.webp'); background-position:right; background-size:200% 100%; }
.turning-cover .login-copy { height:100%; padding:12% 13% 12% 10%; }
.page-number { display:block; margin-top:30px; text-align:center; color:#a79499; font:italic 12px Georgia,serif; }
.history-grid { display:grid; gap:16px; padding:8px 0; }
.history-row { width:100%; display:flex; align-items:center; gap:14px; min-height:98px; border:0; padding:17px 19px; background:url('https://img.morri-thinks.site/kako-studio/assets/history-note-92e9177025fc.webp') center/100% 100% no-repeat; text-align:left; }
.history-row.is-selected { filter:drop-shadow(0 4px 5px #ae748833); }
.history-row>span:last-child { min-width:0; }
.history-row strong { font-size:13px; font-weight:500; line-height:1.7; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
.history-row small { display:block; margin-top:6px; color:var(--muted); font-size:11px; }
.history-thumb { display:grid; place-items:center; width:46px; height:54px; flex:none; }
.history-thumb img { width:100%; height:100%; object-fit:cover; border:3px solid white; }
.history-empty { color:var(--muted); font-size:13px; text-align:center; padding:80px 12px; }
.prompt-guide { font-size:13px; color:var(--muted); margin-bottom:26px; }
.prompt-guide summary { cursor:pointer; padding:10px 0; }
.prompt-guide p { line-height:1.7; }
.prompt-guide label { display:block; margin:12px 0; }
.prompt-guide input { display:block; width:100%; border:0; border-bottom:1px solid var(--line); padding:10px 0; background:transparent; font-size:14px; }
.drop-zone { position:relative; display:flex; gap:14px; align-items:center; padding:24px 18px; min-height:105px; background:url('https://img.morri-thinks.site/kako-studio/assets/history-note-92e9177025fc.webp') center/100% 100% no-repeat; cursor:pointer; }
.drop-zone input { position:absolute; width:1px; height:1px; opacity:0; }
.upload-symbol { font-size:30px; color:var(--pink); }
.drop-zone strong { display:block; font-weight:500; font-size:14px; }
.drop-zone small { display:block; margin-top:6px; font-size:11px; color:var(--muted); line-height:1.6; }
.drop-zone.is-dragging { outline:2px dashed var(--pink); }
.preview-area { margin-top:25px; }
.preview-head { display:flex; justify-content:space-between; font-size:12px; color:var(--muted); }
.preview-head button { border:0; background:transparent; color:var(--muted); }
.preview-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px 14px; padding:22px 6px; }
.preview-item { position:relative; aspect-ratio:1; padding:5px 5px 16px; background:white; transform:rotate(-2deg); box-shadow:0 5px 9px #50394420; transform-origin:top center; }
.preview-item:nth-child(even) { transform:rotate(2deg); }
.preview-item::before { content:''; position:absolute; z-index:2; width:65%; height:28px; left:18%; top:-13px; background:url('https://img.morri-thinks.site/kako-studio/assets/tape-blue-446b350b7980.webp') center/contain no-repeat; }
.preview-item:nth-child(even)::before { background-image:url('https://img.morri-thinks.site/kako-studio/assets/tape-pink-b7d5fa2d359d.webp'); }
.preview-item img { width:100%; height:100%; object-fit:cover; }
.preview-item button { position:absolute; z-index:3; right:-8px; top:-10px; width:30px; height:30px; border:0; border-radius:50%; background:#fffaf4; }
.preview-item.is-peeling { animation:peel .34s ease-in forwards; }
@keyframes peel { to { transform:perspective(400px) rotateX(50deg) rotate(15deg) translateY(-30px); opacity:0; } }
.prompt-field { display:block; margin-top:28px; }
.prompt-field>span { font-size:12px; color:var(--muted); }
.prompt-field textarea { display:block; width:100%; height:160px; min-height:130px; margin-top:12px; padding:10px 0; resize:vertical; border:0; border-bottom:1px solid var(--line); background:transparent; outline:none; color:var(--ink); font-size:15px; line-height:1.9; }
.submit-row { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:24px; }
.submit-row .form-status { flex:1; }
.primary-button { flex:none; }
.current-artwork { min-height:350px; }
.drawing-paper { position:relative; min-height:340px; height:43vh; }
.drawing-stroke { position:absolute; width:65%; left:13%; top:47%; opacity:.5; animation:ink 4s ease-in-out infinite alternate; }
.drawing-brush { position:absolute; width:130px; height:140px; object-fit:contain; left:35%; top:25%; animation:brush 3s ease-in-out infinite; }
.is-waiting .drawing-brush { animation:none; opacity:.6; transform:rotate(18deg); }
.is-waiting .drawing-stroke { display:none; }
.drawing-status { color:var(--muted); font-size:14px; text-align:center; }
.artwork-caption { font-size:13px; line-height:1.8; color:var(--muted); white-space:pre-wrap; overflow-wrap:anywhere; }
.finished-art { position:relative; width:100%; border:0; background:white; padding:8px 8px 20px; box-shadow:0 8px 20px #50394420; animation:arrive .7s ease-out; }
.finished-art::before { content:''; position:absolute; width:90px; height:30px; left:calc(50% - 45px); top:-14px; background:url('https://img.morri-thinks.site/kako-studio/assets/tape-pink-b7d5fa2d359d.webp') center/contain no-repeat; }
.finished-art img { display:block; width:100%; max-height:55vh; object-fit:contain; }
.page-error { line-height:1.8; color:#a35270; overflow-wrap:anywhere; padding:38px 0; }
.history-actions { display:flex; flex-wrap:wrap; gap:10px; margin:22px 0; }
.history-actions button,.history-actions a { border:1px solid var(--line); border-radius:20px; background:#fff8; color:var(--ink); padding:10px 15px; font-size:12px; text-decoration:none; }
.new-page-button { display:block; margin:28px 0 0 auto; }
.lightbox { width:min(980px,94vw); max-height:92svh; border:0; border-radius:8px; padding:14px; background:#fffdf9; }
.lightbox::backdrop { background:#382c34b8; }
.lightbox img { display:block; max-width:100%; max-height:75svh; margin:auto; object-fit:contain; }
.lightbox-close { position:absolute; top:14px; right:14px; width:42px; height:42px; border:0; border-radius:50%; background:#fffd; font-size:24px; }
.lightbox-caption { font-size:13px; line-height:1.7; padding-top:14px; }
@keyframes brush { 0%,100% { transform:translate(-32px,10px) rotate(-12deg); } 50% { transform:translate(60px,35px) rotate(10deg); } }
@keyframes ink { from { clip-path:inset(0 70% 0 0); } to { clip-path:inset(0); } }
@keyframes arrive { from { opacity:0; transform:translateY(-16px) rotate(-3deg); } to { opacity:1; transform:none; } }
@media(min-width:761px) and (max-width:1100px) {
 .studio { padding:0 12px 18px; } .book-page { padding:26px 24px 40px; } .book-spread { min-height:690px; } .login-copy { padding:10% 11%; } .login-intro { margin:16px 0 24px; font-size:12px; } .title-stage { padding-bottom:35px; } .password-row { flex-wrap:wrap; } .password-row input { width:100%; flex-basis:100%; } .password-row button { margin-left:auto; } h2 { font-size:23px; }
}
@media(max-width:760px) {
 .login-view { padding:14px; }
 .cover-book { display:block; width:min(460px,100%); aspect-ratio:auto; min-height:660px; background-size:200% 100%; background-position:right; }
 .cover-gallery { display:none; }
 .login-copy { padding:90px 40px 70px; min-height:660px; }
 .login-intro { margin:28px 0 46px; font-size:13px; }
 .studio { padding:0 10px 16px; }
 .topbar { min-height:66px; gap:8px; }
 .brand-wordmark { width:155px; height:50px; }
 .queue-badge { display:none; }
 .top-actions { gap:0; }
 .top-actions button { font-size:11px; padding:8px 12px; }
 .book-tabs { display:flex; gap:8px; justify-content:flex-end; margin:0 12px; }
 .book-tabs button { border:0; border-radius:6px 6px 0 0; padding:12px 18px; background:#e3ece7; color:var(--muted); font-size:13px; min-height:44px; }
 .book-tabs button.is-active { background:#fff9f0; color:var(--ink); }
 .book-spread { display:block; height:auto; min-height:calc(100svh - 125px); background-size:200% 100%; background-position:right; padding:45px 12px; }
 .book-page { padding:22px 20px 35px; overflow:visible; min-height:calc(100svh - 150px); }
 .book-page-left { display:none; }
 .app.mobile-page-gallery .book-page-left { display:block; }
 .app.mobile-page-gallery .book-page-right { display:none; }
 .mode-badge { display:none; }
 h2 { font-size:23px; }
 .preview-grid { gap:18px 12px; }
 .submit-row { flex-wrap:wrap; }
 .submit-row .form-status { flex-basis:100%; margin:0; }
 .primary-button { width:100%; }
 .drawing-paper { min-height:290px; height:42svh; }
 .prompt-field textarea { min-height:190px; }
}
@media(max-width:360px) { .login-copy { padding:90px 26px 50px; } .book-page { padding:20px 14px 30px; } .preview-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }