.casual-hero .note-hero-inner{max-width:900px}main.casual-page{--casual-ink:#171425;--casual-muted:#5b536e;--casual-hot:#e61381;--casual-violet:#7c3aed;width:min(100% - 2rem,1080px);margin:0 auto;padding:clamp(1.25rem,2.5vw,2.5rem) 0 4rem;display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(1rem,2.5vw,2rem);align-items:start;color:var(--casual-ink)}.casual-toc{position:sticky;top:86px;max-height:calc(100vh - 110px);overflow:auto;display:grid;gap:.35rem;padding:.8rem;border-radius:20px;background:#0f0c1ceb;box-shadow:0 18px 50px #0f0c1c2e}.casual-toc a{color:#fff;text-decoration:none;font-weight:800;font-size:.88rem;padding:.7rem .8rem;border-radius:999px;background:#ffffff12}.casual-toc a:hover{background:#e613814d}.casual-content{display:grid;gap:1.15rem;min-width:0}.casual-card{background:#fffffff5;border:1px solid rgba(31,41,55,.1);border-radius:28px;box-shadow:0 18px 60px #0f172a1f;padding:clamp(1.15rem,3vw,2rem);overflow:hidden}.casual-card h2{color:#111827;font-size:clamp(1.65rem,4vw,2.55rem);line-height:1.05;letter-spacing:-.04em;margin:.15rem 0 .85rem}.casual-card h3{color:#211735;margin:.2rem 0 .5rem;font-size:1.18rem}.casual-card p{color:var(--casual-muted);line-height:1.72;font-size:1.02rem}.casual-card .lead{font-size:1.14rem;max-width:52rem}.casual-start{background:linear-gradient(135deg,#fffffffa,#ffeff8f5)}.context-grid,.contrast-grid,.drop-grid,.response-grid,.masculine-grid,.practice-grid{display:grid;gap:.85rem;margin-top:1rem}.context-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.context-grid>div,.contrast-grid>section,.drop-grid>section,.response-grid>section,.masculine-grid>section,.practice-grid>section{min-width:0;padding:1rem;border:1px solid rgba(124,58,237,.15);border-radius:20px;background:#7c3aed0d}.context-grid strong{display:block;color:var(--casual-hot);font-size:1.07rem}.context-grid span{display:block;color:var(--casual-muted);line-height:1.55;margin-top:.3rem}.casual-note{background:#1d1530;color:#fff!important;border-left:5px solid var(--casual-hot);border-radius:16px;padding:1rem;margin:1rem 0 0;font-weight:750}.type-label{text-transform:uppercase;font-size:.72rem!important;letter-spacing:.12em;font-weight:950;margin:0 0 .55rem!important;color:var(--casual-hot)!important}.contrast-grid,.drop-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.drop-grid>section:first-child{grid-column:1 / -1}.jp-example{background:#211735;border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:.9rem 1rem;margin-top:.7rem}.jp-example p{color:#fff8f2!important;-webkit-text-fill-color:#fff8f2;margin:0;font-size:1.13rem;font-weight:800}.jp-example ruby,.jp-example rb,.jp-example .manual-ruby{color:#fff8f2!important;-webkit-text-fill-color:#fff8f2}.jp-example rt{color:#ff9ccb!important;-webkit-text-fill-color:#ff9ccb;font-size:.55em;font-weight:900}.jp-example .gloss{color:#ffd3e8!important;-webkit-text-fill-color:#ffd3e8;font-size:.9rem;line-height:1.6;font-weight:500;margin-top:.5rem}.micro-note{margin:1rem 0 0;padding:.75rem .85rem;border-left:4px solid var(--casual-violet);background:#7c3aed14;border-radius:0 12px 12px 0;font-size:.93rem!important}.drop-card{background:linear-gradient(135deg,#fffffffa,#f5f0fff5)}.contraction-card{background:linear-gradient(135deg,#fffffffa,#ecf8fff2)}.contraction-table{display:grid;gap:1px;margin-top:1rem;overflow:hidden;border:1px solid rgba(31,41,55,.12);border-radius:18px;background:#1f29371f}.contraction-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;align-items:center;padding:.8rem;background:#fff;color:var(--casual-muted);font-weight:750}.contraction-row strong{color:var(--casual-hot);font-size:1.1rem}.contraction-row.head{background:#211735;color:#fff8f2;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase}.contraction-row.head strong{color:#fff8f2}.response-grid,.masculine-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.response-grid>section{background:#24a6cd0f;border-color:#24a6cd29}.response-grid h3{color:var(--casual-hot);font-size:1.35rem}.story-card{background:linear-gradient(135deg,#fffffffa,#fff7edf0)}.story-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.65rem;margin-top:1rem}.story-steps div{display:flex;gap:.55rem;min-width:0;padding:.75rem;border-radius:14px;background:#0f172a0a;color:var(--casual-muted);line-height:1.55}.story-steps b,.practice-grid>section>span{display:grid;place-items:center;flex:0 0 1.65rem;width:1.65rem;height:1.65rem;border-radius:999px;background:var(--casual-hot);color:#fff;font-size:.82rem}.masculine-card{background:linear-gradient(135deg,#fffffffa,#eef7fff5)}.masculine-grid>section{background:#24a6cd0f;border-color:#24a6cd29}.practice-card{background:linear-gradient(135deg,#fffffffa,#f5f0fff5)}.practice-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.practice-grid>section{background:#e613810b;border-color:#e6138124}.pattern-lines,.feature-lines{display:grid;gap:.5rem;margin:.8rem 0 0;padding:0;list-style:none}.pattern-lines li,.feature-lines li{display:block;padding:.45rem .6rem;border-left:3px solid var(--casual-hot);border-radius:0 10px 10px 0;background:#e6138112;color:var(--casual-ink);font-weight:750;line-height:1.5}.practice-grid h3{color:var(--casual-hot);margin-top:.7rem}.practice-grid p{margin-bottom:0;font-size:.94rem}.source-card{background:linear-gradient(135deg,#fffffffa,#ecf8fff2)}.source-list{display:grid;gap:.55rem;margin:1rem 0 0;padding-left:1.2rem}.source-list a{color:#7c3aed;font-weight:800;text-decoration-thickness:2px;text-underline-offset:.15em}.casual-card span[lang=ja],.casual-card strong[lang=ja]{font-weight:900}@media (max-width:820px){main.casual-page{grid-template-columns:1fr;width:min(100% - 1rem,760px)}.casual-toc{top:64px;z-index:35;display:flex;overflow-x:auto;border-radius:16px}.casual-toc a{flex:0 0 auto;white-space:nowrap}}@media (max-width:620px){main.casual-page{width:100%;padding-top:0}.casual-card{border-radius:0;border-left:0;border-right:0}.casual-toc{top:58px;border-radius:0}.context-grid,.contrast-grid,.drop-grid,.response-grid,.masculine-grid,.practice-grid,.story-steps{grid-template-columns:1fr}.drop-grid>section:first-child{grid-column:auto}.casual-card p{font-size:1rem}.contraction-row{grid-template-columns:1.1fr 1.1fr .8fr;padding:.7rem;font-size:.9rem}}