*{box-sizing:border-box}body{margin:0;background:#eaf6ff;font-family:system-ui,'Noto Sans',sans-serif;color:#24312e}#app{max-width:520px;min-height:100dvh;margin:auto;background:linear-gradient(150deg,#fff7dd,#e9fbff);box-shadow:0 0 20px #b7c9d4}.screen{display:none;padding:18px;min-height:100dvh}.active{display:block}button{cursor:pointer;border:0;font:inherit}header{text-align:center}h1{font-size:32px;margin:12px 0 0}h1 span{font-size:46px;display:block;letter-spacing:1px;background:linear-gradient(90deg,#0877da,#ed3e40,#ff9e00,#21a646,#7434b9);background-clip:text;color:transparent}h2{margin:6px 0}em{font-family:cursive;font-size:29px;color:#161616}.tag{text-align:center;font-weight:650}.sun{text-align:right;font-size:46px}.paper{margin:24px 5px;padding:26px 12px;text-align:center;background:#fffef6;border:3px solid #f8d9a0;border-radius:26px;box-shadow:0 8px 24px #b0c9d5}.paper h1{font-size:36px}.paper .art{font-size:58px;margin:50px 0;line-height:1.7}.paper p{font-size:19px}.primary{width:100%;background:#0875ce;color:white;border-radius:30px;padding:17px;font-weight:800;font-size:20px;box-shadow:0 4px 0 #004b8d}.level{display:block;text-align:left;width:100%;margin:15px 0;padding:22px 14px;border-radius:22px;font-size:22px}.level b{display:inline-block;margin-left:8px}.level small{display:block;font-size:15px;margin:7px 0 0 44px}.green{background:#dbf9cf}.orange{background:#ffedc1}.purple{background:#edddff}.secondary{display:block;width:100%;margin:18px 0;background:#fff;border:2px solid #c7d9de;border-radius:15px;padding:12px;font-weight:700}.bar{display:flex;align-items:center;gap:15px;color:#12612e}.bar button{background:transparent;font-size:28px}.bar h2{font-size:21px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px}.grid button{min-height:125px;border-radius:16px;background:#fff;font-size:44px;box-shadow:0 2px 5px #ccc}.grid small{display:block;font-size:13px}.steps{display:flex;justify-content:space-around;margin:15px 0}.steps button{border-radius:50%;background:#dbe8ef;width:38px;height:38px}.steps button.selected{background:#169447;color:white}.reference{background:#fff;border-radius:20px;text-align:center;border:1px solid #ddd}.reference svg{width:100%;max-height:200px}.canvaswrap{background:white;border:2px solid #8bb0c6;border-radius:15px;overflow:hidden;height:270px;touch-action:none}canvas{width:100%;height:100%;touch-action:none;display:block}#instruction{background:#fff4d9;padding:12px;border-radius:12px;min-height:54px}.toolbar{display:flex;justify-content:space-between;margin-top:12px}.toolbar button{background:transparent;font-size:25px;padding:8px 4px;border-radius:9px}.toolbar button.chosen{background:#cce7ff}.toolbar small{display:block;font-size:11px}.colors{display:flex;justify-content:space-between;gap:5px;margin:12px 0}.colors button{width:30px;height:30px;border-radius:50%;border:2px solid white;box-shadow:0 0 0 1px #aaa}.colors button.selected{outline:3px solid #3285ee}.width{display:flex;justify-content:space-between;align-items:center}#toast{position:fixed;bottom:15px;left:50%;transform:translateX(-50%);background:#222;color:white;padding:10px 16px;border-radius:15px;display:none;max-width:90%}

.modes{display:flex;gap:9px;margin:12px 0 8px}.modes button{flex:1;border:2px solid #d5e4e6;border-radius:12px;padding:11px 4px;background:#fff;color:#38515b;font-weight:700;font-size:13px}.modes .modeon{background:#dcf6e6;border-color:#39a66b}.canvaswrap{position:relative;overflow:hidden}.canvaswrap #trace{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.32;z-index:1}.canvaswrap canvas{position:relative;z-index:2;touch-action:none}#trace[hidden]{display:none}