:root{--bg-start:#fff1c9;--bg-middle:#ffd1dd;--bg-end:#c8ecff;--card-bg:#ffffffeb;--text-main:#2e2452;--text-soft:#6f5b95;--button-disabled:#d0d0d6}*{box-sizing:border-box}html,body{width:100%;min-height:100%;margin:0}body{color:var(--text-main);font-family:Trebuchet MS,Segoe UI,sans-serif}.homeContainer{background:linear-gradient(160deg,var(--bg-start)0%,var(--bg-middle)50%,var(--bg-end)100%);justify-content:center;align-items:center;width:100%;min-height:100dvh;padding:24px 16px;display:flex}.homeContent{flex-direction:column;align-items:center;gap:24px;width:min(440px,100%);display:flex}.homeTitle{color:var(--text-main);text-align:center;letter-spacing:-.02em;margin:0;font-size:2rem;font-weight:800}.homeSubtitle{color:var(--text-soft);text-align:center;margin:0;font-size:1rem;font-weight:500}.demoReplayBtn{color:var(--text-main);cursor:pointer;background:#ffffffeb;border:none;border-radius:999px;padding:10px 14px;font-size:.9rem;font-weight:700;box-shadow:0 4px 14px #00000014}.demoReplayBtn:hover{transform:translateY(-1px)}.topRightActions{top:calc(12px + env(safe-area-inset-top));z-index:100;align-items:center;gap:8px;display:flex;position:fixed;right:12px}.demoInlineRow{justify-content:center;width:100%;margin-bottom:10px;display:flex}.demoInlineBtn{color:var(--text-main);cursor:pointer;background:#ffffffeb;border:none;border-radius:999px;padding:10px 14px;font-size:.9rem;font-weight:700;box-shadow:0 4px 14px #00000014}.demoInlineBtn:hover{transform:translateY(-1px)}.demoInlineBtn:active{transform:scale(.98)}.appsGrid{grid-template-columns:repeat(2,1fr);gap:16px;width:100%;max-width:320px;display:grid}.appCard{cursor:pointer;border:3px solid;border-radius:24px;flex-direction:column;justify-content:center;align-items:center;gap:10px;padding:28px 16px;text-decoration:none;transition:all .2s;display:flex;box-shadow:0 8px 24px #00000014}.appCard:hover{transform:translateY(-3px);box-shadow:0 12px 32px #0000001f}.appCard:active{transform:scale(.96)}.appCard.is-locked{opacity:.4;pointer-events:none}.appIcon{font-size:2.8rem;font-weight:800;line-height:1}.appLabel{color:var(--text-main);font-size:1rem;font-weight:700}.homeBtn{top:calc(12px + env(safe-area-inset-top));z-index:100;width:44px;height:44px;color:var(--text-main);cursor:pointer;background:#ffffffe6;border:none;border-radius:50%;justify-content:center;align-items:center;font-size:1.2rem;text-decoration:none;transition:all .2s;display:flex;position:fixed;left:12px;box-shadow:0 4px 14px #0000001f}.homeBtn:hover{background:#fff;transform:scale(1.08)}.homeBtn:active{transform:scale(.92)}.mainContainer{width:100%;min-height:100dvh;padding:calc(12px + env(safe-area-inset-top))12px calc(16px + env(safe-area-inset-bottom));background:linear-gradient(160deg,var(--bg-start)0%,var(--bg-middle)50%,var(--bg-end)100%);justify-content:center;align-items:flex-start;display:flex}.container{flex-direction:column;align-items:center;gap:10px;width:min(440px,100%);display:flex}.header{justify-content:center;align-items:center;gap:16px;width:100%;display:flex}.navBtn{width:48px;height:48px;color:var(--text-main);cursor:pointer;background:#ffffffe6;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:1.3rem;transition:all .2s;display:flex;box-shadow:0 4px 14px #0000001f}.navBtn:hover{background:#fff;transform:scale(1.08)}.navBtn:active{transform:scale(.92)}.letterDisplay{align-items:center;gap:4px;display:flex}.letterIndex{color:var(--text-main);letter-spacing:.05em;font-size:1.1rem;font-weight:700}.animatedGuide{cursor:pointer;-webkit-user-select:none;user-select:none;flex-direction:column;align-items:center;gap:8px;width:100%;max-width:400px;display:flex}.animatedGuide svg{background:#fff;border:2px solid #3b82f64d;border-radius:16px;width:180px;height:180px;padding:14px;box-shadow:0 6px 18px #00000014}.animatingHint{color:var(--text-soft);margin:0;font-size:.85rem;font-weight:500}.guideControls{justify-content:center;align-items:center;min-height:36px;display:flex}.replayBtn{color:#2563eb;cursor:pointer;background:#3b82f61f;border:none;border-radius:10px;padding:8px 16px;font-size:.85rem;font-weight:600;transition:all .2s}.replayBtn:hover{background:#3b82f638}.replayBtn:active{transform:scale(.95)}.drawingSection{flex-direction:column;align-items:center;gap:10px;width:100%;max-width:400px;display:flex}.drawingSection .canvasWrapper,.drawingSection .topControls{width:75%}.topControls{align-items:center;gap:8px;display:flex}.traceModeToggle{flex:1;gap:6px;display:flex}.traceModeBtn{color:var(--text-soft);cursor:pointer;background:#fffc;border:none;border-radius:999px;padding:8px 14px;font-size:.85rem;font-weight:700;transition:all .15s}.traceModeBtn.is-active{color:#2563eb;background:#3b82f624}.canvasWrapper{background:#fff;border:3px solid #6f5b9538;border-radius:16px;width:100%;transition:border-color .18s,box-shadow .18s;position:relative;box-shadow:0 8px 24px #0000001a}.canvasWrapper.is-idle{border-color:#6f5b9538}.canvasWrapper.is-drawing{border-color:#3b82f6c7;box-shadow:0 0 0 4px #3b82f61f,0 8px 24px #0000001a}.canvasWrapper.is-mid{border-color:#f59e0bd9;box-shadow:0 0 0 4px #f59e0b1f,0 8px 24px #0000001a}.canvasWrapper.is-good{border-color:#10b981e6;box-shadow:0 0 0 4px #10b9811f,0 8px 24px #0000001a}.canvasWrapper.is-low{border-color:#ef4444c7;box-shadow:0 0 0 4px #ef44441a,0 8px 24px #0000001a}.traceWatermark{pointer-events:none;z-index:1;width:calc(100% - 20px);height:calc(100% - 20px);position:absolute;inset:10px}.drawingCanvas{z-index:2;cursor:crosshair;touch-action:none;background:0 0;border:0;border-radius:16px;width:100%;height:calc(100dvh - 420px);min-height:220px;max-height:460px;display:block;position:relative}.canvasClearBtn{z-index:10;width:44px;height:44px;color:var(--text-soft);cursor:pointer;background:#ffffffeb;border:none;border-radius:50%;justify-content:center;align-items:center;font-size:1.4rem;font-weight:700;transition:all .15s;display:flex;position:absolute;top:10px;left:10px;box-shadow:0 2px 10px #0000001f}.canvasClearBtn:active{background:#ef444426;transform:scale(.85)}.canvasInfoBtn{z-index:10;width:44px;height:44px;color:var(--text-main);cursor:pointer;background:#ffffffeb;border:2px solid #0000;border-radius:50%;justify-content:center;align-items:center;font-size:1.1rem;font-weight:700;transition:all .18s;display:flex;position:absolute;top:10px;right:10px;box-shadow:0 2px 10px #0000001f}.canvasInfoBtn:active{transform:scale(.85)}.canvasInfoBtn:disabled{opacity:.5;cursor:not-allowed}.canvasInfoBtn.is-result{color:#b45309;background:#f59e0b26;border-color:#f59e0b80}.canvasInfoBtn.is-success{color:#065f46;background:#10b98126;border-color:#10b98180;animation:.4s successPulse}@keyframes successPulse{0%{transform:scale(1)}50%{transform:scale(1.15)}to{transform:scale(1)}}.generalControls{justify-content:center;align-items:center;gap:12px;width:100%;display:flex}.fullscreenBtn{width:44px;height:44px;color:var(--text-main);cursor:pointer;background:#ffffffe6;border:none;border-radius:50%;justify-content:center;align-items:center;font-size:1.2rem;transition:all .2s;display:flex;box-shadow:0 4px 14px #0000001f}.fullscreenBtn:hover{background:#fff;transform:scale(1.08)}.fullscreenBtn:active{transform:scale(.92)}.error{color:#ef4444;margin:0;font-size:.85rem}.info{color:var(--text-soft);margin:0;font-size:.85rem;font-weight:500}.versionLabel{bottom:calc(6px + env(safe-area-inset-bottom));z-index:50;color:#6f5b9566;letter-spacing:.05em;pointer-events:none;-webkit-user-select:none;user-select:none;font-size:.65rem;font-weight:600;position:fixed;right:8px}.drawingPrompt{display:none}@media (max-width:480px){.mainContainer{padding:calc(8px + env(safe-area-inset-top))8px calc(12px + env(safe-area-inset-bottom))}.container{gap:8px}.drawingSection .canvasWrapper,.drawingSection .topControls{width:88%}.currentLetter{font-size:3.5rem}.animatedGuide svg{width:140px;height:140px;padding:10px}.drawingCanvas{height:calc(100dvh - 360px);min-height:180px}.navBtn{width:40px;height:40px;font-size:1.1rem}}