@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;600;700&display=swap');
:root{font-family:'DM Sans','Noto Sans JP',sans-serif;font-synthesis:none;color-scheme:light;--bg:#f3f1ec;--paper:#fbfaf7;--paper-strong:#fffefa;--ink:#282923;--muted:#77786f;--line:#dedbd1;--accent:#557a67;--accent-contrast:#fff;--soft:#e9e7df;--shadow:0 12px 38px #26272012;--danger:#a94438}
*{box-sizing:border-box}html,body{touch-action:manipulation}body{margin:0;min-height:100vh;color:var(--ink);background-color:var(--bg);background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 900 1100%22%3E%3Cg fill=%22none%22 stroke=%22%238b8479%22 stroke-opacity=%22.2%22%3E%3Cpath stroke-width=%223%22 d=%22M-80 130C100 20 170 210 330 110S560 20 980 170M-60 154C100 54 190 235 342 139S585 57 960 197M-90 720C90 600 180 780 350 680s330-120 640 20M-60 746C100 630 200 812 360 710s350-112 620 12%22/%3E%3Cpath stroke-width=%221.5%22 d=%22M110-20C230 130 90 260 230 390s170 180 70 370M135-30C250 120 120 260 252 380s190 190 92 390M650-50C510 120 760 240 610 420s-80 300 90 450%22/%3E%3C/g%3E%3C/svg%3E"),radial-gradient(ellipse at 16% 10%,#fff9 0,transparent 38%),linear-gradient(135deg,#f5f2eb,#e8e4dc);background-size:cover;transition:background-color .25s,color .25s}body[data-theme=dark]{color-scheme:dark;--bg:#101419;--paper:#171d24;--paper-strong:#1c242d;--ink:#edf1f4;--muted:#9ba8b2;--line:#303b46;--accent:#68c8bb;--accent-contrast:#10201e;--soft:#252f39;--shadow:0 16px 45px #0007;--danger:#ff8a81;background-image:repeating-conic-gradient(from 45deg at 50% 50%,#20272d 0 25%,#151a1f 0 50%),linear-gradient(135deg,#101419,#111923 55%,#11161d);background-size:8px 8px,cover;background-blend-mode:soft-light,normal}
button,input{font:inherit;touch-action:manipulation}button{color:inherit}.app-shell{max-width:1060px;min-height:100vh;margin:0 auto;padding:23px 52px calc(22px + env(safe-area-inset-bottom))}.topbar{height:45px;display:flex;align-items:center;justify-content:space-between}.app-brand{display:flex;align-items:center;gap:10px;min-width:0}.app-icon{width:36px;height:36px;border-radius:10px;box-shadow:0 3px 10px #2223}.app-brand-copy{display:flex;flex-direction:column;gap:2px;min-width:0}.app-title{font-size:15px;font-weight:700;letter-spacing:.025em;line-height:1.1}.app-help{color:var(--muted);font-size:9px;line-height:1.35}.top-actions{display:flex;gap:9px}.icon-button{width:38px;height:38px;border:1px solid var(--line);background:var(--paper);border-radius:50%;color:var(--muted);font-size:18px;display:grid;place-items:center;cursor:pointer;transition:transform .15s,background .2s,border-color .2s}.icon-button:hover{color:var(--accent);border-color:var(--accent)}.icon-button:active{transform:scale(.94)}.library-heading{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:30px 0 17px}.deck-heading{display:flex;align-items:center;gap:10px}.deck-heading h1{font-size:16px;font-weight:600;letter-spacing:.03em;margin:0}.count-pill{font-size:10px;color:var(--muted);background:var(--soft);border-radius:20px;padding:4px 8px}.button{border:0;border-radius:8px;padding:11px 16px;font-size:12px;font-weight:600;cursor:pointer;transition:transform .15s,filter .15s}.button:active,.round-button:active{transform:scale(.97)}.button-primary{background:var(--accent);color:var(--accent-contrast)}.button-primary:hover{filter:brightness(1.08)}.empty-state{min-height:310px;display:flex;align-items:center;justify-content:center;padding:28px}.deck-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;padding:20px 0 30px}.deck-item{position:relative;min-height:190px;border:1px solid var(--line);border-radius:13px;background:var(--paper-strong);overflow:hidden;box-shadow:var(--shadow);transition:transform .16s,border-color .16s}.deck-item:hover{transform:translateY(-2px);border-color:var(--accent)}.deck-open{display:block;width:100%;border:0;background:transparent;padding:0;text-align:left;color:inherit;cursor:pointer;font:inherit}.deck-delete{position:absolute;right:8px;top:8px;width:31px;height:31px;border:1px solid var(--line);border-radius:50%;background:color-mix(in srgb,var(--paper-strong) 91%,transparent);color:var(--muted);font-size:20px;line-height:1;cursor:pointer;z-index:2}.deck-delete:hover{background:#a9443820;color:var(--danger)}.deck-preview{height:128px;background:var(--soft);display:flex;align-items:center;justify-content:center;overflow:hidden}.deck-preview img{height:100%;width:100%;object-fit:contain}.deck-preview .preview-placeholder{font-size:34px;color:var(--accent)}.deck-meta{display:flex;flex-direction:column;gap:5px;padding:11px 14px 13px}.deck-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12px;font-weight:600;line-height:1.45;min-height:1.45em}.deck-info{display:block;color:var(--muted);font-size:9px;line-height:1.4}
.study-view{min-height:calc(100vh - 125px);padding-top:11px;display:flex;flex-direction:column}.study-header{display:grid;grid-template-columns:1fr 2fr 1fr;align-items:center;padding:10px 0 17px}.study-header h1{justify-self:center;text-align:center;font-size:14px;font-weight:600;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.back-button{justify-self:start;border:0;background:transparent;font-size:20px;color:var(--accent);cursor:pointer;padding:7px 10px}.study-stage{flex:1;display:flex;align-items:center;justify-content:center;padding:20px 0;min-height:360px}.study-card{width:min(100%,720px);height:min(67vh,680px);min-height:330px;position:relative;border:1px solid var(--line);border-radius:17px;background:var(--paper-strong);padding:38px 38px 42px;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none;box-shadow:var(--shadow);transition:background .2s,border-color .2s,transform .18s ease,filter .18s ease;transform-style:preserve-3d;backface-visibility:hidden}.study-card.flip-out{transform:rotateY(88deg);filter:brightness(.82)}.study-card.flip-in{transform:rotateY(-88deg);filter:brightness(.82)}.study-card.is-back{background:var(--paper)}.study-card:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.study-image{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}.study-text{white-space:pre-wrap;font-size:17px;line-height:1.85;text-align:center;overflow-wrap:anywhere}.side-tag{position:absolute;left:17px;top:15px;color:var(--accent);font-size:10px;letter-spacing:.08em;z-index:1}.study-controls{width:min(100%,720px);margin:0 auto;display:flex;align-items:center;gap:14px;padding:2px 4px}.round-button{flex:0 0 41px;width:41px;height:41px;border:1px solid var(--line);background:var(--paper);border-radius:50%;cursor:pointer;color:var(--muted);font-size:16px}.round-next{background:var(--accent);color:var(--accent-contrast);border-color:var(--accent)}.page-navigator{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}.page-jump{display:flex;align-items:center;justify-content:center;gap:12px;color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}.jump-field{display:flex;align-items:center;gap:3px;border:1px solid var(--line);border-radius:8px;background:var(--paper);padding:2px}.jump-field input{width:57px;border:0;background:transparent;color:var(--ink);text-align:center;font-size:12px;outline:none;padding:4px 2px;appearance:textfield}.jump-field input::-webkit-inner-spin-button,.jump-field input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.jump-field button{width:27px;height:27px;border:0;border-radius:6px;background:var(--soft);color:var(--accent);font-size:15px;cursor:pointer}.page-slider{width:100%;height:18px;margin:0;accent-color:var(--accent);cursor:pointer;touch-action:manipulation}.page-slider::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:var(--line)}.page-slider::-webkit-slider-thumb{margin-top:-6px}
.import-overlay{position:fixed;inset:0;background:#1014199c;backdrop-filter:blur(4px);z-index:10;display:grid;place-items:center;padding:20px}.import-message{width:min(340px,100%);padding:25px;border:1px solid var(--line);border-radius:14px;background:var(--paper-strong);display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}.import-message strong{font-size:13px}.import-message span:last-child{font-size:10px;color:var(--muted)}.spinner{width:22px;height:22px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.toast{position:fixed;bottom:calc(20px + env(safe-area-inset-bottom));left:50%;transform:translate(-50%,15px);opacity:0;pointer-events:none;background:var(--ink);color:var(--bg);padding:11px 17px;border-radius:20px;font-size:11px;box-shadow:var(--shadow);transition:.22s;z-index:15;white-space:nowrap;max-width:calc(100vw - 30px);text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}[hidden]{display:none!important}
@media(max-width:700px){.app-shell{padding:13px 16px calc(16px + env(safe-area-inset-bottom))}.topbar{height:40px}.app-icon{width:32px;height:32px;border-radius:9px}.app-title{font-size:14px}.app-help{font-size:8px}.library-heading{padding:24px 0 14px}.deck-heading h1{font-size:15px}.button{padding:10px 13px;font-size:11px}.empty-state{min-height:280px}.deck-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding-top:14px}.deck-item{min-height:155px}.deck-preview{height:98px}.deck-meta{padding:10px}.deck-name{font-size:10px}.deck-info{font-size:8px}.study-view{min-height:calc(100dvh - 88px);padding-top:4px}.study-header{grid-template-columns:1fr 2fr 1fr;padding:6px 0 10px}.study-header h1{font-size:13px}.study-stage{min-height:0;padding:14px 0;flex:1}.study-card{height:min(65dvh,680px);min-height:260px;padding:28px 16px 36px;border-radius:13px}.study-text{font-size:15px}.study-controls{gap:8px;padding:0 1px}.round-button{flex-basis:37px;width:37px;height:37px}.page-jump{font-size:10px;gap:8px}.jump-field input{width:49px}.page-slider{height:22px}}
@media(max-width:370px){.app-shell{padding-left:12px;padding-right:12px}.deck-heading h1{font-size:14px}.study-card{min-height:230px}.study-controls{gap:5px}.round-button{flex-basis:34px;width:34px;height:34px}.jump-field input{width:43px}}