:root{color-scheme:light;--bg: #f7f4f1;--card: #ffffff;--ink: #191716;--ink-soft: #6b625c;--accent: #ff6f3d;--accent-dark: #d64614;--line: rgba(25, 23, 22, .12);--shadow: 0 18px 40px rgba(25, 23, 22, .08);--radius-lg: 22px;--radius-sm: 12px;--font-sans: "Space Grotesk", "Trebuchet MS", sans-serif;--panel-border: 1px solid rgba(25, 23, 22, .08);--panel-bg: rgba(255, 255, 255, .72);--panel-dashed: 1px dashed rgba(31, 28, 26, .08)}*{box-sizing:border-box}body{margin:0;font-family:var(--font-sans);background:radial-gradient(circle at top,rgba(255,111,61,.08),transparent 55%),var(--bg);color:var(--ink)}.app,.app *{box-shadow:none!important;text-shadow:none!important}.app{max-width:980px;margin:0 auto;padding:20px 20px 28px;display:grid;gap:16px;min-height:100vh}.app-header{display:flex;justify-content:space-between;gap:12px 16px;align-items:center;padding:6px 2px}.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:.75rem;color:var(--ink-soft);margin:0 0 6px}.app-header h1{font-size:1.9rem;margin:0}.subtitle{margin:4px 0 0;color:var(--ink-soft)}.mini-tip{margin:6px 0 0;font-size:.9rem;color:var(--ink-soft)}.header-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.auto-reveal-toggle{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink-soft);font-size:.9rem;font-weight:600}.auto-reveal-toggle input{margin:0}.level-picker{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink-soft);font-size:.9rem;font-weight:600}.level-picker select{border:none;background:transparent;color:var(--ink);font:inherit;font-weight:700;outline:none;cursor:pointer}button{border:none;cursor:pointer;font-family:inherit}.ghost{padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);font-weight:600}.top-bar{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;background:#fff;border-radius:var(--radius-lg);padding:12px 14px;border:1px solid var(--line);box-shadow:var(--shadow)}.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.stat{background:#fdfbf9;border-radius:14px;padding:8px 10px;border:1px solid rgba(25,23,22,.08);text-align:center}.stat span{display:block;font-size:1.35rem;font-weight:700}.stat small{color:var(--ink-soft)}.card-area{display:grid;gap:18px;justify-items:stretch;min-height:60vh;align-content:center}.study-layout{width:100%;max-width:1200px;display:flex;flex-direction:column}.study-cards{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:24px;align-items:stretch}.card{position:relative;width:100%;min-height:auto;background:transparent;border-radius:var(--radius-lg);border:none;box-shadow:none;padding:0;perspective:1200px;cursor:pointer}.card:before{content:"";position:absolute;inset:-20px;border-radius:calc(var(--radius-lg) + 20px);background:radial-gradient(circle,rgba(255,111,61,.18),transparent 70%);opacity:.5;z-index:0;pointer-events:none}.card-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .6s ease;border-radius:var(--radius-lg);box-shadow:0 30px 70px #1917162e;background:linear-gradient(180deg,#fff,#fdf8f4);z-index:1}.card-face{position:absolute;inset:0;padding:34px;background:#fff;border-radius:var(--radius-lg);border:1px solid rgba(25,23,22,.08);box-shadow:0 14px 40px #1917161f;backface-visibility:hidden}.card-face:after{content:"";position:absolute;inset:12px;border-radius:calc(var(--radius-lg) - 10px);border:1px dashed rgba(31,28,26,.08);pointer-events:none}.card-front{background:linear-gradient(180deg,#fff,#fff9f4)}.card-back{background:linear-gradient(180deg,#fff,#f7f3ef)}.label{display:inline-flex;align-items:center;gap:8px;margin-bottom:8px}.label:before{content:"";width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:14px 0 #ff6f3d59,28px 0 #2ec4b673}.card-front{transform:rotateY(0)}.card-back,.card.is-flipped .card-inner{transform:rotateY(180deg)}.card.card--flat{min-height:auto;cursor:default;perspective:none}.card.card--flat .card-inner{display:block;height:auto;transform:none!important;background:transparent;box-shadow:0 30px 70px #19171624}.card.card--flat .card-face{position:relative;inset:auto;transform:none;backface-visibility:visible;min-height:auto}.card-main-grid{display:block;min-height:auto}.card-main-left{display:grid;grid-template-rows:auto auto;gap:12px}.card-panel{border:var(--panel-border);border-radius:14px;background:var(--panel-bg);padding:16px}.card-panel--word{min-height:170px}.card-panel--meaning{min-height:190px;position:relative;cursor:pointer}.card-panel--meaning.is-locked .definition,.card-panel--meaning.is-locked .example,.card-panel--meaning.is-locked .related{filter:blur(8px);-webkit-user-select:none;user-select:none}.card-panel--meaning.is-locked:after{content:"Tap to reveal";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:8px 12px;border-radius:999px;background:#ffffffd9;font-size:.75rem;color:var(--ink-soft);letter-spacing:.06em;text-transform:uppercase;pointer-events:none;z-index:2}.card-panel--word h2{margin:6px 0 4px}.label{text-transform:uppercase;letter-spacing:.16em;font-size:.75rem;color:var(--ink-soft);margin:0 0 8px}.meta{color:var(--ink-soft);margin-top:8px}.definition{font-size:1.2rem;line-height:1.6}.image-float{border-radius:var(--radius-lg);border:1px solid rgba(25,23,22,.08);background:#fff;box-shadow:0 14px 40px #1917161f,0 30px 70px #1917162e;padding:34px;display:grid;justify-items:center;width:100%;aspect-ratio:1 / 1;height:auto;min-height:0;position:relative}.image-float:before{content:"";position:absolute;inset:12px;border-radius:10px;border:var(--panel-dashed);pointer-events:none}.image-float.no-image:after{content:"No image";font-size:.85rem;color:var(--ink-soft)}.image-float.loading:after{content:"Loading...";font-size:.85rem;color:var(--ink-soft)}.image-stage{width:100%;aspect-ratio:1 / 1;border-radius:14px;border:var(--panel-border);background:var(--panel-bg);position:relative;overflow:hidden;cursor:pointer}.image-fallback{position:absolute;inset:0;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 30% 30%,rgba(255,111,61,.08),transparent 45%),radial-gradient(circle at 70% 70%,rgba(46,196,182,.08),transparent 45%),var(--panel-bg);z-index:0}.image-fallback-term{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700;font-size:clamp(1.8rem,8vw,4rem);letter-spacing:.04em;color:#1f1c1a38;text-transform:lowercase}.card-image{display:block;width:100%;height:100%;object-fit:contain;border-radius:0;border:none;position:absolute;inset:0;z-index:1;background:var(--panel-bg);opacity:0;visibility:hidden}.image-float:not(.loading):not(.no-image) .card-image{opacity:1;visibility:visible}.image-float:not(.loading):not(.no-image) .image-fallback,.image-float.loading .image-fallback{display:none}.image-stage.is-locked .card-image,.image-stage.is-locked .image-fallback{filter:blur(11px);transform:scale(1.03)}.image-stage.is-locked:after{content:"Tap to reveal";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:8px 12px;border-radius:999px;background:#ffffffd9;color:var(--ink-soft);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;z-index:3;pointer-events:none}.image-float.loading .image-stage.is-locked:after{display:none}.image-spinner{width:34px;height:34px;border-radius:50%;border:3px solid rgba(25,23,22,.16);border-top-color:var(--accent);animation:spin .8s linear infinite;display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2}.image-float.loading .image-spinner{display:block}@keyframes spin{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}.example{margin-top:12px;color:var(--ink-soft);line-height:1.6;min-height:3.2em}.example:empty:before{content:" "}.related{margin:8px 0 0;color:var(--ink-soft);font-size:.95rem;min-height:1.45em;line-height:1.45}.related:empty:before{content:" "}.action-bar{display:flex;gap:16px;margin-top:24px;width:100%}.action-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:16px 24px;border-radius:var(--radius-lg);font-weight:700;font-size:1.15rem;cursor:pointer;transition:transform .1s ease,box-shadow .2s ease,background .2s ease;border:none;font-family:inherit;min-width:0}.action-btn:active{transform:scale(.96)}.action-btn--secondary{background:#fffaf4;color:var(--ink);border:1px solid rgba(214,70,20,.45)}.action-btn--secondary:hover{background:#fff3e9}.action-btn--primary{background:linear-gradient(135deg,#ff8a5f,var(--accent));color:#fff;box-shadow:0 8px 22px #ff6f3d61}.action-btn--primary:hover{background:linear-gradient(135deg,#ff7d4f,#f0612d)}@media(max-width:900px){.app-header{flex-direction:column;align-items:flex-start}.study-cards{grid-template-columns:1fr;gap:12px}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:820px){.app{min-height:100dvh;padding:12px 12px calc(12px + env(safe-area-inset-bottom));gap:10px}.app-header{gap:8px;padding:0}.app-header h1{font-size:clamp(1.7rem,6.4vw,2.1rem);line-height:1.05}.subtitle{margin-top:2px;font-size:.95rem}.mini-tip{display:none}.header-actions{gap:8px}.auto-reveal-toggle,.level-picker,.ghost{padding:8px 12px;font-size:.9rem}.top-bar{padding:10px}.stat--total{display:none}.card-area{min-height:0;align-content:start}.study-layout{min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:10px}.card{min-height:0}.card-face{padding:14px}.card-face:after{inset:9px}.card-main-left{gap:10px}.card-panel{padding:12px}.card-panel--word{min-height:110px}.card-panel--meaning{min-height:120px}.card-panel--word h2{margin:4px 0;font-size:clamp(1.9rem,8vw,2.5rem);line-height:1.05}.meta{margin-top:4px;font-size:.95rem}.definition{font-size:clamp(1.05rem,3.8vw,1.22rem);line-height:1.35}.example{margin-top:8px;line-height:1.45;min-height:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.related{margin-top:6px;min-height:0;line-height:1.35;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.image-float{margin-top:0;padding:12px;min-height:clamp(150px,25dvh,220px);aspect-ratio:auto}.image-float:before{inset:8px}.image-stage{aspect-ratio:auto;min-height:clamp(122px,20dvh,170px)}.action-bar{margin:0;gap:8px;position:sticky;bottom:0;z-index:10;padding:8px;border-radius:999px;background:#ffffffed;border:1px solid rgba(25,23,22,.08);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.action-btn{padding:12px 10px;font-size:clamp(.98rem,3.4vw,1.08rem);border-radius:999px;white-space:nowrap;gap:8px}.action-btn svg{width:18px;height:18px}.action-btn--primary{background:linear-gradient(135deg,#ff8a5f,var(--accent));color:#fff;border:1px solid rgba(255,255,255,.24)}.action-btn--secondary{background:#fffaf4;color:var(--ink);border:1px solid rgba(214,70,20,.45)}}@media(max-width:420px){.app{padding:10px 10px calc(10px + env(safe-area-inset-bottom))}.eyebrow{margin-bottom:4px;font-size:.68rem}.auto-reveal-toggle,.level-picker,.ghost{font-size:.84rem}.card-face{padding:12px}.card-panel{padding:10px}.card-panel--word{min-height:98px}.card-panel--meaning{min-height:108px}.image-float{min-height:clamp(128px,22dvh,170px)}.image-stage{min-height:clamp(104px,18dvh,140px)}}