.start{min-height:calc(100vh - 60px);position:relative;overflow:hidden}
.start__bg{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;background:linear-gradient(180deg,var(--ocean-700) 0%,var(--ocean-600) 30%,var(--ocean-500) 60%,var(--teal-400) 100%);overflow:hidden}
.start__wave{position:absolute;bottom:0;left:-50%;width:200%;height:200px;background:radial-gradient(ellipse at center top,rgba(255,255,255,.15),transparent 70%);animation:drift 20s linear infinite}
.start__wave--1{animation-duration:25s;opacity:.5}
.start__wave--2{animation-duration:18s;opacity:.3;animation-direction:reverse}
.start__wave--3{animation-duration:30s;opacity:.2}
.start__stars{position:absolute;top:0;right:0;bottom:0;left:0}
.start__star{position:absolute;width:2px;height:2px;background:var(--sand-200);border-radius:50%;opacity:0;animation:fadeIn 3s ease-in-out infinite}
.start__hero{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:5rem 1.5rem 4rem}
.start__title{font-size:clamp(3rem,8vw,6rem);font-weight:700;line-height:1;margin:1.5rem 0;letter-spacing:-.02em}
.start__title-line{display:block;color:var(--neutral-0)}
.start__title-line--accent{background:linear-gradient(135deg,var(--sand-200),var(--coral-300),var(--sand-300));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-style:italic}
.start__subtitle{max-width:540px;font-size:1.125rem;color:#ffffffd9;line-height:1.7;margin-bottom:2rem}
.start__actions{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;margin-bottom:3rem}
.start__stats{display:flex;align-items:center;gap:1.5rem;padding:1.25rem 2rem;border-radius:var(--radius-lg);background:#ffffff1a;border:1px solid rgba(255,255,255,.15);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);margin-bottom:24px}
.start__stat{display:flex;flex-direction:column;align-items:center}
.start__stat-num{font-family:var(--font-display);font-size:2rem;font-weight:700;color:var(--sand-200)}
.start__stat-label{font-size:.75rem;color:#ffffffb3;text-transform:uppercase;letter-spacing:.05em}
.start__stat-divider{width:1px;height:32px;background:#ffffff26}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;border-radius:var(--radius-md);font-weight:600;font-size:.95rem;text-decoration:none;transition:all var(--transition);cursor:pointer;border:none;position:relative;overflow:hidden}
.btn--primary{background:linear-gradient(135deg,var(--coral-400),var(--coral-600));color:var(--neutral-0);box-shadow:0 4px 20px #e25a3c40}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 8px 30px #e25a3c59;color:var(--neutral-0)}
.btn--primary:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .5s}
.btn--primary:hover:before{left:100%}
.btn--ghost{background:#ffffff1a;color:var(--neutral-50);border:1px solid rgba(255,255,255,.3);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.btn--ghost:hover{background:#fff3;border-color:#ffffff80;color:var(--neutral-0)}
.btn--lg{padding:1rem 2rem;font-size:1.05rem}
.btn__arrow{transition:transform var(--transition)}
.btn--primary:hover .btn__arrow{transform:translate(4px)}
.start__features{position:relative;z-index:1;padding:4rem 1.5rem;background:var(--bg)}
.start__section-title{font-size:2rem;text-align:center;margin-top:2.5rem;margin-bottom:1.25rem;padding-top:24px;padding-bottom:0;color:var(--text-bright)}
.start__feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem}
.feature-card{display:block;padding:1.5rem;border-radius:var(--radius-lg);background:var(--bg-card);border:1px solid var(--neutral-200);text-decoration:none;color:inherit;transition:all var(--transition);overflow:hidden;box-shadow:var(--shadow-sm)}
.feature-card:hover{transform:translateY(-4px);border-color:var(--coral-200);box-shadow:var(--shadow-lg)}
.feature-card__art{border-radius:var(--radius-md);overflow:hidden;margin-bottom:1rem;aspect-ratio:16/10}
.feature-card h3{font-size:1.25rem;color:var(--accent);margin-bottom:.5rem}
.feature-card p{font-size:.875rem;color:var(--text-muted);line-height:1.6}
.start__preview{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;padding:4rem 1.5rem;background:var(--bg)}
.start__preview-content{display:flex;flex-direction:column;align-items:flex-start;gap:1.5rem}
.start__preview-text{display:flex;flex-direction:column;gap:.75rem}
.start__preview-line{font-family:var(--font-display);font-size:1.25rem;color:var(--text);line-height:1.5;font-style:italic}
.start__preview-line--accent{color:var(--accent);font-weight:600}
.start__preview-art{border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-lg)}
@media (max-width: 768px){.start__preview{grid-template-columns:1fr}
.start__stats{flex-wrap:wrap;gap:1rem;padding:1rem}
.start__stat-divider{display:none}
}
.play{min-height:calc(100vh - 60px);padding:2rem 0;background:var(--bg)}
.play__title-screen{display:flex;flex-direction:column;align-items:center;text-align:center;padding:2rem 1.5rem;gap:1.5rem}
.play__title-art{width:100%;max-width:500px;border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-lg)}
.play__title-box{padding:1.5rem 2rem;border-radius:4px;background:var(--bg-card);background-color:#fff;border-top:4px outset #808080;border-left:4px outset #808080;border-bottom:8px outset #808080;border-right:8px outset #808080}
.play__title-heading{font-size:clamp(2.5rem,6vw,4rem);background:linear-gradient(135deg,var(--coral-500),var(--sand-600));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;-webkit-text-shadow:4px -8px var(--neutral-800);font-style:italic}
.play__title-subtitle{color:var(--ocean-700);font-size:1.1rem;letter-spacing:.05em}
.play__start-btn{margin-top:1rem}
.play__continue-btn{font-size:.9rem;background:var(--neutral-100);color:var(--text);border:1px solid var(--neutral-200)}
.play__continue-btn:hover{background:var(--neutral-200);color:var(--text-bright)}
.play__instructions{display:flex;justify-content:center;padding:2rem 1.5rem}
.play__instructions-card{max-width:560px;width:100%;padding:2.5rem;border-radius:var(--radius-lg);background:var(--bg-card);border:1px solid var(--neutral-200);box-shadow:var(--shadow-md);text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.5rem}
.play__instructions-title{font-size:2rem;color:var(--accent)}
.play__instructions-text{text-align:left;display:flex;flex-direction:column;gap:.5rem}
.play__instructions-text p{font-size:1rem;color:var(--text);line-height:1.7}
.play__continue-prompt{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;border-radius:var(--radius-md);background:#e25a3c14;color:var(--accent);font-size:.95rem;animation:pulse-glow 2s ease-in-out infinite}
.play__continue-icon{font-size:1.2rem}
.play__questions{display:flex;flex-direction:column;align-items:center;padding:2rem 1.5rem;gap:2rem}
.play__progress-bar{display:flex;gap:.5rem}
.play__progress-dot{width:32px;height:4px;border-radius:2px;background:var(--neutral-200);transition:all var(--transition)}
.play__progress-dot--done{background:var(--ocean-400)}
.play__progress-dot--active{background:var(--accent);box-shadow:0 0 8px #e25a3c4d}
.play__question-card{max-width:500px;width:100%;padding:2.5rem;border-radius:var(--radius-lg);background:var(--bg-card);border:1px solid var(--neutral-200);box-shadow:var(--shadow-md)}
.play__question-number{font-size:.8rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:1rem}
.play__question-label{font-size:1.75rem;color:var(--text-bright);margin-bottom:.5rem}
.play__question-hint{color:var(--text-muted);font-size:.9rem;margin-bottom:2rem;font-style:italic}
.play__question-form{display:flex;flex-direction:column;gap:1rem}
.play__question-input{width:100%;padding:1rem 1.25rem;border-radius:var(--radius-md);background:var(--neutral-50);border:2px solid var(--neutral-200);color:var(--text-bright);font-size:1.1rem;transition:border-color var(--transition)}
.play__question-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px #e25a3c14}
.play__question-input::placeholder{color:var(--neutral-400)}
.play__input-error{color:var(--error-500);font-size:.875rem}
.play__story-container{display:grid;grid-template-columns:240px 1fr;gap:2rem;max-width:var(--max-width);margin:0 auto;padding:0 1.5rem}
.play__sidebar{display:flex;flex-direction:column;gap:1.5rem;position:sticky;top:80px;align-self:start}
.play__sidebar-title{font-size:.8rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.75rem;font-family:var(--font-body);font-weight:600}
.play__inventory,.play__progress-tracker{padding:1.25rem;border-radius:var(--radius-md);background:var(--bg-card);border:1px solid var(--neutral-200);box-shadow:var(--shadow-sm)}
.play__inventory-items{display:flex;flex-direction:column;gap:.75rem}
.play__inventory-item{display:flex;align-items:center;gap:.5rem;padding:.6rem .75rem;border-radius:var(--radius-sm);background:var(--neutral-50);opacity:.4;transition:all var(--transition);position:relative}
.play__inventory-item--active{opacity:1;background:#e25a3c0f;border:1px solid rgba(226,90,60,.2)}
.play__inventory-icon{font-size:1.2rem}
.play__inventory-label{font-size:.85rem;color:var(--text);text-transform:capitalize}
.play__inventory-locked{position:absolute;right:.5rem;color:var(--neutral-400);font-size:.8rem}
.play__path-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:.5rem}
.play__path-item{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--text-muted)}
.play__path-check{color:var(--success-500);font-weight:700;font-size:.8rem}
.play__path-text{color:var(--text)}
.play__sidebar-actions{display:flex;flex-direction:column;gap:.5rem}
.play__save-btn,.play__restart-btn{padding:.6rem 1rem;border-radius:var(--radius-sm);font-size:.85rem;font-weight:500;transition:all var(--transition);text-align:left}
.play__save-btn{background:#0ea5e914;color:var(--primary);border:1px solid rgba(14,165,233,.2)}
.play__save-btn:hover{background:#0ea5e926}
.play__restart-btn{background:#ef44440f;color:var(--error-500);border:1px solid rgba(239,68,68,.15)}
.play__restart-btn:hover{background:#ef44441f}
.play__story-main{display:flex;flex-direction:column;gap:1.5rem;max-height:calc(100vh - 100px);overflow-y:auto;padding-right:.5rem}
.play__scene-art{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md)}
.play__story-text{padding:1.5rem 2rem;border-radius:var(--radius-lg);background:var(--bg-card);border:1px solid var(--neutral-200);box-shadow:var(--shadow-sm)}
.play__story-line{font-family:var(--font-display);font-size:1.25rem;line-height:1.7;color:var(--text);margin-bottom:.75rem}
.play__story-line:last-child{margin-bottom:0}
.play__choices{padding:1.5rem 2rem;border-radius:var(--radius-lg);background:#e25a3c0a;border:1px solid rgba(226,90,60,.12)}
.play__choice-prompt{font-family:var(--font-display);font-size:1.3rem;color:var(--accent);margin-bottom:1.25rem;font-style:italic}
.play__choice-buttons{display:flex;gap:1rem;flex-wrap:wrap}
.play__choice-btn{flex:1;min-width:140px;display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;border-radius:var(--radius-md);background:var(--bg-card);border:2px solid var(--neutral-200);color:var(--text-bright);font-size:1.1rem;font-weight:600;transition:all var(--transition);cursor:pointer}
.play__choice-btn:hover{background:#e25a3c0f;border-color:var(--accent);transform:translateY(-2px);box-shadow:0 4px 20px #e25a3c1f}
.play__choice-btn-arrow{color:var(--accent);transition:transform var(--transition)}
.play__choice-btn:hover .play__choice-btn-arrow{transform:translate(4px)}
.play__riddle{padding:2rem;border-radius:var(--radius-lg);background:#0ea5e90a;border:1px solid rgba(14,165,233,.15)}
.play__riddle-box{padding:1.5rem;border-radius:var(--radius-md);background:var(--bg-card);border-left:4px solid var(--accent);margin-bottom:1.5rem}
.play__riddle-text{font-family:var(--font-display);font-size:1.3rem;font-style:italic;color:var(--text-bright);line-height:1.6;white-space:pre-line}
.play__riddle-form{display:flex;gap:.75rem}
.play__riddle-input{flex:1;padding:.875rem 1.25rem;border-radius:var(--radius-md);background:var(--neutral-50);border:2px solid var(--neutral-200);color:var(--text-bright);font-size:1rem;transition:border-color var(--transition)}
.play__riddle-input:focus{outline:none;border-color:var(--accent)}
.play__riddle-error{color:var(--error-500);font-size:.9rem;margin-top:.75rem}
.play__riddle-hint{display:flex;align-items:center;gap:.5rem;margin-top:1rem;padding:.75rem 1rem;border-radius:var(--radius-sm);background:#f59e0b14;color:var(--warning-500);font-size:.9rem}
.play__hint-icon{font-size:1.1rem}
.play__continue-story{align-self:flex-start}
.play__ending{display:flex;flex-direction:column;align-items:center;text-align:center;padding:2rem 1.5rem;gap:2rem}
.play__ending-art{width:100%;max-width:500px;border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-lg)}
.play__ending-content{max-width:600px;display:flex;flex-direction:column;align-items:center;gap:1.25rem}
.play__ending-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1.25rem;border-radius:100px;background:#e25a3c1a;border:1px solid rgba(226,90,60,.25);color:var(--accent);font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.play__ending-icon{font-size:1.2rem}
.play__ending-title{font-size:clamp(2rem,5vw,3rem);color:var(--text-bright);font-style:italic}
.play__ending-description{font-size:1.1rem;color:var(--text-muted);line-height:1.7;max-width:480px}
.play__ending-jewel{display:flex;align-items:center;gap:.5rem;padding:.6rem 1.25rem;border-radius:100px;background:#e0a9681a;color:var(--sand-700);font-size:.95rem}
.play__ending-jewel-icon{font-size:1.2rem}
.play__ending-path{width:100%;max-width:400px;text-align:left;padding:1.5rem;border-radius:var(--radius-md);background:var(--bg-card);border:1px solid var(--neutral-200);box-shadow:var(--shadow-sm)}
.play__ending-path h3{font-size:1rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:1rem;font-family:var(--font-body);font-weight:600}
.play__ending-path-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:.5rem}
.play__ending-path-list li{display:flex;align-items:center;gap:.5rem;font-size:.95rem;color:var(--text)}
.play__ending-actions{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;margin-top:1rem}
.play__ending-play-again{color:var(--text-muted);font-size:.85rem;font-style:italic;margin-top:.5rem}
@media (max-width: 768px){.play__story-container{grid-template-columns:1fr}
.play__sidebar{position:static;flex-direction:row;flex-wrap:wrap;gap:.75rem}
.play__inventory,.play__progress-tracker{flex:1;min-width:140px}
.play__sidebar-actions{flex-direction:row}
.play__story-main{max-height:none}
.play__story-line{font-size:1.1rem}
.play__choice-buttons{flex-direction:column}
}
.endings-page{padding:3rem 0 2rem;background:var(--bg)}
.endings-page__header{text-align:center;margin-bottom:2rem}
.endings-page__badge{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem 1rem;border-radius:100px;background:#e25a3c14;border:1px solid rgba(226,90,60,.2);color:var(--accent);font-size:.85rem;font-weight:600;margin-bottom:1rem}
.endings-page__badge-icon{font-size:1.1rem}
.endings-page__title{font-size:clamp(2.5rem,6vw,3.5rem);color:var(--text-bright);margin-bottom:.75rem}
.endings-page__subtitle{color:var(--text-muted);font-size:1.1rem;max-width:500px;margin:0 auto;line-height:1.6}
.endings-page__progress{display:flex;justify-content:center;margin-bottom:3rem}
.endings-page__progress-ring{position:relative;width:140px;height:140px}
.endings-page__progress-svg{width:100%;height:100%}
.endings-page__progress-circle{transition:stroke-dasharray 1s ease-out}
.endings-page__progress-text{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.endings-page__progress-num{font-family:var(--font-display);font-size:2.5rem;font-weight:700;color:var(--accent)}
.endings-page__progress-label{font-size:.8rem;color:var(--text-muted)}
.endings-page__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;margin-bottom:3rem}
.ending-card{border-radius:var(--radius-lg);background:var(--bg-card);border:1px solid var(--neutral-200);overflow:hidden;transition:all var(--transition);box-shadow:var(--shadow-sm)}
.ending-card--discovered:hover{transform:translateY(-4px);border-color:var(--coral-200);box-shadow:var(--shadow-lg)}
.ending-card--locked{opacity:.65}
.ending-card__art{position:relative;aspect-ratio:16/10;overflow:hidden}
.ending-card__lock-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#faf9f7cc;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.ending-card__lock-overlay span{font-size:2.5rem}
.ending-card__content{padding:1.5rem}
.ending-card__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}
.ending-card__icon{font-size:1.5rem}
.ending-card__status{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:.25rem .75rem;border-radius:100px}
.ending-card--discovered .ending-card__status{background:#22c55e1a;color:var(--success-600)}
.ending-card--locked .ending-card__status{background:var(--neutral-100);color:var(--text-muted)}
.ending-card__title{font-size:1.4rem;color:var(--text-bright);margin-bottom:.5rem}
.ending-card__desc{font-size:.9rem;color:var(--text-muted);line-height:1.6;margin-bottom:1rem}
.ending-card__paths{padding-top:1rem;border-top:1px solid var(--neutral-200)}
.ending-card__paths-title{font-size:.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.5rem;font-family:var(--font-body);font-weight:600}
.ending-card__path-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:.5rem}
.ending-card__path-item{display:flex;flex-direction:column;gap:.15rem}
.ending-card__path-name{font-size:.85rem;color:var(--accent);font-weight:500}
.ending-card__path-steps{font-size:.75rem;color:var(--text-muted);font-family:var(--font-mono)}
.endings-page__cta{text-align:center;padding:2rem;border-radius:var(--radius-lg);background:#e25a3c0a;border:1px solid rgba(226,90,60,.1);display:flex;flex-direction:column;align-items:center;gap:1rem}
.endings-page__cta p{color:var(--text);font-size:1.05rem}
.gallery-page{padding:3rem 0 2rem;background:var(--bg)}
.gallery-page__header{text-align:center;margin-bottom:3rem}
.gallery-page__badge{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem 1rem;border-radius:100px;background:#e25a3c14;border:1px solid rgba(226,90,60,.2);color:var(--accent);font-size:.85rem;font-weight:600;margin-bottom:1rem}
.gallery-page__title{font-size:clamp(2.5rem,6vw,3.5rem);color:var(--text-bright);margin-bottom:.75rem}
.gallery-page__subtitle{color:var(--text-muted);font-size:1.1rem;max-width:520px;margin:0 auto;line-height:1.6}
.gallery-page__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem}
.gallery-card{position:relative;border-radius:var(--radius-lg);overflow:hidden;cursor:pointer;background:var(--bg-card);border:1px solid var(--neutral-200);box-shadow:var(--shadow-sm);transition:all var(--transition)}
.gallery-card:hover{transform:translateY(-4px);border-color:var(--coral-200);box-shadow:var(--shadow-lg)}
.gallery-card__art{aspect-ratio:16/10;overflow:hidden}
.gallery-card__overlay{padding:1.25rem}
.gallery-card__title{font-size:1.2rem;color:var(--accent);margin-bottom:.4rem}
.gallery-card__desc{font-size:.85rem;color:var(--text-muted);line-height:1.5;margin-bottom:.75rem}
.gallery-card__view{font-size:.8rem;color:var(--primary);font-weight:600;transition:transform var(--transition)}
.gallery-card:hover .gallery-card__view{transform:translate(4px)}
.gallery-lightbox{position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;display:flex;align-items:center;justify-content:center;background:#25201ad9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:2rem}
.gallery-lightbox__content{position:relative;max-width:600px;width:100%;padding:2rem;border-radius:var(--radius-xl);background:var(--bg-card);border:1px solid var(--neutral-200);box-shadow:var(--shadow-lg)}
.gallery-lightbox__close{position:absolute;top:1rem;right:1rem;width:36px;height:36px;border-radius:50%;background:var(--neutral-100);color:var(--text);font-size:1rem;display:flex;align-items:center;justify-content:center;transition:all var(--transition)}
.gallery-lightbox__close:hover{background:var(--error-500);color:var(--neutral-0)}
.gallery-lightbox__art{border-radius:var(--radius-lg);overflow:hidden;margin-bottom:1.5rem}
.gallery-lightbox__title{font-size:1.5rem;color:var(--accent);margin-bottom:.5rem}
.gallery-lightbox__desc{color:var(--text-muted);line-height:1.6}
.about-page{padding:3rem 0 2rem;background:var(--bg)}
.about-page__header{text-align:center;margin-bottom:2.5rem}
.about-page__badge{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem 1rem;border-radius:100px;background:#0ea5e914;border:1px solid rgba(14,165,233,.2);color:var(--primary);font-size:.85rem;font-weight:600;margin-bottom:1rem}
.about-page__title{font-size:clamp(2.5rem,6vw,4rem);background:linear-gradient(135deg,var(--coral-500),var(--sand-600));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-style:italic;margin-bottom:.75rem}
.about-page__tagline{color:var(--text-muted);font-size:1.15rem;max-width:540px;margin:0 auto;line-height:1.6}
.about-page__hero{border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-lg);margin-bottom:3rem;max-width:700px;margin-left:auto;margin-right:auto}
.about-page__section{margin-bottom:3rem}
.about-page__section-title{font-size:1.75rem;color:var(--text-bright);margin-bottom:1.5rem;text-align:center}
.about-page__prose{max-width:var(--reading-width);margin:0 auto}
.about-page__prose p{font-size:1.05rem;line-height:1.8;color:var(--text);margin-bottom:1.25rem}
.about-page__feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem}
.about-feature{padding:1.5rem;border-radius:var(--radius-lg);background:var(--bg-card);border:1px solid var(--neutral-200);box-shadow:var(--shadow-sm);transition:all var(--transition)}
.about-feature:hover{transform:translateY(-2px);border-color:var(--coral-200);box-shadow:var(--shadow-md)}
.about-feature__icon{font-size:2rem;display:block;margin-bottom:.75rem}
.about-feature h3{font-size:1.1rem;color:var(--accent);margin-bottom:.4rem}
.about-feature p{font-size:.875rem;color:var(--text-muted);line-height:1.6}
.about-page__tech{text-align:center;margin-bottom:3rem}
.about-page__tech-list{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;margin-bottom:1.5rem}
.about-page__tech-item{padding:.5rem 1.25rem;border-radius:100px;background:var(--bg-card);border:1px solid var(--neutral-200);color:var(--accent);font-size:.9rem;font-weight:500}
.about-page__tech-note{color:var(--text-muted);font-size:.9rem;font-style:italic}
.about-page__story{margin-bottom:3rem}
.about-page__story-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1.5rem;max-width:700px;margin:0 auto}
.about-page__story-stat{text-align:center;padding:1.5rem 1rem;border-radius:var(--radius-lg);background:var(--bg-card);border:1px solid var(--neutral-200);box-shadow:var(--shadow-sm)}
.about-page__story-num{display:block;font-family:var(--font-display);font-size:2.5rem;font-weight:700;color:var(--accent);margin-bottom:.25rem}
.about-page__story-label{font-size:.8rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}
.about-page__cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;padding:2rem 0}
.case-study{padding:3rem 0 2rem;background:var(--bg)}
.case-study__header{text-align:center;margin-bottom:3rem}
.case-study__badge{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem 1rem;border-radius:100px;background:#e25a3c14;border:1px solid rgba(226,90,60,.2);color:var(--accent);font-size:.85rem;font-weight:600;margin-bottom:1rem}
.case-study__title{font-size:clamp(2rem,5vw,3rem);color:var(--text-bright);margin-bottom:.5rem}
.case-study__meta{color:var(--text-muted);font-size:.9rem;letter-spacing:.05em}
.case-study__article{max-width:var(--reading-width);margin:0 auto}
.case-study__section{margin-bottom:2.5rem}
.case-study__section-title{font-size:1.5rem;color:var(--accent);margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid var(--neutral-200)}
.case-study__section p{font-size:1.05rem;line-height:1.8;color:var(--text);margin-bottom:1rem}
.case-study__section code{font-family:var(--font-mono);font-size:.9em;padding:.15rem .4rem;border-radius:var(--radius-sm);background:#e25a3c14;color:var(--accent)}
.case-study__diagram{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;justify-content:center;padding:2rem 1rem;margin:1.5rem 0;border-radius:var(--radius-lg);background:var(--bg-card);border:1px solid var(--neutral-200);box-shadow:var(--shadow-sm)}
.case-study__diagram-node{padding:.5rem 1rem;border-radius:var(--radius-sm);background:#0ea5e90f;border:1px solid rgba(14,165,233,.2);color:var(--primary);font-family:var(--font-mono);font-size:.8rem}
.case-study__diagram-node--choice{background:#e25a3c14;border-color:#e25a3c40;color:var(--accent)}
.case-study__diagram-arrow{color:var(--text-muted);font-size:.9rem}
.case-study__diagram-branch{display:flex;flex-direction:column;gap:.5rem}
.case-study__code{margin:1.5rem 0;padding:1.25rem;border-radius:var(--radius-md);background:var(--neutral-900);border:1px solid var(--neutral-800);overflow-x:auto}
.case-study__code pre{font-family:var(--font-mono);font-size:.85rem;color:var(--neutral-100);line-height:1.6;margin:0}
.case-study__enhancement-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:1rem}
.case-study__enhancement-list li{padding:1rem 1.25rem;border-radius:var(--radius-md);background:var(--bg-card);border:1px solid var(--neutral-200);box-shadow:var(--shadow-sm);font-size:.95rem;line-height:1.6;color:var(--text)}
.case-study__enhancement-list strong{color:var(--accent)}
.case-study__cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;padding:2rem 0;border-top:1px solid var(--neutral-200);margin-top:2rem}
.blog-page{padding:3rem 0 2rem;background:var(--bg)}
.blog-page__header{text-align:center;margin-bottom:3rem}
.blog-page__badge{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem 1rem;border-radius:100px;background:#0ea5e914;border:1px solid rgba(14,165,233,.2);color:var(--primary);font-size:.85rem;font-weight:600;margin-bottom:1rem}
.blog-page__title{font-size:clamp(2.5rem,6vw,3.5rem);color:var(--text-bright);margin-bottom:.75rem}
.blog-page__subtitle{color:var(--text-muted);font-size:1.1rem;max-width:500px;margin:0 auto;line-height:1.6}
.blog-page__list{max-width:var(--reading-width);margin:0 auto;display:flex;flex-direction:column;gap:2rem}
.blog-entry{padding:2rem;border-radius:var(--radius-lg);background:var(--bg-card);border:1px solid var(--neutral-200);box-shadow:var(--shadow-sm);transition:all var(--transition)}
.blog-entry:hover{border-color:var(--coral-200);box-shadow:var(--shadow-md)}
.blog-entry__meta{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}
.blog-entry__category{padding:.25rem .75rem;border-radius:100px;background:#e25a3c14;color:var(--accent);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.blog-entry__date{color:var(--text-muted);font-size:.85rem}
.blog-entry__title{font-size:1.5rem;color:var(--text-bright);margin-bottom:.75rem;line-height:1.3}
.blog-entry__excerpt{color:var(--text-muted);font-size:1rem;line-height:1.6;margin-bottom:1rem}
.blog-entry__content{display:flex;flex-direction:column;gap:1rem;margin-bottom:1rem}
.blog-entry__content p{font-size:1rem;line-height:1.8;color:var(--text)}
.blog-entry__toggle{display:inline-flex;align-items:center;gap:.25rem;padding:.5rem 1rem;border-radius:var(--radius-sm);background:#e25a3c0f;color:var(--accent);font-size:.85rem;font-weight:600;transition:all var(--transition)}
.blog-entry__toggle:hover{background:#e25a3c1f}
:root{--ocean-50: #f0f9ff;--ocean-100: #e0f2fe;--ocean-200: #bae6fd;--ocean-300: #7dd3fc;--ocean-400: #38bdf8;--ocean-500: #0ea5e9;--ocean-600: #0284c7;--ocean-700: #0369a1;--ocean-800: #075985;--ocean-900: #0c4a6e;--sand-50: #fefdfb;--sand-100: #fdf8f0;--sand-200: #f9edd9;--sand-300: #f3dcb8;--sand-400: #ecc590;--sand-500: #e0a968;--sand-600: #c8854a;--sand-700: #a66838;--sand-800: #855030;--sand-900: #6b4028;--coral-50: #fef3f0;--coral-100: #fde0d9;--coral-200: #fac5b8;--coral-300: #f59e8a;--coral-400: #ef7a5f;--coral-500: #e25a3c;--coral-600: #c84528;--coral-700: #a33a22;--coral-800: #823120;--coral-900: #6a2a1d;--teal-50: #f0fdfa;--teal-100: #ccfbf1;--teal-200: #99f6e4;--teal-300: #5eead4;--teal-400: #2dd4bf;--teal-500: #14b8a6;--teal-600: #0d9488;--teal-700: #0f766e;--teal-800: #115e59;--teal-900: #134e4a;--success-400: #4ade80;--success-500: #22c55e;--success-600: #16a34a;--warning-400: #fbbf24;--warning-500: #f59e0b;--error-400: #f87171;--error-500: #ef4444;--neutral-0: #ffffff;--neutral-50: #faf9f7;--neutral-100: #f4f2ee;--neutral-200: #e8e4dc;--neutral-300: #d1cabd;--neutral-400: #a89f8e;--neutral-500: #837a68;--neutral-600: #6b6354;--neutral-700: #524b3f;--neutral-800: #3a342b;--neutral-900: #25201a;--bg: var(--neutral-50);--bg-elevated: var(--neutral-0);--bg-card: var(--neutral-0);--bg-dark: var(--neutral-900);--text: var(--neutral-800);--text-muted: var(--neutral-500);--text-bright: var(--neutral-900);--text-on-dark: var(--neutral-50);--text-muted-on-dark: var(--neutral-300);--accent: var(--coral-500);--accent-bright: var(--coral-400);--accent-deep: var(--coral-600);--primary: var(--ocean-600);--primary-bright: var(--ocean-500);--highlight: var(--sand-400);--highlight-deep: var(--sand-600);--font-display: "Cormorant Garamond", Georgia, serif;--font-body: "Outfit", system-ui, sans-serif;--font-mono: "JetBrains Mono", monospace;--radius-sm: 8px;--radius-md: 16px;--radius-lg: 24px;--radius-xl: 32px;--shadow-sm: 0 2px 8px rgba(37, 32, 26, .06);--shadow-md: 0 8px 24px rgba(37, 32, 26, .1);--shadow-lg: 0 20px 60px rgba(37, 32, 26, .15);--shadow-glow: 0 0 40px rgba(226, 90, 60, .12);--transition: .3s cubic-bezier(.4, 0, .2, 1);--transition-slow: .6s cubic-bezier(.4, 0, .2, 1);--max-width: 1200px;--reading-width: 680px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.2}
a{color:var(--accent);text-decoration:none;transition:color var(--transition)}
a:hover{color:var(--accent-bright)}
button{font-family:var(--font-body);cursor:pointer;border:none;background:none;color:inherit}
input,textarea{font-family:var(--font-body)}
::selection{background:var(--coral-300);color:var(--neutral-900)}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--neutral-100)}
::-webkit-scrollbar-thumb{background:var(--neutral-300);border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:var(--sand-400)}
@keyframes fadeInUp{0%{opacity:0;transform:translateY(24px)}
to{opacity:1;transform:translateY(0)}
}
@keyframes fadeIn{0%{opacity:0}
to{opacity:1}
}
@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}
to{opacity:1;transform:scale(1)}
}
@keyframes shimmer{0%{background-position:-200% center}
to{background-position:200% center}
}
@keyframes float{0%,to{transform:translateY(0)}
50%{transform:translateY(-12px)}
}
@keyframes wave{0%,to{transform:translate(0) translateY(0)}
50%{transform:translate(-15px) translateY(-4px)}
}
@keyframes pulse-glow{0%,to{box-shadow:0 0 20px #e25a3c14}
50%{box-shadow:0 0 40px #e25a3c33}
}
@keyframes drift{0%{transform:translate(0)}
to{transform:translate(-50%)}
}
@keyframes spin-slow{0%{transform:rotate(0)}
to{transform:rotate(360deg)}
}
@keyframes typewriter{0%{width:0}
to{width:100%}
}
@keyframes ken-burns{0%{transform:scale(1) translate(0)}
to{transform:scale(1.08) translate(-1%,-1%)}
}
.animate-fade-up{animation:fadeInUp .6s ease-out both}
.animate-fade{animation:fadeIn .5s ease-out both}
.animate-scale{animation:scaleIn .4s ease-out both}
.animate-float{animation:float 4s ease-in-out infinite}
.animate-glow{animation:pulse-glow 3s ease-in-out infinite}
.delay-1{animation-delay:.1s}
.delay-2{animation-delay:.2s}
.delay-3{animation-delay:.3s}
.delay-4{animation-delay:.4s}
.delay-5{animation-delay:.5s}
.delay-6{animation-delay:.6s}
.container{max-width:var(--max-width);margin:0 auto;padding:0 1.5rem}
.text-center{text-align:center}
.text-muted{color:var(--text-muted)}
.text-accent{color:var(--accent)}
.text-gold{color:var(--highlight-deep)}
.text-primary{color:var(--primary)}
.scene-art{position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;border-radius:var(--radius-md);background:var(--neutral-200)}
.scene-art__img{width:100%;height:100%;object-fit:cover;display:block;animation:ken-burns 20s ease-out infinite alternate}
.scene-art__fallback{position:absolute;top:0;right:0;bottom:0;left:0;display:none;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--ocean-200),var(--sand-200));font-size:3rem}
.scene-art__overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}
.scene-art__overlay--beach{background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.15) 100%)}
.scene-art__overlay--chest,.scene-art__overlay--chest-open{background:linear-gradient(180deg,transparent 30%,rgba(107,64,40,.25) 100%)}
.scene-art__overlay--beach-walk,.scene-art__overlay--beach-sunset{background:linear-gradient(180deg,transparent 40%,rgba(37,32,26,.2) 100%)}
.scene-art__overlay--map{background:linear-gradient(135deg,#6b402833,#25201a4d)}
.scene-art__overlay--island,.scene-art__overlay--island-path{background:linear-gradient(180deg,transparent 40%,rgba(12,74,110,.2) 100%)}
.scene-art__overlay--riddle{background:linear-gradient(135deg,#25201a66,#0c4a6e4d)}
.scene-art__overlay--cave-entrance,.scene-art__overlay--cave-interior,.scene-art__overlay--cave-fork{background:linear-gradient(180deg,#25201a4d,#25201a80)}
.scene-art__overlay--treasure-chamber{background:linear-gradient(180deg,#e0a96826,#6b40284d)}
.scene-art__overlay--animal-den{background:linear-gradient(180deg,#0f766e33,#25201a4d)}
@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
.scene-art__img{animation:none}
}

/* Story scenes stay compact so the complete narration is immediately visible. */
.play__scene-art {
  max-height: min(34vh, 320px);
  flex: 0 0 auto;
}

.play__scene-art .scene-art {
  height: min(34vh, 320px);
  min-height: 210px;
  aspect-ratio: auto;
}

.play__story-text {
  flex: 0 0 auto;
}

.play__story-line {
  max-width: 72ch;
}

@media (max-width: 768px) {
  .play {
    padding-top: 1rem;
  }

  .play__story-container {
    padding: 0 1rem;
  }

  .play__scene-art,
  .play__scene-art .scene-art {
    height: min(27vh, 220px);
    min-height: 150px;
    max-height: 220px;
  }

  .play__story-text {
    padding: 1.25rem;
  }
}