@layer defaults,components,themes,decorations;@layer components{:root[data-scheme=dark]:has(.landing,.blog-page){color-scheme:dark}.landing,.blog-page{min-height:100dvh;background-color:var(--background);background-image:var(--background-pattern);color:var(--text);font:var(--size-large) / 1.6 var(--font-ui);overflow-x:clip}.landing h1,.landing h2,.landing h3,.blog-page h1,.blog-page h2,.blog-page h3{font-family:var(--font-heading);font-weight:var(--heading-weight)}.landing-top{padding-inline:16px}.landing-tagline{font-size:var(--size-small);font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.8}.landing-signin{display:flex;align-items:center}.landing main{max-width:1120px;margin:0 auto;padding:0 32px}.landing-cta{padding:12px 28px;font-size:var(--size-large);text-decoration:none}.landing-note{margin:10px 0 0;font-size:var(--size-small)}.landing-heading{width:fit-content;margin-bottom:8px}.landing-hero{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center;padding:56px 0 40px}.landing h1{font-size:44px;line-height:1.25;margin:0 0 18px}.landing-label{display:block;width:fit-content;margin-top:4px;color:var(--primary)}.landing-lead{color:var(--text-muted);margin:0 0 24px;max-width:34em}.landing-shot{position:relative}.landing-tape,.landing-burst{display:none}.landing-screen{display:grid;grid-template-columns:1fr 250px;gap:14px;align-items:start;padding:14px;border-radius:var(--corner-large);background-color:var(--background);background-image:var(--background-pattern);box-shadow:var(--card-shadow)}.landing-page{height:300px;margin:0;padding:16px 18px;writing-mode:vertical-rl;border-radius:var(--corner);background:var(--book-page-fill);color:var(--text);font:18px/2 "Noto Serif JP",Hiragino Mincho ProN,serif}.landing-sentence{background:color-mix(in srgb,var(--primary) 10%,transparent)}.landing-word{cursor:pointer}.landing-word:focus-visible{outline:2px solid var(--primary)}@media (hover: hover){.landing-word:hover{background:color-mix(in srgb,var(--word-highlight) 50%,transparent)}}.landing-word[aria-pressed=true]{background:var(--word-highlight)}.landing-popup{padding:12px 14px;font-size:var(--size-body)}.landing-headword{font-size:28px}.landing-meaning{margin:4px 0 8px}.landing-popup mark{background:var(--word-highlight);color:inherit}.landing-form{margin:0 0 8px;font-size:var(--size-small)}.landing-explained{border-top:1px dashed var(--line);padding-top:8px}.landing-explained p{margin:0 0 6px}.landing-explained ul{margin:0 0 6px;padding-left:18px}.landing-explained a{color:var(--primary);font-weight:700}.landing-tabs{margin:-4px 0 8px}.landing-tabs .ui-tab{flex:1;padding:8px 2px;font-size:var(--size-small);text-transform:none}.landing-tab{max-height:190px;overflow-y:auto}.landing-hint{margin:10px 0 0;font-size:var(--size-small);text-align:center}.landing-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;padding:24px 0 48px}.landing-step{position:relative;padding:26px 22px 20px}.landing-step-n{position:absolute;top:-16px;left:18px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--main-action);color:var(--on-main-action);font:20px var(--font-heading);border:var(--button-border);box-shadow:var(--button-shadow)}.landing-step h2{margin:4px 0 6px;font-size:var(--size-title-small)}.landing-step p{margin:0}.landing-feature{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:40px 0}.landing-feature>:first-child{order:2}.landing-feature ul{padding-left:20px}.landing-review{width:min(340px,100%);justify-self:center}.landing-card{padding:12px 16px 16px;text-align:center}.landing-card-word{padding-top:8px;font-size:52px;line-height:1.3}.landing-card-word rt{font-size:16px}.landing-card-answer{color:var(--answer);font-size:22px;font-weight:600}.landing-card-sentence{margin:10px 0 0;padding-top:8px;border-top:1px solid var(--line);text-align:left;font:15px/1.8 "Noto Serif JP",Hiragino Mincho ProN,serif}.landing-card-sentence mark{background:color-mix(in srgb,var(--primary) 18%,transparent);color:inherit}.landing-grades{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:12px}.landing-grades .ui-grade{cursor:default;font-size:var(--size-body);padding:6px 0 4px}.landing-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 36px;margin:24px 0 40px;padding:32px 36px;border:2px dotted var(--line);border-radius:var(--corner-large);background:var(--panel)}.landing-tile{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:start}.landing-tile-icon{padding-top:2px}.landing-tile-icon .ui-icon{width:28px;height:28px}.landing .landing-tile h2{margin:0 0 4px;font:800 var(--size-large) / 1.4 var(--font-ui)}.landing-tile p{margin:0;font-size:var(--size-body)}.landing-looks{padding:32px 0}.landing-looks>p{margin:0 0 24px}.landing-shots{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}.landing-shots figure{margin:0}.landing-shots img{display:block;width:100%;height:auto;border-radius:var(--corner-large);box-shadow:var(--card-shadow)}.landing-shots figcaption{margin-top:10px;font-size:var(--size-body);text-align:center}.landing-shelf{padding:32px 0}.landing-shelf>p{margin:0 0 24px}.landing-books{display:grid;grid-template-columns:repeat(auto-fill,150px);gap:28px 40px}.landing-book{display:flex;flex-direction:column;gap:2px;color:inherit;text-decoration:none}.landing-book>:first-child{margin-bottom:10px}.landing-book span{font-size:var(--size-body)}.landing-end{margin:40px -32px 32px;padding:56px 32px;text-align:center;background:var(--candy-stripes, var(--panel-alt))}.landing-end-box{display:inline-block;padding:28px 36px}.landing-end-title{margin:0 0 18px;font-size:var(--size-title)}.landing-foot{padding:14px 32px;border-top:1px solid var(--line);font-size:var(--size-small);color:var(--text-muted)}@media (max-width: 800px){.landing-tagline{display:none}.landing main{padding:0 18px}.landing h1{font-size:30px}.landing-hero,.landing-feature{grid-template-columns:1fr;gap:28px}.landing-hero{padding:28px 0 24px}.landing-hero .landing-cta{display:flex}.landing-screen{grid-template-columns:1fr}.landing-page{height:230px;font-size:16px}.landing-tab{max-height:none}.landing-steps{grid-template-columns:1fr;gap:30px}.landing-feature>:first-child{order:0}.landing-tiles{grid-template-columns:1fr;gap:22px;padding:24px 18px}.landing-shots{grid-template-columns:1fr 1fr;gap:22px}.landing-books{grid-template-columns:repeat(2,minmax(0,150px));gap:22px 28px}.landing-end{margin:32px -18px;padding:40px 18px}.landing-end-box{padding:22px 18px}}}@layer decorations{[data-theme=moebius] .landing-tagline{padding:8px 12px;background:var(--panel-fill);color:var(--text);opacity:1}[data-theme=heisei] .landing-label{padding:0 10px;background:#b6e03a;color:#18181c;rotate:-1.5deg}[data-theme=heisei] .landing-shot{rotate:1.5deg}@media (max-width: 800px){[data-theme=heisei] .landing-shot{rotate:none}}[data-theme=heisei] .landing-screen{border:6px solid var(--sticker-edge);box-shadow:0 0 0 2px var(--sticker-shadow),8px 8px 0 2px var(--sticker-shadow)}[data-theme=heisei] .landing-tape{display:block;position:absolute;z-index:2;top:-16px;left:40%;width:110px;height:28px;rotate:-6deg;background:repeating-linear-gradient(90deg,#fffa 0,#fffa 6px,#ffe03aaa 6px,#ffe03aaa 12px);box-shadow:0 1px 2px #0002}[data-theme=heisei] .landing-burst{display:grid;position:absolute;z-index:3;right:-24px;bottom:-58px;width:108px;height:108px;place-items:center;text-align:center;rotate:12deg;background:#ff4fa0;color:#18181c;font:800 14px / 1.15 var(--font-ui);clip-path:polygon(50% 0,61% 18%,82% 9%,80% 31%,100% 38%,86% 55%,98% 74%,76% 77%,72% 99%,54% 86%,36% 100%,30% 79%,8% 80%,15% 60%,0 44%,18% 33%,13% 12%,35% 18%)}[data-theme=heisei] .landing-burst b{display:block;font:20px var(--font-heading)}[data-theme=heisei] .landing-hint{rotate:-1.5deg}[data-theme=heisei] :is(.landing-step,.landing-end-box){border:3px solid var(--sticker-edge);box-shadow:4px 4px 0 var(--sticker-shadow)}[data-theme=heisei] .landing-step:nth-child(1){rotate:-1.5deg}[data-theme=heisei] .landing-step:nth-child(2){rotate:1deg}[data-theme=heisei] .landing-step:nth-child(3){rotate:-.5deg}[data-theme=heisei] .landing-end-box{rotate:-1deg}[data-theme=heisei] .landing-step:nth-child(1) .landing-step-n{background:#ff4fa0}[data-theme=heisei] .landing-step:nth-child(3) .landing-step-n{background:#29c4e6}[data-theme=heisei] .landing-review{rotate:-1.5deg}[data-theme=heisei] .landing-book>:first-child{border:5px solid var(--sticker-edge);box-shadow:0 0 0 2px var(--sticker-shadow),5px 5px 0 2px var(--sticker-shadow)}[data-theme=heisei] .landing-book:nth-child(odd)>:first-child{rotate:-1.5deg}[data-theme=heisei] .landing-book:nth-child(2n)>:first-child{rotate:1.5deg}[data-theme=heisei] .landing-tiles{border:4px dotted #ff4fa0}[data-theme=heisei] .landing-shots img{border:5px solid var(--sticker-edge);border-radius:4px;box-shadow:0 0 0 2px var(--sticker-shadow),6px 6px 0 2px var(--sticker-shadow)}[data-theme=heisei] .landing-shots figure:nth-child(odd){rotate:-1.5deg}[data-theme=heisei] .landing-shots figure:nth-child(2n){rotate:1.5deg}[data-theme=heisei] .landing-foot{border-top:2px solid var(--sticker-shadow);background:var(--panel)}@media (max-width: 800px){[data-theme=heisei] .landing-burst{right:6px;bottom:auto;top:-64px;width:76px;height:76px;font-size:10px}[data-theme=heisei] .landing-burst b{font-size:16px}}}
