:root{--background:#f4e7eb;--ink:#493a40;--muted:#98868d;--accent:#a76480;--panel-width:264px;--panel-space:0px}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:var(--background)}
body{overflow:hidden;color:var(--ink);font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body[data-background=brattiest]{background-image:url('assets/backgrounds/brattiest.gif');background-repeat:repeat}
body[data-background=ribbondoll]{background-image:url('assets/backgrounds/ribbondoll.png');background-repeat:repeat}
body.editor-open{--panel-space:var(--panel-width)}
button,select{font:inherit;color:inherit}
button{cursor:pointer}
button:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
[hidden]{display:none!important}
#canvas{position:fixed;inset:0 var(--panel-space) 0 0}
.home-links{position:fixed;top:42px;left:48px;z-index:2;font:500 15px/1.6 var(--site-font)}
.shelf-link{color:#923859;text-decoration:underline;text-underline-offset:.18em}
.shelf-link:hover{color:#702641}
.shelf-link:focus-visible{outline:2px solid currentColor;outline-offset:5px}
.element{position:absolute;user-select:none;-webkit-user-select:none;cursor:pointer;outline:1.5px solid transparent;outline-offset:8px;border-radius:12px}
.element.is-selected{outline-color:#b78c9e}
.element img{display:block;pointer-events:none;-webkit-user-drag:none}
.behelit{top:-14.4px;right:clamp(31.2px,6.5vw,117px);height:clamp(243.1px,25.74vw,420.42px);aspect-ratio:297/790}
.pendant{width:100%;height:100%;transform-origin:50% 0;will-change:transform;pointer-events:none}
.pendant img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(3px 7.2px 5.4px #00000024)}
.capybara{right:clamp(24px,4.2vw,76px);bottom:0;width:clamp(146.3px,16.17vw,223.3px);aspect-ratio:677/834;transform:translateY(2.2%)}
.capybara-body{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.yo-chan{left:min(clamp(24px,4.2vw,76px),max(10px,calc(100vw - 360px)));bottom:0;width:clamp(190.19px,21.021vw,290.29px);aspect-ratio:1416/1111;transform:translateY(5.9%)}
.yo-chan img{width:100%;height:100%;object-fit:contain}
.capybara-eye{position:absolute;left:42.39291%;top:12.23022%;width:11.52142%;height:auto;opacity:0}
/* The belly meets the page edge; the illustration's lower toes extend past it. */
/* Keep the original eye artwork, but blink immediately instead of waiting two seconds. */
@keyframes capybara-blink{0%{opacity:0}2%,9%{opacity:1}11%,100%{opacity:0}}
@media(hover:hover){.capybara:hover .capybara-eye{animation:capybara-blink 2.8s infinite linear;backface-visibility:hidden}}
#editor{position:fixed;inset:0 0 0 auto;width:var(--panel-width);background:#fffbfc;border-left:1px solid #e4d8dd;display:flex;flex-direction:column;padding:25px 18px 18px;z-index:10;overflow-y:auto}
header{display:flex;justify-content:space-between;align-items:center;gap:10px}
.eyebrow{font-size:9px;letter-spacing:1.6px;font-weight:650;color:var(--muted)}
h1{margin:5px 0 0;font-size:21px;line-height:1.2;font-weight:600;letter-spacing:-.6px}
#element-count{vertical-align:middle;font-size:10px;font-weight:500;letter-spacing:0;padding:3px 7px;margin-left:5px;background:#f1e9ed;border-radius:20px;color:#907782}
.icon-button{display:grid;place-items:center;width:29px;height:29px;background:none;border:0;border-radius:7px;color:var(--muted);flex-shrink:0}
.icon-button:hover{background:#f1e9ed;color:var(--ink)}
.hint{margin:23px 0 13px;font-size:11px;color:var(--muted)}
#element-list{display:grid;gap:8px}
.element-row{display:flex;align-items:center;border:1px solid #e9dfe3;border-radius:10px;padding:7px;background:#fff;gap:4px}
.element-row.selected{border-color:#b88a9e;background:#fcf5f8}
.pick-element{display:flex;align-items:center;gap:10px;flex:1;min-width:0;padding:0;border:0;background:none;text-align:left;font-size:12px;font-weight:500}
.thumbnail{width:36px;height:40px;border-radius:6px;object-fit:contain;background:#f6eff2;padding:3px}
.remove-element{color:#b19ba4}
.remove-element:hover{color:#a64c62;background:#f9ebef}
.add-control{display:grid;gap:8px;margin-top:22px;font-size:10px;font-weight:550;color:var(--muted)}
select{width:100%;border:1px solid #e9dfe3;border-radius:8px;padding:10px 9px;background:#fff;font-size:11px;cursor:pointer}
select:disabled{cursor:default;color:#b9aab1;background:#fbf8fa}
#empty-state{margin:15px 0 0;padding:20px 0;color:var(--muted);font-size:12px;text-align:center}
footer{margin-top:auto;padding-top:24px;display:grid;gap:13px}
.text-button{justify-self:start;background:none;border:0;padding:0;font-size:11px;color:#8c6979;text-decoration:underline;text-underline-offset:3px}
footer span{font-size:10px;color:#b6a6ad}
#editor-login{position:fixed;left:50%;top:45%;transform:translate(-50%,-50%);width:min(320px,calc(100vw - 48px));padding:24px;background:#fffbfc;border:1px solid #e0cfd7;border-radius:12px;z-index:11}
#login-form{display:grid;gap:10px;margin-top:22px;font-size:12px}
#login-form input{width:100%;padding:10px;border:1px solid #e0cfd7;border-radius:6px;font:inherit}
#login-form button{padding:10px;border:1px solid #b88a9e;border-radius:6px;background:#f4e7eb}
#login-error{font-size:11px;color:#923859;line-height:1.5}
.editor-toggle{position:fixed;right:23px;top:21px;display:flex;align-items:center;gap:7px;padding:9px 12px;border:1px solid #e0cfd7;border-radius:9px;background:#fffbfce8;z-index:10;font-size:12px;box-shadow:0 2px 8px #5a314a06}
#toast{position:fixed;bottom:24px;left:calc((100vw - var(--panel-space))/2);transform:translateX(-50%);display:flex;align-items:center;gap:20px;padding:11px 15px;background:#fffafc;border:1px solid #e2d4db;box-shadow:0 4px 20px #593e4b0a;border-radius:10px;z-index:11;font-size:12px;white-space:nowrap}
#undo-remove{border:0;background:none;padding:0;color:#9b5676;font-size:12px;font-weight:600}
@media(max-width:700px){body.editor-open{--panel-space:0px}#editor{box-shadow:-8px 0 30px #5634470a}.capybara{right:clamp(10px,calc(100vw - 360px),24px);width:min(146.3px,40.7vw)}.yo-chan{width:min(190.19px,52.91vw)}}
@media(max-width:360px){:root{--panel-width:244px}}