.rp-viewport{position:relative;width:100%;aspect-ratio:360/640;overflow:hidden}.rp-native{--rp-bg:#FDF7F7;--rp-ink:#0F172A;--rp-muted:#64748B;--rp-accent:#F43F5E;--rp-border:#F1F5F9;position:absolute;top:0;left:0;width:360px;height:640px;transform-origin:top left;background:var(--rp-bg) url(/cdn/dashboard/dashboard-bg.webp) top center/100% auto no-repeat;color:var(--rp-ink);font-size:14px;line-height:20px}.rp-header{display:flex;align-items:center;gap:10px;min-height:64px;padding:10px 16px}.rp-back{display:grid;place-items:center;width:36px;height:36px;flex-shrink:0;border-radius:50%;border:1px solid #FFE4E6;background:#fff;color:#475569}.rp-header>div{min-width:0}.rp-header strong{display:block;font-size:14px;line-height:20px;font-weight:700}.rp-header small{display:block;margin-top:2px;font-size:10px;line-height:14px;color:var(--rp-muted)}.rp-reader-body::-webkit-scrollbar{display:none}.rp-reader-body{position:absolute;top:64px;bottom:72px;left:0;right:0;overflow:auto;scrollbar-width:none;display:flex;flex-direction:column;gap:12px;padding:0 16px 8px}.rp-cover{display:block;flex-shrink:0;width:100%;aspect-ratio:1600/899;overflow:hidden;border-radius:22px;background:#f1f5f9}.rp-cover img{display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.rp-cover-fallback{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px;border:1px solid #FFE4E6;border-radius:12px;background:#fff1f2;color:#fb7185;font-size:12px;font-weight:700}.rp-cover-compact{height:100%;aspect-ratio:1;border-radius:16px}.rp-cover-compact .rp-cover-fallback{font-size:10px}.rp-reader-controls{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:8px}.rp-story-title{flex:1;min-width:0}.rp-story-title strong{display:block;font-size:18px;line-height:28px;font-weight:700}.rp-story-title rt{font-size:10px;line-height:12px;color:#f43f5e}.rp-story-title small{display:block;margin-top:2px;font-size:11px;line-height:16px;font-weight:600;color:#94a3b8}.rp-settings{padding:8px 12px;flex-shrink:0;border:1px solid var(--rp-border);border-radius:16px;background:#fff;box-shadow:0 2px 4px #00000006}.rp-settings>div{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:10px;line-height:14px;font-weight:700;color:#334155}.rp-settings>div+div{margin-top:6px}.rp-switch{width:28px;height:17px;border-radius:10px;background:var(--rp-accent);padding:2px}.rp-switch:after{content:"";display:block;margin-left:auto;width:13px;height:13px;border-radius:50%;background:#fff}.rp-stepper{display:flex;align-items:center;height:26px;border:1px solid #E2E8F0;border-radius:8px}.rp-stepper svg{margin:0 6px}.rp-stepper b{width:20px;text-align:center;border-inline:1px solid var(--rp-border);font-size:11px}.rp-meta{display:flex;align-items:center;gap:6px}.rp-meta>span,.rp-meta>b{display:flex;align-items:center;gap:4px;padding:1.5px 6px;border-radius:99px;background:#f1f5f9;color:var(--rp-muted);font-size:9.5px;line-height:14px;font-weight:700;white-space:nowrap}.rp-meta>b{background:#ffe4e6;color:#e11d48}.rp-paragraph{flex-shrink:0;padding:16px;border:1px solid var(--rp-border);border-radius:20px;background:#fff;box-shadow:0 2px 4px #00000006}.rp-paragraph-main{display:flex;align-items:flex-start;gap:12px}.rp-japanese{display:flex;flex:1;flex-wrap:wrap;align-items:flex-end;row-gap:4px;min-width:0}.rp-unit{display:flex;flex-direction:column;align-items:center;border-radius:4px;font-size:19px;line-height:34px;font-weight:500}.rp-ruby{font-size:10px;line-height:14px;font-weight:700;color:var(--rp-accent);white-space:nowrap}.rp-word{border-bottom:1px solid #FECDD3}.rp-tapped{background:#ffe4e6}.rp-audio{display:grid;place-items:center;width:36px;height:36px;flex-shrink:0;border-radius:50%;background:#fdf2f4;color:#be123c}.rp-playing{box-shadow:0 0 0 3px #ffe4e6}.rp-translation{display:flex;align-items:flex-start;gap:10px;margin-top:12px;padding:10px 14px;border-radius:14px;background:#f1f6f9;font-size:10.5px;line-height:15.5px;color:var(--rp-muted)}.rp-translation strong{display:flex;align-items:center;gap:4px;flex-shrink:0;padding-top:2px;font-weight:700;color:#334155}.rp-translation>span{flex:1;min-width:0}.rp-reader-footer{position:absolute;bottom:12px;left:16px;right:16px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 6px 6px 16px;border:1px solid var(--rp-border);border-radius:99px;background:#fff;box-shadow:0 3px 12px #0f172a12}.rp-reader-footer>span{font-size:10.5px;font-weight:700;white-space:nowrap;color:#475569}.rp-reader-footer>i{flex:1;height:8px;overflow:hidden;border-radius:99px;background:#e2e8f0}.rp-reader-footer>i>i{display:block;width:14.3%;height:100%;border-radius:99px;background:var(--rp-accent)}.rp-reader-footer>strong{display:flex;align-items:center;gap:4px;padding:8px 12px;border-radius:99px;background:var(--rp-accent);box-shadow:0 3px #be123c;font-size:12px;color:#fff;white-space:nowrap}.rp-library{display:flex;flex-direction:column;gap:12px;padding:0 16px 16px}.rp-library-hero{position:relative;overflow:hidden;min-height:164px;padding:16px;border:1px solid white;border-radius:24px;background:#fff;box-shadow:0 3px 10px #0f172a08}.rp-library-hero>img{position:absolute;right:0;top:0;width:170px;height:100%;-o-object-fit:contain;object-fit:contain;-o-object-position:right;object-position:right}.rp-library-hero>div{position:relative;max-width:56%}.rp-library-hero span{font-size:10px;font-weight:900;color:#f43f5e}.rp-library-hero strong{display:block;margin-top:6px;font-size:18px;line-height:24px;font-weight:900}.rp-library-hero p{margin-top:6px;font-size:10px;line-height:14.5px;font-weight:500;color:#64748b}.rp-library-hero small{display:inline-block;margin-top:8px;padding:4px 10px;border:1px solid #BFDBFE;border-radius:99px;background:#eff6ff;color:#2563eb;font-size:10px;font-weight:700}.rp-library-heading{display:flex;align-items:center;justify-content:space-between}.rp-library-heading>strong{font-size:17px;font-weight:900}.rp-library-heading>span{padding:6px 14px;border:1px solid #FDA4AF;border-radius:99px;color:#e11d48;background:#fff1f2;font-size:11px;font-weight:700}.rp-levels{display:flex;align-items:center;gap:8px}.rp-levels>*{padding:6px 16px;border:1px solid #E2E8F0;border-radius:99px;background:#fff;color:#334155;font-size:12px;font-weight:700}.rp-levels>b{background:#f43f5e;border-color:#f43f5e;color:#fff}.rp-kotoba-sheet{position:absolute;bottom:0;left:0;right:0;z-index:10;display:flex;flex-direction:column;gap:16px;padding:16px 20px 20px;border-top:1px solid #FFE4E6;border-radius:24px 24px 0 0;background:#fff;box-shadow:0 -12px 30px -12px #4c051940}.wp-viewport{position:relative;width:100%;aspect-ratio:360/560;overflow:hidden}.wp-native{--wp-navy:#172D46;--wp-rose:#E11D48;--wp-border:#E2E8F0;position:absolute;top:0;left:0;width:360px;height:560px;transform-origin:top left;background:#fff7f9;color:var(--wp-navy);font-size:14px;line-height:20px}.wp-lesson{padding:16px}.wp-writing-card{display:flex;flex-direction:column;gap:12px;padding:12px;border:1px solid #FFF1F2;border-radius:22px;background:#fff;box-shadow:0 2px 10px #e11d480d}.wp-writing-header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 4px}.wp-writing-header>strong{flex:1;min-width:0;font-size:16px;line-height:22px;font-weight:700}.wp-replay{display:flex;align-items:center;justify-content:center;flex-shrink:0;gap:6px;padding:6px 14px;border:1px solid #FECDD3;border-radius:99px;background:#fff;color:var(--wp-rose);font-size:12.5px;line-height:18px;font-weight:600}.wp-replaying{opacity:.6}.wp-surface{position:relative;width:100%;aspect-ratio:1;overflow:hidden;border:1px solid #E2E8F0CC;border-radius:16px;background:#f8fafc}.wp-grid-x{position:absolute;top:50%;left:0;right:0;border-top:1px dashed var(--wp-border)}.wp-grid-y{position:absolute;left:50%;top:0;bottom:0;border-left:1px dashed var(--wp-border)}.wp-strokes{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.wp-ink{stroke-dasharray:1 2;transition:stroke-dashoffset .55s ease-in-out,opacity 0s}.wp-stroke-number{font-size:4.7px;font-weight:700;paint-order:stroke;stroke:#fff;stroke-width:1.5px;stroke-linejoin:round}.wp-watch{position:absolute;left:50%;bottom:14px;padding:5px 14px;border:1px solid #FFE4E6;border-radius:99px;background:#fffffff5;font-size:11.5px;line-height:16px;font-weight:600;color:var(--wp-rose);box-shadow:0 2px 8px #e11d481a;transform:translate(-50%);white-space:nowrap}.wp-counter{position:absolute;left:12px;top:12px;padding:4px 10px;border:1px solid #E2E8F0;border-radius:99px;background:#fffffff2;font-size:11px;line-height:16px;font-weight:600;font-variant-numeric:tabular-nums;box-shadow:0 1px 4px #0f172a14}.wp-controls{display:flex;gap:6px;align-items:center}.wp-controls>span{display:flex;align-items:center;justify-content:center;flex:1;min-width:0;height:44px;gap:5px;padding:0 8px;border:1px solid var(--wp-border);border-radius:12px;background:#fff;font-size:12px;font-weight:600;white-space:nowrap}.wp-controls>span:first-child{flex:.9}.wp-controls svg{flex-shrink:0}.wp-controls .wp-guide{flex:1;background:#ffedf1;border-color:#fbcfda;color:var(--wp-rose)}.wp-controls .wp-check{flex:1.25;padding:0 10px;background:var(--wp-rose);border-color:var(--wp-rose);color:#fff}.wp-success{position:absolute;bottom:28px;left:16px;right:16px;display:flex;align-items:center;gap:10px;padding:12px;border:1px solid #A7F3D0;border-radius:16px;background:#fff;box-shadow:0 10px 30px #0f172a24;color:#047857}.wp-success>svg{flex-shrink:0}.wp-success strong{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:900}.wp-success p{margin-top:2px;color:#475569;font-size:12px;line-height:18px;font-weight:500}@media (prefers-reduced-motion:reduce){.wp-ink{transition:none}}
