/* Homepage-only showcase and workflow presentation. */
.home-showcase-section { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:clamp(36px,7vw,96px); padding:90px 0; border-bottom:1px solid var(--line); overflow-wrap:anywhere; scroll-margin-top:30px; }
.home-showcase-copy { min-width:0; }.home-showcase-copy h2 { margin:22px 0; font-family:var(--font-display); font-size:clamp(2.5rem,4.6vw,4.4rem); line-height:1.05; font-weight:400; letter-spacing:-.045em; text-wrap:balance; max-width:13ch; }
.home-showcase-copy > p:last-of-type { max-width:32rem; color:var(--text-secondary); font-size:1.08rem; line-height:1.75; }.home-showcase-copy .text-button { margin-top:26px; gap:28px; }
.automation-section .home-showcase-copy { grid-column:2; grid-row:1; }.automation-section .automation-demo { grid-column:1; grid-row:1; }
.app-showcase { min-width:0; }.showcase-canvas { display:grid; isolation:isolate; border:1px solid var(--line); border-radius:22px; overflow:hidden; }
.demo-slide { grid-area:1 / 1; min-width:0; opacity:0; visibility:hidden; pointer-events:none; transition:opacity 220ms ease,visibility 220ms; display:grid; }.demo-slide.is-active { opacity:1; visibility:visible; }.demo-slide p { margin:0; }
.showcase-pagination { display:flex; justify-content:center; align-items:center; gap:12px; padding-top:12px; }.showcase-pagination[hidden] { display:none; }.showcase-dots { display:flex; align-items:center; }
.showcase-dot,.showcase-pause { width:44px; min-width:44px; min-height:44px; border:0; background:transparent; color:var(--text-secondary); display:grid; place-items:center; padding:0; cursor:pointer; border-radius:999px; }
.showcase-dot span { width:7px; height:7px; border-radius:999px; background:currentColor; opacity:.32; transition:width 220ms,opacity 220ms; }.showcase-dot[aria-current] span { width:27px; opacity:1; color:var(--text-primary); }
.showcase-pause:hover { background:var(--surface-muted); }.showcase-pause:disabled { opacity:.4; cursor:default; }.showcase-pause.is-paused svg { display:none; }.showcase-pause.is-paused::after { content:""; width:0; height:0; border-top:6px solid transparent; border-bottom:6px solid transparent; border-left:9px solid currentColor; margin-left:2px; }
.showcase-dot:focus-visible,.showcase-pause:focus-visible { outline:2px solid var(--text-primary); outline-offset:2px; }
.demo-stage { position: relative; min-height: 420px; display: grid; grid-template-columns: minmax(0,1fr); place-items: center; padding: 32px 24px; }
.demo-stage > * { min-width: 0; max-width: 100%; }
.pino-stage { background: #f1efe6; display: flex; flex-direction: column; padding: 34px 32px 32px; --pino-ink: #292923; --pino-blue: #007aff; }
.pino-page, .pino-page-back { position: absolute; left: 32px; right: 32px; top: 34px; height: 288px; border: 1px solid #d7d6ce; border-radius: 12px; background: #fffefb; }
.pino-page-back { top: 43px; left: 44px; right: 44px; height: calc(100% - 180px); transform: rotate(-5deg); opacity: .7; }
.pino-page { position: relative; inset: auto; width: 100%; min-height: 288px; height: auto; padding: 28px 26px 90px; }
.pino-chapter { font-size: .6rem; color: #60605a; letter-spacing: .18em; margin-bottom: 22px!important; }
.pino-passage { font-family: Georgia,serif; font-size: 1.15rem; line-height: 1.85; color: var(--pino-ink); }
.pino-word { position: relative; display: inline; padding: 4px 0; margin: -4px 0; min-height: 44px; border: 0; border-radius: 2px; color: inherit; font: inherit!important; background: #dbeeff; }
.selection-handle { position: absolute; width: 2px; top: 3px; bottom: 3px; background: var(--pino-blue); }
.selection-handle.left { left: -2px; }.selection-handle.right { right: -2px; }
.selection-handle::before { content: ""; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--pino-blue); left: -2.5px; }
.selection-handle.left::before { top: -5px; }.selection-handle.right::before { bottom: -5px; }
.pino-dictionary { position: relative; z-index: 2; align-self: flex-end; width: calc(100% - 16px); inset: auto; margin-top: -80px; margin-right: -8px; background: #fff; border: 1px solid #dadad8; border-radius: 14px; box-shadow: 0 18px 35px #272d241c; color: #292923; transition: opacity 200ms, transform 200ms; }
.dictionary-heading { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #e3e3de; padding-left: 18px; font-size: .7rem; font-weight: 500; }
.dictionary-dismiss { border: 0; background: transparent; color: #555; width: 44px; height: 44px; font-size: 1.4rem; }
.dictionary-body { padding: 14px 18px 20px; }
.dictionary-language { color: #696962; font-size: .65rem; margin-bottom: 8px!important; }.dictionary-word { font: 1.6rem Georgia,serif; }
.dictionary-part { color: #696962; font-size: .68rem; margin-top: 5px!important; }.dictionary-meaning { font-size: 1rem; margin-top: 12px!important; }
.demo-pino[data-ready][data-phase="reading"] .pino-word, .demo-pino[data-ready][data-phase="touch"] .pino-word { background: transparent; }
.demo-pino[data-ready][data-phase="reading"] .selection-handle, .demo-pino[data-ready][data-phase="touch"] .selection-handle { opacity: 0; }
.demo-pino[data-ready]:not([data-phase="definition"]) .pino-dictionary { opacity: 0; transform: translateY(16px); pointer-events: none; }
.pino-touch { display: none; }
.demo-pino[data-phase="touch"] .pino-touch { display: block; position: absolute; width: 36px; height: 36px; border-radius: 50%; background: #007aff29; top: 160px; left: 46%; pointer-events: none; }
.sharp-stage { min-height: 470px; background: #eaf0f5; }
.sharp-back-card { position: absolute; inset: 45px 48px; transform: rotate(-3deg); background: #dce4e8; border-radius: 16px; }
.sharp-game { position: relative; width: min(100%,374px); background: #fff; color: #101820; border: 1px solid #d6dce2; border-radius: 14px; padding: 24px 18px 10px; transition: opacity 180ms; }
.sharp-prompt { font-size: 1.35rem; line-height: 1.25; font-weight: 800; text-align: center; min-height: 34px; }
.sharp-slots { display: flex; justify-content: center; gap: 10px; margin: 24px 0; }
.sharp-slot { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #babdc4; background: #e1ebfe; border-radius: 50%; font-weight: 700; }
.sharp-slot.active { border: 2px solid #2674f5; }.demo-sharp[data-result="correct"] .sharp-slot { border: 2px solid #278b67; background: #d8ebe3; }
.sharp-keyboard { display: grid; gap: 6px; border-top: 1px solid #d6dce2; padding-top: 14px; }
.sharp-key-row { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 4px; }
.sharp-key { min-width: 0; min-height: 44px; padding: 0; background: #ededf1; color: #101820; border: 1px solid #b5b8c1; border-radius: 7px; font-size: .9rem!important; transition: transform 120ms, background 120ms; }
.sharp-key.pressed { transform: scale(.9); }.sharp-key.selected { border-color: #2674f5; background: #cddfff; }
.sharp-check { width: 100%; min-height: 44px; border: 0; background: #2674f5; color: #fff; border-radius: 24px; margin-top: 20px; font-size: .9rem!important; font-weight: 500; }
.demo-sharp[data-result="correct"] .sharp-check { background: #278b67; }.demo-sharp[data-result="incorrect"] .sharp-check { background: #9a442e; }
.sharp-secondary { display: flex; justify-content: space-between; gap: 8px; }
.sharp-secondary button { background: none; border: 0; color: #526172; min-height: 44px; padding: 8px 0; font-size: .7rem!important; }
.demo-sharp[data-fading="true"] .sharp-game { opacity: .15; }
.compounds-stage { min-height: 470px; background: #edf3f0; --compound-ink: #15171a; --compound-line: #d7e0e7; --compound-outline: #e8f0f6; --compound-green: #0f7a5a; }
.compounds-exercise { width: min(100%,280px); text-align: center; padding: 24px; background: #fff; border: 1px solid var(--compound-line); border-radius: 24px; color: var(--compound-ink); box-shadow: 0 12px 28px #15171a14; }
.compounds-reading { font-size: 1.5rem; font-weight: 600; }.compounds-meaning { font-size: .88rem; color: #5c6670; margin: 4px 0 18px!important; }
.compounds-grid { display: block; width: 100%; aspect-ratio: 1; border: 1px solid var(--compound-line); border-radius: 6px; overflow: hidden; }
.grid-line { fill: none; stroke: var(--compound-line); stroke-dasharray: 4 5; }.stroke-outline { fill: var(--compound-outline); }.stroke-ink { fill: var(--compound-ink); }
.demo-compounds[data-success="true"] .stroke-ink { fill: var(--compound-green); }.stroke-pointer-halo { fill: var(--compound-green); opacity: .12; }.stroke-pointer-dot { fill: var(--compound-green); }
.compounds-phase { font-size: .8rem; min-height: 20px; margin-top: 20px!important; color: #5c6670; }
.demo-pill { min-height: 44px; width: 100%; padding: 8px 16px; border: 1px solid #d7e0e7; border-radius: 999px; background: #f5f8f6; color: #1f5140; font-size: .75rem!important; margin-top: 12px; }
.action-stage { background: #efede6; color: #2d2c25; }
.action-plan { width: 100%; }.action-day { font: 1.6rem Georgia,serif; margin-bottom: 22px!important; }
.action-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 9px; }
.action-slot { position: relative; background: #faf9f3; border: 1px solid #d8d4c6; border-radius: 8px; padding: 10px; min-height: 145px; transition: background 160ms; }
.slot-label { font-size: .6rem; text-transform: uppercase; letter-spacing: .1em; color: #6a675a; margin-bottom: 12px!important; }.slot-empty { display: block; font-size: .75rem; color: #736f60; padding-top: 25px; }.occupied .slot-empty { display: none; }
.action-task { position: relative; min-width: 0; }.action-task-heading { display: flex; gap: 9px; align-items: flex-start; }.task-title { font: 1rem/1.3 Georgia,serif; overflow-wrap: anywhere; padding-top: 6px; }
.task-complete { flex-shrink: 0; width: 44px; height: 44px; border: 0; background: transparent; padding: 10px; color: #fff; }
.task-complete span { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid #a4a390; border-radius: 50%; font-size: .8rem; color: transparent; }
.completed .task-complete span { background: #587654; border-color: #587654; color: #fff; }.completed .task-title { text-decoration: line-through; color: #747465; }
.task-tools { display: flex; gap: 4px; align-items: center; margin-top: 8px; }.task-tools > button { min-width: 44px; min-height: 44px; background: transparent; border: 0; color: #716f61; font-size: 1.3rem; touch-action: none; }
.task-move { min-width: 0; flex: 1; }.task-move select { width: 100%; min-height: 44px; color: #59564b; background: transparent; border: 0; font-size: .65rem; text-overflow: ellipsis; }
.action-task.dragging { z-index: 4; pointer-events: none; background: #fffdf6; box-shadow: 0 4px 15px #26281730; border-radius: 8px; }.action-slot.drop-target { background: #dbe5d7; outline: 2px solid #587654; }
.demo-reset { display: block; margin: 12px 0 -14px auto; }
.time-stage { background: #eeeefa; color: #202024; }
.time-app { width: min(100%,340px); background: #fff; border-radius: 16px; padding: 20px; border: 1px solid #dcdcE7; }
.time-now { font-size: 1.2rem; font-weight: 600; margin-bottom: 24px!important; }.time-current { text-align: center; border: 1px solid #e8e8ee; border-radius: 12px; padding: 20px 12px; background: #f7f7fb; }
.time-active-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #9c9ca5; margin-bottom: 8px; }.demo-timecatcher[data-tracking="true"] .time-active-dot { background: #5f5ff6; }
.time-current-label { font-size: .95rem; font-weight: 500; }.time-clock { font: 2rem/1.4 ui-monospace,monospace; font-variant-numeric: tabular-nums; letter-spacing: -.06em; margin: 4px 0!important; }.time-status { font-size: .65rem; color: #696975; }
.time-activities { display: grid; margin-top: 20px; }.time-activity { display: flex; gap: 12px; align-items: center; width: 100%; min-height: 50px; padding: 7px 8px; border: 0; border-bottom: 1px solid #e8e8ee; background: transparent; text-align: left; color: #202024; font-size: .85rem; }
.time-activity.selected { background: #eeeeff; border-radius: 8px; }.activity-symbol { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: #ececff; color: #5353bb; }.symbol-1 { background: #fff0d8; color: #946518; }.symbol-2 { background: #e3f1e6; color: #356942; }.activity-action { margin-left: auto; color: #5f5ff6; }
.time-bottom { display: flex; justify-content: space-between; margin-top: 12px; }.time-bottom button { min-height: 44px; padding: 8px 12px; background: transparent; border: 0; color: #57577c; font-size: .75rem; }.time-bottom button:disabled { opacity: .5; }
@media (prefers-color-scheme: dark) {
    .pino-stage { background: #252822; --pino-ink: #f3f1e6; --pino-blue: #0a84ff; }.pino-page,.pino-page-back { background: #34372f; border-color: #51554a; }.pino-chapter { color: #b9bdad; }.pino-word { background: #244b69; }
    .pino-dictionary { background: #292c26; color: #f3f1e6; border-color: #51554a; }.dictionary-heading { border-color: #51554a; }.dictionary-dismiss,.dictionary-language,.dictionary-part { color: #b9bdad; }
    .sharp-stage { background: #212e36; }.sharp-back-card { background: #34434a; }
    .compounds-stage { background: #222d29; --compound-ink: #f4f7fa; --compound-line: #354148; --compound-outline: #3d4a52; --compound-green: #45c89a; }.compounds-exercise { background: #1b2226; }.compounds-meaning,.compounds-phase { color: #aeb8c2; }.demo-pill { background: #24362f; border-color: #354148; color: #c2decf; }
    .action-stage { background: #292820; color: #eee9d6; }.action-slot { background: #333228; border-color: #545143; }.slot-label,.slot-empty,.task-tools > button,.task-move select { color: #c0bba6; }.completed .task-title { color: #b8b7a2; }.action-task.dragging { background: #3e4032; }.action-slot.drop-target { background: #3e503a; }
    .time-stage { background: #252530; }.time-app { background: #202027; color: #f1f1fa; border-color: #42424f; }.time-current { background: #292934; border-color: #42424f; }.time-status { color: #b3b3c8; }.time-activity { color: #f1f1fa; border-color: #42424f; }.time-activity.selected { background: #34344c; }.activity-action,.time-bottom button { color: #b7b7fc; }
}
.dictionary-dismiss { display:grid; place-items:center; }.sharp-key { display:grid; place-items:center; }.sharp-check { display:grid; place-items:center; padding:10px 16px; box-sizing:border-box; }.sharp-game { padding-bottom:24px; }
.action-task { display:flex; align-items:flex-start; gap:10px; padding-top:10px; }.task-complete { flex:0 0 24px; width:24px; height:24px; padding:0; border:1px solid #a4a390; border-radius:50%; display:grid; place-items:center; color:transparent; }.completed .task-complete { color:#fff; background:#587654; border-color:#587654; }.action-slot { min-height:132px; }
.time-activity { min-height:54px; }.time-stage { min-height:470px; }
.automation-demo { --flow-bg:#f1f3ef; --flow-card:#fff; --flow-line:#dce2d8; --flow-ink:#29362f; --flow-muted:#657368; --flow-accent:#496951; min-width:0; background:var(--flow-bg); border:1px solid var(--line); border-radius:22px; padding:34px; color:var(--flow-ink); overflow:hidden; }
.automation-demo p { margin:0; }.automation-message { padding:20px; border:1px solid var(--flow-line); border-radius:13px; background:var(--flow-card); transition:opacity 300ms,transform 300ms; }
.workflow-eyebrow { display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:.7rem; color:var(--flow-muted); }.workflow-icon { font-size:1.1rem; }.workflow-badge { margin-left:auto; border:1px solid var(--flow-line); border-radius:99px; padding:3px 8px; font-size:.6rem; }
.workflow-title { font-size:.95rem; font-weight:500; margin:14px 0 8px!important; }.workflow-message { font-size:.8rem; line-height:1.65; color:var(--flow-muted); }
.workflow-message-lines { display:grid; gap:7px; margin-top:16px; }.workflow-message-lines span { height:3px; width:85%; border-radius:4px; background:var(--flow-line); }.workflow-message-lines span:last-child { width:52%; }
.workflow-connector { width:1px; height:28px; background:var(--flow-line); margin:0 auto; position:relative; overflow:hidden; }.workflow-connector span { display:block; height:12px; background:var(--flow-accent); animation:flow-signal 1.5s linear infinite; animation-play-state:paused; }
.automation-engine { display:flex; align-items:center; gap:14px; padding:17px 20px; background:var(--flow-card); border:1px solid var(--flow-line); border-radius:13px; }.automation-engine p { font-size:.85rem; font-weight:500; }.automation-engine div > span { font-size:.66rem; color:var(--flow-muted); display:block; margin-top:4px; }
.engine-mark { position:relative; width:32px; height:32px; flex-shrink:0; border:1px solid var(--flow-line); border-radius:10px; display:flex; justify-content:center; align-items:center; gap:3px; }.engine-mark i { width:4px; height:4px; border-radius:50%; background:var(--flow-accent); animation:engine-pulse 1.2s ease-in-out infinite; animation-play-state:paused; }.engine-mark i:nth-child(2) { animation-delay:.15s; }.engine-mark i:nth-child(3) { animation-delay:.3s; }
.engine-check { margin-left:auto; color:var(--flow-accent); opacity:1; transition:opacity 250ms; }
.workflow-details { display:flex; justify-content:center; flex-wrap:wrap; gap:7px; margin:12px 0 0; min-height:25px; transition:opacity 250ms; }.workflow-details span { font-size:.6rem; border:1px solid var(--flow-line); border-radius:99px; padding:5px 9px; color:var(--flow-muted); }
.automation-results { display:grid; gap:10px; }.automation-result { display:flex; align-items:center; gap:12px; padding:16px 18px; border:1px solid var(--flow-line); border-radius:13px; background:var(--flow-card); transition:opacity 350ms,transform 350ms; }.automation-result p { font-size:.82rem; font-weight:500; }.automation-result div > span { display:block; font-size:.7rem; color:var(--flow-muted); margin-top:4px; }.result-check { display:grid; place-items:center; flex:0 0 26px; height:26px; border-radius:50%; background:#e6eee4; color:var(--flow-accent); }
.automation-demo[data-ready][data-phase="0"] .automation-message { opacity:.6; transform:translateY(8px); }.automation-demo[data-ready][data-phase="0"] .automation-engine { opacity:.35; }
.automation-demo[data-ready]:is([data-phase="0"],[data-phase="1"]) .workflow-details { opacity:0; }.automation-demo[data-ready]:not([data-phase="4"]) .engine-check { opacity:0; }
.automation-demo[data-ready]:is([data-phase="0"],[data-phase="1"],[data-phase="2"]) .automation-result { opacity:0; transform:translateY(8px); }.automation-demo[data-ready][data-phase="3"] .result-draft { opacity:0; transform:translateY(8px); }
.automation-demo[data-running="true"]:is([data-phase="1"],[data-phase="2"]) .engine-mark i,.automation-demo[data-running="true"]:not([data-phase="4"]) .workflow-connector span { animation-play-state:running; }
@keyframes flow-signal { from { transform:translateY(-14px); } to { transform:translateY(32px); } }@keyframes engine-pulse { 50% { opacity:.25; transform:translateY(-2px); } }
@media (prefers-color-scheme: dark) { .automation-demo { --flow-bg:#22271f; --flow-card:#2c3329; --flow-line:#465140; --flow-ink:#edf1e9; --flow-muted:#b4c0ac; --flow-accent:#b1cba6; }.result-check { background:#3f5139; } }
@media (max-width:760px) { .home-showcase-section { grid-template-columns:minmax(0,1fr); padding:56px 0; gap:36px; }.automation-section .home-showcase-copy,.automation-section .automation-demo { grid-column:auto; grid-row:auto; }.home-showcase-copy h2 { max-width:16ch; font-size:clamp(2.4rem,8vw,3.6rem); }.automation-demo { padding:26px; } }
@media (max-width:440px) { .home-showcase-section { gap:30px; }.home-showcase-copy h2 { font-size:2.4rem; }.home-showcase-copy > p:last-of-type { font-size:1rem; }.demo-stage { padding:28px 18px; }.pino-page { padding:24px 18px 90px; min-height:318px; }.pino-page-back { left:24px; right:24px; }.pino-passage { font-size:1rem; }.sharp-key-row { grid-template-columns:repeat(4,minmax(0,1fr)); }.sharp-game { padding-inline:12px; }.sharp-prompt { font-size:1.15rem; }.sharp-slots { margin:20px 0; }.compounds-exercise { padding:18px; }.action-grid { grid-template-columns:minmax(0,1fr); }.action-slot { min-height:90px; }.action-stage { padding:24px 18px; }.time-app { padding:16px; }.time-clock { font-size:clamp(1rem,8vw,1.8rem); }.automation-demo { padding:20px 16px; }.automation-message { padding:16px; }.automation-engine,.automation-result { padding:14px; }.showcase-pagination { gap:4px; } }
@media (prefers-reduced-motion: reduce) { .home-showcase-section *,.home-showcase-section *::before,.home-showcase-section *::after { transition:none!important; animation:none!important; } }

.engine-status { display: grid!important; }
.engine-status > span { grid-area: 1 / 1; }
.engine-processing { visibility: hidden; }
.automation-demo[data-ready]:not([data-phase="4"]) .engine-processing { visibility: visible; }
.automation-demo[data-ready]:not([data-phase="4"]) .engine-completed { visibility: hidden; }