/* Content inside the host WINDOW. Frame and placement belong to style.css. */
.app-window .window-body { --window-ink:#1e2a44; --window-muted:#536078; --window-lamp:#e8a33c; --carousel-cycle:560px; min-width:0; color:var(--window-ink); }
.app-window .window-body button { font-family:inherit; -webkit-tap-highlight-color:transparent; }
.app-window .window-body button:focus-visible { outline:2px solid var(--window-ink); outline-offset:2px; }
.app-window .window-carousel { overflow:hidden; margin:-6px; padding:6px; }
.app-window .carousel-track { display:flex; width:max-content; transform:translateX(calc(-1 * var(--carousel-cycle))); will-change:transform; }
.app-window .carousel-group { box-sizing:border-box; display:flex; width:var(--carousel-cycle); flex:0 0 var(--carousel-cycle); gap:10px; padding-right:10px; }
.app-window .product-card {
  box-sizing:border-box; position:relative; display:flex; width:calc((var(--carousel-cycle) - 40px) / 4); min-width:0; min-height:190px; flex:0 0 calc((var(--carousel-cycle) - 40px) / 4); flex-direction:column; align-items:flex-start; padding:17px 13px 21px;
  border:1px solid rgba(255,255,255,.68); border-radius:12px; background:linear-gradient(145deg,rgba(255,255,255,.42),rgba(255,255,255,.12) 56%,rgba(246,230,196,.18)); box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -1px 0 rgba(30,42,68,.025),0 3px 8px rgba(30,42,68,.025); color:var(--window-ink); text-align:left; transition:border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
.app-window .product-japanese { cursor:pointer; }
.app-window .product-next { cursor:default; }
.app-window .product-icon { display:grid; width:57px; height:57px; flex-shrink:0; margin-bottom:15px; place-items:center; border:1px solid rgba(255,255,255,.65); border-radius:13px; background:linear-gradient(145deg,rgba(250,242,222,.9),rgba(246,230,196,.68)); box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 4px 9px rgba(142,108,51,.06); color:var(--window-ink); }
.app-window .product-next .product-icon { background:linear-gradient(145deg,rgba(255,255,255,.43),rgba(255,255,255,.12)); box-shadow:inset 0 1px 0 rgba(255,255,255,.6); color:#758092; }
.app-window .tool-icon { display:block; width:100%; height:100%; }
.app-window .product-copy { display:block; min-width:0; }
.app-window .product-title { display:block; font-size:14px; font-weight:600; line-height:1.35; letter-spacing:-.025em; }
.app-window .product-summary { display:block; margin-top:7px; color:var(--window-muted); font-size:11px; font-weight:400; line-height:1.65; letter-spacing:-.005em; }
.app-window .product-next .product-title { color:#637087; }
.app-window .product-next .product-summary { color:#69768a; }
.app-window .product-open { position:absolute; right:11px; top:12px; color:var(--window-muted); font-size:14px; }
.app-window .product-card[aria-expanded="true"],.app-window.has-selection .product-japanese { border-color:rgba(232,163,60,.7); background:linear-gradient(145deg,rgba(255,255,255,.7),rgba(246,230,196,.42)); box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 1px rgba(232,163,60,.1); }
@media(hover:hover) {
  .app-window .product-japanese:hover { border-color:rgba(255,255,255,.95); background:linear-gradient(145deg,rgba(255,255,255,.7),rgba(246,230,196,.37)); box-shadow:inset 0 1px 0 #fff,0 3px 12px rgba(30,42,68,.055); }
  .app-window .preview-control:hover,.app-window .detail-close:hover { background:rgba(255,255,255,.8); }
}
.app-window.has-selection .product-card { min-height:64px; flex-direction:row; align-items:center; gap:8px; padding:8px; border-radius:8px; }
.app-window.has-selection .product-icon { width:31px; height:31px; margin:0; border-radius:8px; }
.app-window.has-selection .product-title { font-size:10px; font-weight:500; line-height:1.4; }
.app-window.has-selection .product-summary,.app-window.has-selection .product-open { display:none; }
.app-window .product-detail { display:grid; grid-template-columns:.85fr 1.2fr; gap:10px 15px; margin-top:18px; animation:window-detail-in .28s ease both; }
.app-window .product-detail[hidden] { display:none; }
.app-window .detail-top { grid-column:1; grid-row:1; display:flex; align-items:flex-start; justify-content:space-between; gap:7px; }
.app-window .detail-title { margin:7px 0 0; color:var(--window-ink); font-size:20px; font-weight:600; line-height:1.2; letter-spacing:-.035em; }
.app-window .detail-title:focus { outline:none; }
.app-window .detail-close { display:grid; width:48px; height:48px; flex-shrink:0; place-items:center; padding:0; border:1px solid rgba(255,255,255,.7); border-radius:8px; background:rgba(255,255,255,.2); color:var(--window-ink); cursor:pointer; }
.app-window .detail-close svg { width:18px; height:18px; }
.app-window .detail-description { grid-column:1; grid-row:2; margin:0; color:var(--window-muted); font-size:12px; line-height:1.65; letter-spacing:-.01em; }
.app-window .concept-preview { grid-column:2; grid-row:1 / span 2; overflow:hidden; padding:13px 11px 0; border:1px solid rgba(255,255,255,.7); border-radius:10px; background:linear-gradient(135deg,rgba(255,255,255,.46),rgba(246,230,196,.25)); color:var(--window-ink); box-shadow:inset 0 1px 0 rgba(255,255,255,.6); }
.app-window .kana-tiles { display:flex; justify-content:center; gap:8px; padding-bottom:7px; }
.app-window .kana-tile { box-sizing:border-box; display:flex; width:59px; height:71px; flex-direction:column; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.95); border-radius:8px; background:linear-gradient(150deg,rgba(255,255,255,.85),rgba(255,255,255,.43)); box-shadow:0 2px 0 rgba(30,42,68,.06); }
.app-window .kana-tile > span { font-family:'Noto Sans JP','Yu Gothic','Hiragino Kaku Gothic ProN',sans-serif; font-size:31px; font-weight:500; line-height:1.3; }
.app-window .kana-tile > small { margin-top:2px; color:var(--window-muted); font-size:10px; font-weight:400; }
.app-window .is-arranging .kana-tile { animation:kana-arrange .6s cubic-bezier(.22,1,.36,1) calc(var(--tile) * .07s) both; }
.app-window .preview-bottom { display:flex; min-height:48px; align-items:center; justify-content:space-between; gap:6px; }
.app-window .preview-caption { flex-shrink:0; color:var(--window-muted); font-size:9px; font-variant-numeric:tabular-nums; letter-spacing:.025em; }
.app-window .preview-caption > span { padding:0 3px; opacity:.5; }
.app-window .preview-control { display:inline-flex; min-height:48px; align-items:center; justify-content:center; gap:6px; padding:0 4px; border:0; border-radius:8px; background:transparent; color:var(--window-ink); font-size:10px; font-weight:600; cursor:pointer; }
.app-window .preview-control > span { color:#a96f20; font-size:16px; }
.app-window .detail-note { grid-column:1 / -1; margin:1px 0 0; color:var(--window-muted); font-size:10px; line-height:1.5; }
.app-window .window-sr-only { position:absolute; width:1px; height:1px; overflow:hidden; margin:-1px; padding:0; border:0; clip-path:inset(50%); white-space:nowrap; }
@keyframes window-detail-in { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }
@keyframes kana-arrange { from { opacity:.35; transform:translateY(7px) rotate(calc((var(--tile) - 1) * 5deg)); } to { opacity:1; transform:translateY(0) rotate(0); } }
@media(max-width:600px) {
  .app-window .product-card { min-height:183px; }
  .app-window .product-detail { grid-template-columns:1fr; gap:10px; margin-top:15px; }
  .app-window .detail-top { grid-column:1; grid-row:1; align-items:center; }
  .app-window .detail-title { margin:0; font-size:22px; }
  .app-window .detail-description { grid-column:1; grid-row:2; font-size:12px; }
  .app-window .detail-description br { display:none; }
  .app-window .concept-preview { grid-column:1; grid-row:3; padding:14px 12px 0; }
  .app-window .kana-tiles { gap:13px; }
  .app-window .kana-tile { width:67px; height:77px; }
  .app-window .kana-tile > span { font-size:35px; }
  .app-window .preview-caption { font-size:10px; }
  .app-window .preview-control { font-size:11px; }
  .app-window .detail-note { grid-column:1; grid-row:4; }
}
@media(prefers-reduced-motion:reduce) {
  .app-window .window-body *,.app-window .window-body *::before,.app-window .window-body *::after { animation:none !important; transition:none !important; }
  .app-window .carousel-track { will-change:auto; }
}
.app-window .window-body.motion-is-paused *,html[data-motion="paused"] .app-window .window-body * { animation:none !important; transition:none !important; }