:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box}body{margin:0;background:var(--desk) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");color:var(--ink);font-family:'Cairo',Tahoma,sans-serif}
.wrap{max-width:560px;margin:0 auto;padding:16px 12px 40px}.top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px;padding:0 6px}.top b{display:block;font-family:'Aref Ruqaa',serif;font-size:30px}.top b::before{content:'✎ ';color:var(--mg)}.top span{font-size:13px;color:var(--mu)}#sum,#save-status{display:block;min-height:1.4em}#save-status{color:var(--success)}
.page{position:relative;background:var(--paper);border-radius:6px 14px 14px 6px;padding:18px 66px 24px 20px;min-height:460px;overflow:hidden;box-shadow:-4px 4px 0 -1px var(--paper),-4px 4px 0 var(--bd),-8px 8px 0 -1px var(--paper),-8px 8px 0 var(--bd),0 16px 32px rgba(0,0,0,.2),inset 0 0 60px rgba(160,120,60,.08);background-image:repeating-linear-gradient(transparent 0 31px,var(--line) 31px 32px);background-position:0 8px;transform-origin:right center}.page::before{content:"";position:absolute;top:0;bottom:0;right:48px;width:2px;background:var(--notebook-margin);opacity:.6}.page::after{content:"";position:absolute;top:0;bottom:0;right:12px;width:20px;background:radial-gradient(circle,var(--hole) 6px,transparent 7px) 0 10px/20px 48px repeat-y}.turn{animation-duration:.45s;animation-timing-function:ease;animation-fill-mode:both}.turn-next{animation-name:turn-next}.turn-prev{animation-name:turn-prev}@keyframes turn-next{from{transform:perspective(900px) rotateY(-28deg);opacity:.3}to{transform:none;opacity:1}}@keyframes turn-prev{from{transform:perspective(900px) rotateY(28deg);opacity:.3}to{transform:none;opacity:1}}
.ph{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.dn{font-family:'Aref Ruqaa',serif;font-size:22px;text-decoration:underline wavy var(--mg) 1.5px;text-underline-offset:7px}.pn{font-size:13px;color:var(--mu)}.lbl{font-size:13px;color:var(--mu);margin-top:6px}.q{font-family:'Aref Ruqaa',serif;font-size:26px;margin:6px 0 10px}.intent{font-family:'Aref Ruqaa',serif;font-size:22px;line-height:1.6;margin:2px 0 14px;white-space:pre-wrap}
textarea{width:100%;font:inherit;color:var(--ink);background:transparent;border:0;resize:none;outline:0;line-height:32px;font-size:16px;background-image:repeating-linear-gradient(transparent 0 31px,var(--mu) 31px 32px);opacity:.95}textarea.lines{min-height:130px;margin-top:10px}.ro{white-space:pre-wrap;line-height:32px;margin-top:10px;color:var(--mu)}
.btn{background:var(--ink);color:var(--paper);border:0;border-radius:10px;padding:9px 20px;font:600 15px 'Cairo',sans-serif;cursor:pointer;margin:6px 0;box-shadow:0 2px 0 rgba(0,0,0,.22);transition:transform .1s}.btn:disabled{opacity:.35;cursor:default}.btn:active{transform:translateY(2px);box-shadow:none}.btn.g{background:none;color:var(--mu);border:1px solid var(--bd)}.btn.g.on{color:var(--ac);border-color:var(--ac)}
.hint{font-size:12.5px;color:var(--mu);margin:2px 0 8px;line-height:1.7}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:8px 0 10px}.cell{position:relative;aspect-ratio:1;border:2px dashed var(--bd);border-radius:12px 8px 14px 9px;padding:7px;color:var(--ink);transition:border-color .3s}.cell.f{border:2px solid var(--ink);color:hsl(var(--mh,160) 55% 45%)}.cell.b{border:2px solid var(--bd);color:var(--blot)}.cell.new{animation:pop .5s ease}@keyframes pop{0%{transform:scale(.3) rotate(-20deg)}70%{transform:scale(1.12)}100%{transform:none}}.cell:empty::after{content:attr(data-n);position:absolute;inset:0;display:grid;place-items:center;color:var(--bd);font:700 22px 'Aref Ruqaa',serif}.cell.gold{border-color:#c9a227}.success-image{display:block;width:100%;height:100%;object-fit:contain;border-radius:8px}.cell.new .success-image{animation:pop .5s ease}
.tm{font-family:'Aref Ruqaa',serif;font-size:46px;color:var(--ac);line-height:1.3}.lock{text-align:center;color:var(--mu);padding:60px 10px;line-height:2}.nav{display:flex;justify-content:space-between;margin:12px 4px 8px}.dots{display:flex;flex-wrap:wrap;gap:5px;justify-content:center}.dot{width:30px;height:30px;border-radius:50%;border:1px solid var(--bd);background:var(--paper);color:var(--mu);font:12px 'Cairo',sans-serif;cursor:pointer;padding:0}.dot.l1{background:color-mix(in srgb,var(--ac) 25%,var(--paper))}.dot.l2{background:color-mix(in srgb,var(--ac) 50%,var(--paper))}.dot.l3{background:var(--ac);color:var(--paper)}.dot.t{border:2px solid var(--ink);color:var(--ink)}.dot.v{box-shadow:0 0 0 3px var(--mg)}.dot:disabled{opacity:.35;cursor:default}
[hidden]{display:none!important}input{font:inherit;font-size:15px;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--mu);outline:0;padding:6px 2px;width:100%}.home-link{text-decoration:none}.center-hint{text-align:center}.tools{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap}.tools .btn,.sound-tools .btn{padding:5px 12px;font-size:13px;margin:0}.sound-menu{position:relative;margin-bottom:10px}.sound-menu summary{display:inline-block;list-style:none}.sound-menu summary::-webkit-details-marker{display:none}.sound-tools{display:flex;gap:6px;flex-wrap:wrap;position:absolute;z-index:3;top:calc(100% + 4px);inset-inline-end:0;min-width:190px;padding:8px;background:var(--paper);border:1px solid var(--bd);border-radius:10px;box-shadow:0 5px 16px rgba(0,0,0,.18)}.sound-tools .btn{display:block;width:100%;text-align:start}.tool-menu{position:relative}.tool-menu summary{list-style:none}.tool-menu summary::-webkit-details-marker{display:none}.tool-menu-body{position:absolute;z-index:3;top:calc(100% + 4px);inset-inline-end:0;display:flex;flex-direction:column;min-width:150px;padding:5px;background:var(--paper);border:1px solid var(--bd);border-radius:10px;box-shadow:0 5px 16px rgba(0,0,0,.18)}.tool-menu-body .btn{text-align:start}.progress{margin:0 0 8px}.progress-label{font-size:12px;color:var(--mu);margin-bottom:2px}.shelf{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}.cov{aspect-ratio:3/4;border:0;border-radius:4px 12px 12px 4px;background:hsl(var(--h) 45% 42%);color:#fff;font:700 18px 'Aref Ruqaa',serif;cursor:pointer;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;box-shadow:inset 8px 0 0 rgba(0,0,0,.18)}.cov small{font:12px 'Cairo',sans-serif;opacity:.9}.cov:disabled{opacity:.3;cursor:default}.al{display:grid;grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:8px;margin:10px 0}.intro li{margin:8px 0;line-height:1.9}.pg{height:6px;border-radius:3px;background:var(--line);margin:4px 0 8px;overflow:hidden}.pg i{display:block;height:100%;background:var(--ac);transition:width 1s linear}.page.intro .q{font-size:34px}select{font:inherit;color:var(--ink);background:var(--paper);border:1px solid var(--bd);border-radius:8px;padding:6px;width:100%}.dn,.q,.intent,.tm,.top b{font-family:var(--hf,'Aref Ruqaa',serif)}.p-grid{background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px)!important;background-size:32px 32px!important}.p-dots{background-image:radial-gradient(var(--mu) 1px,transparent 1.5px)!important;background-size:32px 32px!important}.p-plain{background-image:none!important}.sticky{background:var(--sticky-bg);color:var(--sticky-text);padding:8px 12px;border-radius:2px 8px 4px 6px;margin:6px 0 10px;font-size:17px;box-shadow:var(--shadow-sm);font-family:'Aref Ruqaa',serif}[data-len]{margin-inline-end:4px}
.session-complete{margin:10px 0;padding:12px;border:1px solid var(--ac);border-radius:var(--radius-md);background:var(--acb);color:var(--ac);font-weight:600}.transfer-status{display:block;padding:4px 8px;color:var(--mu);font-size:12px}.impact-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:18px 0}.impact-grid div{padding:14px;background:var(--acb);border:1px solid var(--bd);border-radius:var(--radius-md);text-align:center}.impact-grid b,.impact-grid span{display:block}.impact-grid b{font:700 28px 'Aref Ruqaa',serif;color:var(--ac)}.impact-grid span{font-size:12px;color:var(--mu)}.focus-exit{position:fixed;z-index:20;top:16px;inset-inline-end:16px;padding:8px 12px;border:1px solid var(--bd);border-radius:var(--radius-md);background:var(--paper);color:var(--ink);cursor:pointer}.focus-mode{background:var(--desk)}.focus-mode .top,.focus-mode .tools,.focus-mode .sound-menu,.focus-mode .nav,.focus-mode .dots{display:none}.focus-mode .wrap{max-width:700px;padding-top:10vh}.focus-mode .page{min-height:70vh;display:flex;flex-direction:column;justify-content:center}.focus-mode .tm{text-align:center;font-size:clamp(52px,12vw,100px)}
.onboarding{text-align:center;padding:34px 28px 26px!important;display:flex;flex-direction:column;align-items:center;justify-content:center}.onboarding-art{display:grid;place-items:center;width:76px;height:76px;margin-bottom:12px;border:2px solid var(--mg);border-radius:50%;color:var(--ac);font:700 42px 'Aref Ruqaa',serif}.onboarding-step{font-size:12px;color:var(--mu);margin-bottom:12px}.onboarding .q{margin:0 0 10px}.onboarding .lead{max-width:350px;line-height:2;margin:0 0 12px}.onboarding-example{width:100%;padding:12px;margin:4px 0 12px;border:1px dashed var(--bd);border-radius:var(--radius-md);color:var(--mu);font-family:'Aref Ruqaa',serif}.onboarding-skip{font-size:12px}.onboarding-dots{display:flex;gap:6px;margin-top:10px}.onboarding-dots i{width:7px;height:7px;border-radius:50%;background:var(--bd)}.onboarding-dots i.active{background:var(--ac);transform:scale(1.25)}

@media(max-width:480px){
  .wrap{padding:10px 8px 28px}
  .top{align-items:flex-start;gap:6px;flex-direction:column;margin-bottom:8px}
  .top b{font-size:26px}
  .top span{font-size:12px}
  .tools{gap:5px}
  .tools .btn{flex:1;padding:7px 8px;font-size:12px}
  .tools .tool-menu{flex:1}
  .tools .tool-menu summary{text-align:center}
  .page{padding:16px 42px 20px 13px;min-height:440px}
  .page::before{right:30px}
  .page::after{right:4px;width:18px;background-size:18px 44px}
  .ph{align-items:flex-start;gap:6px}
  .dn{font-size:19px}
  .pn{font-size:11px;white-space:nowrap}
  .q{font-size:23px}
  .intent{font-size:20px}
  .grid{gap:6px}
  .cell{border-radius:9px 6px 10px 7px;padding:4px}
  .tm{font-size:40px}
  .nav .btn{padding-inline:12px;font-size:13px}
  .shelf{grid-template-columns:repeat(2,1fr)}
}