:root{font-family:'Jua',system-ui,sans-serif;color:#574b65;background:#faf8f1;font-synthesis:none;--violet:#8971bc;--border:#e9e4db}*{box-sizing:border-box}body{margin:0;height:100dvh;min-height:360px;display:grid;grid-template-rows:62px minmax(0,1fr) 87px;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit;border:0}button:disabled{opacity:.3;cursor:default}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid #8e73c9;outline-offset:4px}header{display:flex;justify-content:space-between;align-items:center;padding:0 28px;gap:12px;border-bottom:1px solid var(--border);background:#faf8f1}.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:#66517f;font-size:22px;white-space:nowrap}.brand-symbol{color:#a08ac7;font:32px Georgia,serif;transform:rotate(-10deg)}.brand-tag{font-size:12px;color:#a49aab;margin-left:16px;font-family:system-ui,sans-serif;letter-spacing:.03em}.head-actions{display:flex;gap:5px}.icon-button{width:42px;min-height:42px;background:none;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;font-size:25px}.icon-button:hover{background:#eee9f3}.icon-button[aria-pressed=true]{color:#b18080}#more{font-size:17px;letter-spacing:1px}main{padding:13px 18px 0;min-height:0}#paper{position:relative;height:100%;border:1px solid #ece7dd;border-radius:19px;background:#fffefa;overflow:hidden;box-shadow:0 2px 10px #79655303}canvas{width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}#invitation{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;pointer-events:none;transition:opacity .35s;user-select:none}#invitation.faded{opacity:0}#invitation h1{font-size:clamp(22px,3vw,37px);font-weight:400;color:#9b8eac;margin:10px 0 12px;letter-spacing:-1px}#invitation p{font-family:system-ui,sans-serif;color:#aa9eae;font-size:14px;margin:3px 0}.whisper{font-size:12px!important;color:#beb4bf!important}.sketch-note{position:relative;font:100px/1 Georgia,serif;color:#d6cbea;transform:rotate(-8deg);height:105px;width:170px}.sketch-note span{position:absolute;font-size:50px;right:8px;top:-5px;color:#dcb4a4;transform:rotate(18deg)}.paper-corner{position:absolute;bottom:15px;left:22px;display:flex;align-items:center;gap:9px;color:#b3a8b7;font-family:system-ui,sans-serif;font-size:10px;pointer-events:none;user-select:none}.tiny-dot{width:3px;height:3px;border-radius:50%;background:#cbbfd3}#transport-label{position:absolute;top:18px;right:22px;font-size:12px;color:#9d8bad;pointer-events:none}#transport-label[hidden]{display:none}#transport-label i{display:inline-block;width:5px;height:5px;margin-left:6px;background:#aa94c7;border-radius:50%;animation:pulse 1s infinite alternate}@keyframes pulse{to{opacity:.2}}footer{display:flex;align-items:center;justify-content:center;gap:22px;padding:10px 20px max(10px,env(safe-area-inset-bottom));background:#faf8f1}.palette{display:flex;gap:13px;align-items:center}.pencil{width:44px;height:48px;position:relative;border-radius:15px;background:none;display:flex;align-items:center;justify-content:center;transition:transform .15s}.pencil::before{content:'';width:31px;height:31px;border-radius:50%;background:var(--ink);box-shadow:inset 0 -3px 0 #0000000b;position:absolute}.pencil span{position:relative;color:white;font-size:18px}.pencil[aria-pressed=true]{transform:translateY(-5px);background:color-mix(in srgb,var(--ink) 13%,transparent)}.pencil[aria-pressed=true]::after{content:'';width:5px;height:5px;position:absolute;bottom:-3px;background:var(--ink);border-radius:50%}.toolbar-separator{width:1px;height:28px;background:var(--border)}.play-tools,.edit-tools{display:flex;gap:10px;align-items:center}.play{background:#8e78b9;color:white;border-radius:26px;min-height:46px;padding:0 23px;display:flex;gap:9px;align-items:center;box-shadow:0 3px 0 #76619f;font-size:16px}.play:hover{background:#7f68ad}.play:active{transform:translateY(2px);box-shadow:0 1px 0 #76619f}.play span:first-child{font-size:13px}.remix{background:#f0eaf5;color:#9a7cb9;border-radius:24px;min-height:46px;padding:0 18px;font-size:16px}.remix:hover{background:#e7dced}.edit-tools .icon-button{font-size:29px}#new{width:49px;flex-direction:column;font-size:24px;gap:0;padding:2px;line-height:1.1;white-space:nowrap}.small-label{font-size:10px;color:#a89caf}#toast{position:fixed;z-index:5;bottom:105px;left:50%;transform:translateX(-50%);background:#60536eeb;color:#fff;padding:11px 20px;border-radius:24px;font:13px/1.6 system-ui,sans-serif;text-align:center;max-width:min(450px,90vw);pointer-events:none}.menu{position:fixed;z-index:6;top:55px;right:22px;background:#fffefa;border:1px solid var(--border);border-radius:17px;box-shadow:0 10px 35px #4d3e6320;width:235px;padding:10px}.menu[hidden]{display:none}.menu button,.menu a{display:block;background:none;width:100%;text-align:left;padding:12px 14px;font:14px system-ui,sans-serif;border-radius:8px;color:#665879;text-decoration:none}.menu button:hover,.menu a:hover{background:#f1ecf6}.menu small{display:block;padding:10px 14px;color:#a79bae;font:11px/1.5 system-ui,sans-serif}.dialog-heading{display:flex;align-items:center;justify-content:space-between}.dialog-heading h2{font-weight:400;font-size:24px;margin:0}dialog{width:min(700px,92vw);max-height:88dvh;border:1px solid var(--border);background:#faf8f1;border-radius:24px;color:#655477;padding:24px}dialog::backdrop{background:#51435d66;backdrop-filter:blur(4px)}.gallery-note{font:12px/1.7 system-ui,sans-serif;color:#a092a9}#gallery-items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.art-card{background:#fffefa;border:1px solid var(--border);border-radius:14px;padding:8px;min-width:0}.art-card canvas{height:110px;width:100%;pointer-events:none}.art-card time{font:11px system-ui,sans-serif;color:#a296aa;display:block;text-align:center;padding:6px}.empty-gallery{grid-column:1/-1;text-align:center;padding:50px 0;color:#b4a6bc}.reduced *{animation:none!important}@media(max-width:680px){body{grid-template-rows:51px minmax(0,1fr) 113px}header{padding:0 14px}.brand{font-size:20px}.brand-tag{display:none}.brand-symbol{font-size:28px}.head-actions{gap:0}.head-actions .icon-button{width:36px;font-size:22px}main{padding:6px 8px 0}#paper{border-radius:15px}.paper-corner{left:14px;bottom:12px;font-size:9px}.paper-corner span:last-child{display:none}#transport-label{font-size:10px;top:12px;right:14px}#invitation h1{font-size:25px}#invitation p{font-size:12px}.sketch-note{font-size:82px;width:140px;height:87px}footer{padding:5px 10px max(7px,env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr auto;gap:2px 10px}.palette{grid-column:1/-1;justify-content:center;gap:18px}.pencil{height:41px;width:37px}.pencil::before{height:28px;width:28px}.pencil[aria-pressed=true]{transform:translateY(-2px)}.toolbar-separator{display:none}.play-tools{justify-self:center;padding-left:42px;gap:8px}.play,.remix{min-height:37px;padding:0 15px;font-size:13px}.edit-tools{gap:0}.edit-tools .icon-button{width:35px;min-height:35px;font-size:25px}.small-label{display:none}#new{width:35px}.menu{right:10px;top:48px}.art-card canvas{height:80px}dialog{padding:18px}#toast{bottom:125px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}@media(max-height:500px) and (min-width:681px){body{grid-template-rows:44px minmax(0,1fr) 65px}.brand-tag{display:none}}
.text-button{padding:10px 14px;background:transparent;border-radius:14px;font-size:14px;white-space:nowrap;min-height:42px}.text-button:hover{background:#eee9f3}.text-button.accent{background:#eee7f6;color:#796096}#guide-status{position:fixed;top:92px;left:42px;max-width:calc(100vw - 84px);display:flex;align-items:center;gap:10px;color:#88759b;background:#fffefaeb;border:1px solid #e9e1f0;border-radius:24px;padding:7px 10px 7px 16px;font:12px/1.4 system-ui,sans-serif;pointer-events:none}#guide-status[hidden]{display:none}#guide-hide{pointer-events:auto;border-radius:50%;font-size:20px;width:29px;height:29px;background:#f2edf6}#guide-items{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0}.guide-card{background:#fffefa;border:1px solid var(--border);padding:8px;border-radius:16px;min-width:0}.guide-card:hover{border-color:#b29acb;background:#f4eef9}.guide-card canvas{height:120px;pointer-events:none}.guide-card span{display:block;margin-top:8px;font-size:15px}#stage-controls{display:flex;align-items:center;justify-content:center;gap:24px;grid-row:3;padding:14px}#stage-controls[hidden]{display:none}.performing footer,.performing #guides,.performing #perform{display:none}.performing #drawing{cursor:default}.performing .paper-corner{display:none}.performing #paper{box-shadow:0 4px 25px #7551940d}.performing .brand-tag{color:#887299}#share-url{width:100%;font:13px system-ui;padding:12px;border-radius:9px;border:1px solid #dcd2e4;background:white;color:#756584}.share-actions{display:flex;gap:12px;margin-top:18px}#share-dialog>p{font:14px/1.7 system-ui,sans-serif}#free-draw{width:100%;background:#eee7f6}#art-input[hidden]{display:none}@media(max-width:680px){header{padding:0 10px;gap:5px}.brand{font-size:17px;gap:4px}.brand-symbol{font-size:25px}.head-actions .text-button{font-size:12px;padding:6px 9px}.head-actions .icon-button{width:32px;min-height:40px}.head-actions{gap:2px}#guides{max-width:84px;overflow:hidden;text-overflow:ellipsis}#guide-status{top:68px;left:20px;max-width:calc(100vw - 40px);font-size:10px;padding:5px 7px 5px 12px}#guide-items{grid-template-columns:repeat(2,1fr)}.guide-card canvas{height:105px}#stage-controls{gap:8px;padding:12px 8px;flex-wrap:wrap}.performing{grid-template-rows:51px minmax(0,1fr) 88px}#stage-controls .text-button{font-size:12px;padding:8px}#stage-controls .play{font-size:13px;min-height:42px;padding:0 16px}.menu{max-height:calc(100dvh - 65px);overflow:auto}#share-dialog .share-actions{flex-wrap:wrap}}

@media(max-width:360px){.brand{font-size:15px}.brand-symbol{display:none}.head-actions .text-button{padding:6px;font-size:11px}.performing{grid-template-rows:51px minmax(0,1fr) 120px}#stage-controls{column-gap:8px;row-gap:4px}#stage-controls .play{order:-1;width:100%;justify-content:center;max-width:270px}}

#parent-form>label,#parent-setup>label{display:block;margin:15px 0 7px;font:14px system-ui,sans-serif}#parent-form input{font:18px system-ui,sans-serif;width:100%;padding:11px;border:1px solid #dbd2e5;border-radius:10px;background:white}#parent-intro{font:14px/1.7 system-ui,sans-serif}#parent-error{color:#b2465e;font:13px/1.5 system-ui,sans-serif;min-height:20px}

/* Store-ready touch layout: visible controls retain at least a 48px hit area. */
body{min-height:260px;grid-template-rows:64px minmax(0,1fr) 88px}button,.menu a{min-width:48px;min-height:48px}.icon-button,.head-actions .icon-button,.edit-tools .icon-button,#new{width:48px;min-height:48px}.text-button,.play,.remix{min-height:48px}.pencil{width:48px;height:48px}.pencil[aria-pressed=true]{transform:translateY(-2px)}.pencil::before{width:34px;height:34px}.small-label{font-size:11px}#guide-hide{width:48px;height:48px;flex-shrink:0}#guide-status{padding:2px 4px 2px 16px;top:84px}.menu{top:60px;max-height:calc(100dvh - 76px);overflow:auto}.menu button,.menu a{min-height:48px;display:flex;align-items:center}.gallery-note{color:#796d83;font-size:13px}.art-card{padding:6px;overflow:hidden}.art-open{background:transparent;width:100%;padding:0;display:block}.art-open strong{display:block;font-size:16px;font-weight:400;overflow-wrap:anywhere;margin-top:8px}.art-open canvas{height:auto;aspect-ratio:32/21}.art-actions{display:flex;justify-content:space-between;gap:4px;border-top:1px solid var(--border)}.art-actions button{background:transparent;font-size:12px;padding:4px 7px}.art-actions button:hover{background:#eee7f6}.gallery-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:16px}#gallery-more[hidden],#undo-delete[hidden]{display:none}#rename-form label{display:block;margin:20px 0 8px}#art-title{font:18px system-ui;width:100%;min-height:48px;border:1px solid #d4c9df;border-radius:12px;padding:12px;margin-bottom:20px}#delete-dialog{max-width:460px}#delete-name{overflow-wrap:anywhere}#loading{position:fixed;z-index:20;inset:0;display:grid;place-items:center;background:#faf8f1;font-size:20px}#loading[hidden]{display:none}#storage-alert{position:fixed;z-index:8;top:68px;left:50%;transform:translateX(-50%);width:min(600px,94vw);padding:8px 12px;background:#fff0d8;border:1px solid #ddbb8b;border-radius:12px;font:13px/1.5 system-ui}#storage-alert[hidden]{display:none}#storage-alert button{background:#f4d9af;border-radius:8px;margin-left:8px}.saving #drawing{cursor:wait}.compatibility{display:block;height:auto;overflow:auto}.compatibility main{max-width:640px;margin:32px auto;padding:24px;font:17px/1.8 system-ui}.compatibility h1{font-size:26px}.compatibility button{padding:10px 24px;border-radius:12px;background:#8971bc;color:#fff}
@media(max-width:680px){body{grid-template-rows:56px minmax(0,1fr) 126px}header{padding:0 8px;gap:4px}.brand{font-size:16px;gap:3px}.brand-symbol{display:none}.head-actions{gap:0}.head-actions .text-button{font-size:13px;padding:6px 8px;min-height:48px}.head-actions .icon-button{width:48px;min-height:48px}footer{grid-template-columns:1fr auto;padding:4px 10px max(8px,env(safe-area-inset-bottom));gap:2px 6px}.palette{gap:9px}.pencil{width:48px;height:48px}.pencil::before{width:33px;height:33px}.play-tools{padding-left:0;justify-self:center;gap:6px}.play,.remix{min-height:48px;padding:0 15px;font-size:14px}.edit-tools{gap:0}.edit-tools .icon-button,#new{width:48px;min-height:48px}.small-label{display:block}#toast{bottom:137px}#guide-status{top:69px;left:16px;max-width:calc(100vw - 32px);font-size:11px}.menu{top:54px}#gallery-items{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.art-card canvas{height:auto}.performing{grid-template-rows:56px minmax(0,1fr) 118px}#stage-controls{padding:4px 8px 8px;gap:4px 8px}#stage-controls .play{order:-1;min-height:48px;width:100%;justify-content:center;max-width:300px}#stage-controls .text-button{min-height:48px;font-size:14px;padding:6px 12px}dialog{padding:16px;max-height:90dvh}.dialog-heading h2{font-size:22px}}
@media(max-width:350px){.brand{font-size:14px}.head-actions .text-button{font-size:12px;padding:6px}.play,.remix{padding:0 10px;font-size:13px}.play-tools{gap:4px}footer{padding-left:6px;padding-right:6px}}
@media(max-height:500px) and (min-width:500px){body,.performing{grid-template-rows:52px minmax(0,1fr) 64px}header{padding:0 12px}.brand-tag{display:none}footer{display:flex;gap:7px;padding:3px 8px}.palette{gap:2px}.play-tools{padding:0;gap:5px}.play,.remix{padding:0 12px}.edit-tools{gap:0}.toolbar-separator{display:none}#guide-status{top:60px}#stage-controls{flex-wrap:nowrap;padding:6px;gap:12px}#stage-controls .play{order:0;width:auto}#toast{bottom:76px}#invitation .sketch-note{display:none}}

.brand{min-height:48px}#rename-form button,#delete-dialog button{min-height:48px}