:root{color:#312c27;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;--ink:#312c27;--muted:#766d63;--paper:#fffdf9;--line:#e8e0d5;--accent:#dd6844;--accent-soft:#fae5da;--sage:#657b66;--sage-soft:#e8efe5;background:#f6f1e8;font-family:-apple-system,BlinkMacSystemFont,SF Pro Text,PingFang SC,Noto Sans CJK SC,sans-serif}*{box-sizing:border-box}html{background:#f6f1e8;min-width:320px;min-height:100%}body{background:radial-gradient(circle at 8% -5%,#ebaa6e2b,#0000 25rem),#f6f1e8;min-width:320px;min-height:100dvh;margin:0;overflow-x:hidden}button{color:inherit;font:inherit;-webkit-tap-highlight-color:transparent;cursor:pointer;border:0}button:focus-visible{outline-offset:2px;outline:3px solid #dd684452}.app-shell{width:min(100%,560px);min-height:100dvh;padding:max(18px, env(safe-area-inset-top)) 16px max(22px, env(safe-area-inset-bottom));margin:0 auto}.app-header{justify-content:space-between;align-items:center;gap:12px;padding:2px 2px 16px;display:flex}.brand{align-items:center;gap:10px;min-width:0;display:flex}.brand-mark{color:#aa492d;letter-spacing:-.12em;background:#f6cfae;border:1px solid #b55d3b33;border-radius:14px;flex:none;place-items:center;width:42px;height:42px;font-family:SFMono-Regular,Consolas,monospace;font-size:.98rem;font-weight:800;display:grid;box-shadow:inset 0 1px #ffffffad}.brand h1{letter-spacing:-.035em;margin:0;font-size:1.25rem;font-weight:760}.brand p{color:var(--muted);margin:3px 0 0;font-size:.76rem}.random-button{color:#5f554c;background:#fffdf9c2;border:1px solid #e5dbcf;border-radius:999px;flex:none;align-items:center;gap:6px;min-height:44px;padding:0 13px;font-size:.85rem;font-weight:650;display:inline-flex}.random-button:active,.filter-chip:active,.card-navigation button:active,.status-button:active{transform:scale(.97)}.filter-list{scrollbar-width:none;-webkit-overflow-scrolling:touch;gap:8px;margin:0 -16px 15px;padding:0 16px 2px;display:flex;overflow-x:auto}.filter-list::-webkit-scrollbar{display:none}.filter-chip{color:#756b62;background:0 0;border:1px solid #0000;border-radius:999px;flex:none;min-height:38px;padding:0 15px;font-size:.85rem;font-weight:650;transition:transform .12s,background-color .12s,color .12s}.filter-chip.is-active{color:#9e442b;background:#fbe5d9;border-color:#ead8cb}.card-stage{animation:.18s ease-out both card-arrive}.study-card{background:var(--paper);touch-action:pan-y;border:1px solid #634d3a17;border-radius:28px;padding:22px 20px 18px;position:relative;box-shadow:0 18px 45px #58412d14,0 2px 8px #58412d0a}.card-heading{justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px;display:flex}.category-label{color:#9a765f;letter-spacing:.07em;margin-bottom:7px;font-size:.72rem;font-weight:700;display:inline-block}.card-heading h2{color:#2c2824;letter-spacing:-.045em;margin:0;font-size:clamp(1.65rem,7.3vw,2.3rem);line-height:1.07}.icon-button{background:#f5f0e8;border-radius:50%;place-items:center;min-width:46px;min-height:46px;display:grid}.favorite-button{color:#a1978d;flex:none;font-size:1.6rem;line-height:1}.favorite-button.is-active{color:#e29b2f;background:#fff3d7}.code-block{tab-size:4;white-space:pre-wrap;overflow-wrap:anywhere;font-variant-ligatures:none;border:1px solid #e8e2d8;border-radius:18px;max-width:100%;margin:0;padding:18px 16px;font-size:clamp(.86rem,3.7vw,.98rem);line-height:1.7;overflow-x:hidden;color:#2e3330!important;background:#f6f3ee!important;font-family:SFMono-Regular,Cascadia Code,Consolas,monospace!important}.one-line{color:#3d3731;margin:18px 2px 16px;font-size:1.03rem;font-weight:610;line-height:1.72}.expand-button{color:#99472f;background:#fff9f3;border:1px solid #eadfd4;border-radius:15px;justify-content:space-between;align-items:center;width:100%;min-height:50px;padding:0 15px;font-size:.94rem;font-weight:700;display:flex}.chevron{transition:transform .15s;display:inline-block}.chevron.is-open{transform:rotate(180deg)}.explanation{margin:20px 0 2px;padding-top:2px;animation:.18s ease-out both explanation-open}.explanation h3{color:#4a423b;letter-spacing:.01em;margin:0 0 11px;font-size:.88rem}.detail-list{margin:0}.detail-item{border-top:1px solid #eee7df;grid-template-columns:minmax(94px,36%) 1fr;gap:12px;padding:13px 0;display:grid}.detail-item:first-child{border-top:0}.detail-item dt,.detail-item dd{margin:0}.detail-item code{color:#86442f;overflow-wrap:anywhere;font-family:SFMono-Regular,Consolas,monospace;font-size:.8rem;font-weight:650}.detail-item dd{color:#625950;font-size:.88rem;line-height:1.6}.project-example{background:#f8eee3;border-radius:17px;margin-top:16px;padding:16px}.project-example h3{color:#8e4b35}.project-example p{color:#5c5148;margin:0;font-size:.9rem;line-height:1.67}.status-group{border-top:1px solid #eee7de;grid-template-columns:1fr 1fr;gap:9px;margin-top:18px;padding-top:17px;display:grid}.status-button{color:#70675f;background:#faf8f4;border:1px solid #e6dfd6;border-radius:14px;min-height:46px;font-size:.88rem;font-weight:680;transition:transform .12s,background-color .12s}.status-button span{margin-right:3px}.status-button.understood.is-active{color:#48604a;background:var(--sage-soft);border-color:#cadac8}.status-button.learning.is-active{color:#94472f;background:var(--accent-soft);border-color:#edcdbf}.card-navigation{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#fffdf9c2;border:1px solid #634d3a14;border-radius:19px;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;margin-top:14px;padding:7px;display:grid;box-shadow:0 8px 24px #58412d0d}.card-navigation button{color:#5d554e;background:0 0;border-radius:13px;min-height:44px;padding:0 10px;font-size:.9rem;font-weight:670}.card-navigation button:first-child{text-align:left}.card-navigation button:last-child{text-align:right}.card-position{color:#958a80;text-align:center;font-variant-numeric:tabular-nums;min-width:60px;font-size:.82rem}.card-position strong{color:#4b433c;font-size:.98rem}.swipe-hint{color:#9a9086;text-align:center;margin:9px 0 0;font-size:.72rem}@keyframes card-arrive{0%{opacity:0;transform:translateY(5px)}}@keyframes explanation-open{0%{opacity:0;transform:translateY(-4px)}}@media (width>=560px){.app-shell{padding-left:24px;padding-right:24px}.filter-list{margin-left:-24px;margin-right:-24px;padding-left:24px;padding-right:24px}.study-card{padding:28px 28px 22px}}@media (width<=360px){.brand p{display:none}.random-button{padding:0 10px;font-size:.8rem}.study-card{padding-left:17px;padding-right:17px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}