*{box-sizing:border-box}html{color-scheme:light}body{margin:0;min-height:100vh;color:var(--tl-ink);font:var(--tl-text-body)/1.6 var(--tl-font-ui);background:linear-gradient(100deg,rgba(247,244,235,.72),rgba(247,244,235,.92)),url('/assets/learner-design/wave-sakura.png') left top/cover fixed no-repeat}.skip{position:fixed;left:12px;top:-80px;z-index:10;padding:10px 14px;border-radius:var(--tl-radius-control);background:var(--tl-ink);color:#fff;text-decoration:none}.skip:focus{top:12px}.trial-header{width:min(1120px,calc(100% - 32px));min-height:64px;margin:16px auto 0;padding:9px 14px;display:flex;align-items:center;justify-content:space-between;gap:14px;border:1px solid var(--tl-glass-border);border-radius:18px;background:var(--tl-glass);box-shadow:0 12px 34px rgba(23,40,51,.08);backdrop-filter:blur(var(--tl-blur))}.brand{min-height:var(--tl-control-min);display:inline-flex;align-items:center;gap:10px;color:var(--tl-ink);font-weight:800;font-size:22px;text-decoration:none}.brand span{display:grid;place-items:center;width:38px;height:40px;border-radius:3px;background:var(--tl-seal);color:#fff9ed;font:19px var(--tl-font-shodo)}button,a.button-link{min-height:var(--tl-control-min);font:700 15px var(--tl-font-ui)}button{padding:9px 14px;border:1px solid var(--tl-hair);border-radius:var(--tl-radius-control);background:var(--tl-glass-strong);color:var(--tl-ink);cursor:pointer}button:disabled{cursor:wait;opacity:.65}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--tl-focus);outline-offset:3px}.trial-surface{width:min(1080px,calc(100% - 32px));margin:22px auto 50px;padding:clamp(24px,4vw,48px);border:1px solid var(--tl-glass-border);border-radius:var(--tl-radius-surface);background:linear-gradient(145deg,var(--tl-glass-strong),var(--tl-paper));box-shadow:var(--tl-shadow);backdrop-filter:blur(var(--tl-blur));overflow:hidden}.trial-stage{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(340px,.96fr);grid-template-areas:'visual copy' 'visual state';column-gap:clamp(28px,5vw,62px);row-gap:0;align-items:start}.trial-visual{grid-area:visual;align-self:start;position:relative;min-width:0;margin:0;border:1px solid color-mix(in srgb,var(--tl-seal) 18%,var(--tl-hair));border-radius:var(--tl-radius-panel);background:radial-gradient(circle at 25% 20%,color-mix(in srgb,var(--tl-seal) 10%,transparent),transparent 40%),var(--tl-paper-soft);overflow:hidden}.trial-visual img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain}.trial-visual figcaption{position:absolute;left:10px;bottom:10px;padding:6px 9px;border:1px solid var(--tl-glass-border);border-radius:9px;background:color-mix(in srgb,var(--tl-paper) 88%,transparent);color:var(--tl-ink-soft);font-size:12px;font-weight:700;backdrop-filter:blur(10px)}.trial-copy{grid-area:copy;min-width:0}.eyebrow{margin:0;color:var(--tl-sepia);font:800 var(--tl-text-meta)/1.4 var(--tl-font-mono);letter-spacing:.15em}.trial-copy h1{max-width:12ch;margin:7px 0 12px;font:600 clamp(38px,5vw,62px)/1.08 var(--tl-font-jp);letter-spacing:-.04em}.lede{max-width:48ch;margin:0;color:var(--tl-ink-soft);font-size:17px}.trial-state{grid-area:state;margin-top:22px;padding-top:20px;border-top:1px solid var(--tl-hair)}.trial-state h2{margin:0 0 8px;font:600 clamp(24px,3vw,32px)/1.25 var(--tl-font-jp)}.trial-state p{margin:7px 0;color:var(--tl-ink-soft)}.trial-state .strong{color:var(--tl-ink);font-weight:750}.button-link{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border:1px solid var(--tl-hair);border-radius:var(--tl-radius-control);color:var(--tl-ink);text-decoration:none}.primary{min-height:50px;background:var(--tl-ink);border-color:var(--tl-ink);color:#fffdf5;box-shadow:0 6px 16px rgba(23,40,51,.16)}.primary:hover{background:var(--tl-seal);border-color:var(--tl-seal);color:#fffdf5}.state-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}.state-actions>*{flex:1 1 180px}.feature-list{margin:14px 0 0;padding:0;list-style:none;border-block:1px solid var(--tl-hair)}.feature-row{padding:12px 0;border-bottom:1px solid var(--tl-hair)}.feature-row:last-child{border-bottom:0}.feature-head{display:flex;justify-content:space-between;gap:14px;align-items:baseline}.feature-head strong{font-size:16px}.feature-head span{color:var(--tl-seal);font-weight:800;text-align:right}.feature-detail{font-size:13px}.held{padding-left:10px;border-left:3px solid var(--tl-sepia);color:var(--tl-ink)!important}.feature-link{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;color:var(--tl-ink);font-weight:750;text-underline-offset:5px}.status-line{padding:9px 0;border-block:1px solid var(--tl-hair);font-variant-numeric:tabular-nums}.error-line{padding:10px 12px;border-left:3px solid var(--tl-danger);background:color-mix(in srgb,var(--tl-danger) 8%,transparent);color:var(--tl-ink)!important}.quiet{font-size:13px}.loading{min-height:50px;display:flex;align-items:center}.trial-surface footer{margin-top:34px;padding-top:18px;border-top:1px solid var(--tl-hair);color:var(--tl-ink-soft);font-size:13px}.trial-surface footer span{margin-right:9px;color:var(--tl-sepia);font:22px var(--tl-font-jp)}dialog{width:min(560px,calc(100% - 32px));padding:24px;border:1px solid var(--tl-glass-border);border-radius:var(--tl-radius-panel);background:var(--tl-paper);color:var(--tl-ink);box-shadow:var(--tl-shadow)}dialog::backdrop{background:rgba(5,18,30,.62)}dialog header{display:flex;align-items:center;justify-content:space-between;gap:12px}dialog h2{margin:0}dialog fieldset{display:flex;gap:8px;margin:18px 0;padding:0;border:0}dialog legend{margin-bottom:8px;font-weight:700}dialog summary{min-height:44px;display:flex;align-items:center;font-weight:700;cursor:pointer}html[data-mode=dark]{color-scheme:dark}html[data-mode=dark] body{background:linear-gradient(100deg,rgba(5,18,30,.82),rgba(5,18,30,.94)),url('/assets/learner-design/wave-sakura.png') left top/cover fixed no-repeat}html[data-mode=dark] .primary{background:var(--tl-seal);border-color:var(--tl-seal);color:#172833}html[data-mode=dark] .primary:hover{background:color-mix(in srgb,var(--tl-seal) 88%,white);color:#172833}html[data-mode=dark] .trial-visual figcaption{background:color-mix(in srgb,var(--tl-paper) 88%,transparent)}@media(max-width:720px){body{background-position:28% top}.trial-header{width:calc(100% - 20px);margin-top:10px}.brand{font-size:19px}.trial-surface{width:calc(100% - 20px);margin:12px auto 30px;padding:20px 18px}.trial-stage{grid-template-columns:1fr;grid-template-areas:'copy' 'visual' 'state';gap:14px}.trial-copy h1{font-size:39px;max-width:11ch}.lede{font-size:15px}.trial-state{margin-top:0;padding-top:15px}.trial-visual{align-self:auto}.trial-visual img{height:150px;aspect-ratio:auto}.trial-visual figcaption{left:7px;bottom:7px;max-width:calc(100% - 14px);padding:5px 7px;font-size:10px}.feature-row{padding:10px 0}.feature-head{align-items:flex-start}.state-actions{display:grid}.state-actions>*{width:100%}.trial-surface footer{margin-top:22px}}
@media(prefers-reduced-transparency:reduce){.trial-header,.trial-surface{backdrop-filter:none;background:var(--tl-paper)}.trial-visual figcaption{backdrop-filter:none;background:var(--tl-paper)}}
.offer-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:22px}.offer-list .feature-head{display:block}.offer-list .feature-head span{display:block;margin-top:2px;text-align:left}@media(max-width:720px){.offer-list{column-gap:14px}.offer-list .feature-head strong{font-size:14px}.offer-list .feature-detail{font-size:12px;line-height:1.45}}
.trial-state:focus{outline:none}
.quota-strip{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0}.quota-chip{display:inline-flex;align-items:center;min-height:30px;padding:4px 9px;border:1px solid var(--tl-hair);border-radius:999px;background:var(--tl-wash);color:var(--tl-ink);font-size:13px;font-weight:800}.trial-details{margin-top:10px;border-top:1px solid var(--tl-hair)}.trial-details summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:750}.trial-details .feature-list{margin-top:0}.learning-actions{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}.learning-actions .feature-link{min-height:44px;margin:0;padding:7px 11px;border:1px solid var(--tl-hair);border-radius:var(--tl-radius-control);text-decoration:none}.state-actions.compact{margin-top:8px}.state-actions.compact>*{flex:0 1 auto}@media(max-width:720px){.quota-strip{gap:6px}.quota-chip{font-size:12px}.learning-actions{display:grid}.learning-actions .feature-link{width:100%}.state-actions.compact{display:block}.state-actions.compact>*{width:auto}}
.review-actions{margin:10px 0;padding:10px 0;border-block:1px solid var(--tl-hair)}.review-heading{margin:0 0 6px!important;color:var(--tl-ink)!important;font-weight:800}.review-actions .feature-link{min-height:44px;margin:0 12px 0 0}@media(max-width:720px){.review-actions .feature-link{display:flex;width:100%;margin:0;border-bottom:1px solid var(--tl-hair)}}

.trial-entry{grid-area:state;min-width:0}.free-samples{display:grid;margin:12px 0 20px}.free-samples .feature-link{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:16px 0;border:0;border-bottom:1px solid var(--tl-hair);border-radius:0;text-decoration:none;color:var(--tl-ink)}.free-samples [lang=ja]{font:28px var(--tl-font-jp);color:var(--tl-seal)}.free-samples strong{font-size:17px}.free-samples a>span:last-child{font-size:14px}.trial-entry .trial-details{margin-top:18px}
