/* Paper worlds: an additive revision of the approved Claude Design composition. */
.km[data-direction="02"] { --km-color-leaf:#24684c; --km-color-focus:#7955c0; --km-color-paper:#faf5eb; }
.km[data-direction="02"] .km-header { background:#faf5eb; }
.km[data-direction="02"] .km-hero { padding-block:48px 72px; }
.km[data-direction="02"] .km-hero__grid { gap:42px; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.km[data-direction="02"] .km-hero__copy { gap:24px; }
.km[data-direction="02"] .km-display em { text-decoration:underline; text-decoration-color:#c7afd9; text-decoration-thickness:5px; text-underline-offset:8px; }
.km .km-world-stage { aspect-ratio:auto; padding-bottom:6px; position:relative; isolation:isolate; min-width:0; }
.km-world-frame { position:relative; overflow:hidden; border-radius:48% 48% 24px 24px; aspect-ratio:1; background:#e9ddc5; transform:perspective(1100px) rotateX(var(--tilt-y,0deg)) rotateY(var(--tilt-x,0deg)); transition:transform .65s cubic-bezier(.2,.65,.2,1); box-shadow:0 20px 40px -28px #68518c80; }
.km .km-world-image { display:block; width:100%; height:100%; object-fit:cover; }
.km-world-frame > img { animation:km-world-breathe 14s ease-in-out infinite alternate; animation-play-state:paused; }
.km[data-motion="on"] .km-world-stage[data-in-view="true"] .km-world-frame > img { animation-play-state:running; }
.km-world-label { position:absolute; top:31px; right:-12px; z-index:2; padding:17px 19px; border:1px solid #987bb8; border-radius:3px 22px 22px 22px; background:#e9dcf5; color:#443053; font-family:var(--km-font-display); font-size:17px; line-height:1.12; font-weight:650; transform:rotate(7deg); box-shadow:0 5px 0 #987bb82b; pointer-events:none; }
.km-world-caption { display:flex; gap:16px; align-items:center; padding:16px 4px 12px; font-size:15px; }
.km-world-caption__n { font-size:12px; font-weight:700; color:#655470; white-space:nowrap; font-variant-numeric:tabular-nums; }
.km-world-switcher { display:flex; padding:5px; gap:3px; background:#eee5d6; border:1px solid #d8ccba; border-radius:40px; }
.km-world-switcher button { flex:1; border:0; background:transparent; border-radius:30px; padding:10px 7px; font-weight:700; font-size:15px; min-height:44px; cursor:pointer; transition:background .2s,color .2s,box-shadow .2s; }
.km-world-switcher button[aria-pressed="true"] { background:#245d46; color:#fffdf6; box-shadow:0 3px 8px #1c232020; }
.km-world-switcher button:hover:not([aria-pressed="true"]) { background:#fffaf0; }
.km-motion-toggle { display:block; min-height:44px; border:0; background:transparent; font-size:13px; color:#5b574e; padding:8px 3px; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.km-world-stage .km-motion-toggle { margin-left:auto; }
.km[data-motion="off"] *, .km[data-motion="off"] *::before,.km[data-motion="off"] *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
.km[data-motion="off"] .km-world-frame { transform:none; }
.km-artwork { isolation:isolate; overflow:hidden; }
.km-artwork > .km-world-image { position:absolute; inset:0; transition:transform .75s cubic-bezier(.2,.65,.2,1); }
.km[data-direction="02"] .km-art__badge { z-index:1; backdrop-filter:blur(10px); background:#fffaf0ed; border:1px solid #fff8; border-radius:30px; padding:5px 10px; }
.km[data-direction="02"] .km-card { border-radius:20px; border-color:#d9cdbc; transition:transform .3s,box-shadow .3s; }
.km[data-direction="02"] .km-card:focus-within { box-shadow:0 14px 24px -16px #5e3d8260; }
.km[data-direction="02"] .km-story { background:#173f36; box-shadow:0 16px 50px -28px #174c3a80; }
.km[data-direction="02"] .km-story__art { min-height:580px; }
.km[data-direction="02"] .km-story__copy { padding:48px; }
.km .km-agecard { overflow:hidden; height:100%; transition:transform .3s,box-shadow .3s; }
.km .km-agecard__world { position:absolute; right:-5px; top:-5px; width:110px; height:112px; object-fit:cover; border-radius:0 0 0 48%; transform:rotate(5deg); }
.km .km-agecard__text { position:relative; z-index:1; padding-right:0; max-width:100%; margin-top:24px; }
.km .km-agecard__band { position:relative; z-index:1; }
.km .km-agecard__go { z-index:2; }
.km .km-deptcard { transition:transform .25s,background .25s; }
.km[data-direction="02"] .km-btn--primary { box-shadow:0 4px 0 #163f3026; }
.km .km-gallery__main { position:relative; }
.km .km-zoom { position:absolute; bottom:16px; right:16px; z-index:2; display:flex; align-items:center; gap:16px; min-height:44px; border:1px solid #fff9; background:#fffaf0f2; border-radius:30px; padding:8px 18px; cursor:pointer; font-weight:700; font-size:14px; }
.km .km-world-details { grid-template-columns:repeat(3,minmax(0,1fr)); }
.km .km-world-details .km-thumb { overflow:hidden; }
.km .km-world-details .km-thumb[aria-pressed="true"] { border:3px solid #24684c; }
.km .km-world-details .km-thumb span { z-index:1; }
.km .km-crop-robot { transform:scale(2); object-position:50% 37%; }
.km .km-crop-maze { transform:scale(1.65); object-position:65% 70%; }
.km .km-gallery__main[data-crop="robot"] > img { transform:scale(1.9); object-position:50% 37%; }
.km .km-gallery__main[data-crop="maze"] > img { transform:scale(1.6); object-position:65% 70%; }
.km .km-art-dialog { width:min(1080px,94vw); max-height:94dvh; border:1px solid #d8ccba; padding:0; border-radius:24px; background:#faf5eb; color:#1c2320; overflow:auto; }
.km-art-dialog::backdrop { background:#102c24c9; backdrop-filter:blur(7px); }
.km-art-dialog__bar { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px 20px; }
.km-art-dialog__bar h2 { font-family:var(--km-font-display); font-size:18px; }
.km-art-dialog__bar button { min-height:44px; padding:8px 16px; background:#173f36; color:#fffaf0; border:0; border-radius:30px; cursor:pointer; white-space:nowrap; }
.km .km-art-dialog > img { height:auto; max-height:75dvh; object-fit:contain; }
.km .km-mobile-menu:not([hidden]) { display:grid; padding:16px 24px; gap:4px; border-top:1px solid #d8ccba; background:#fffaf0; }
.km-mobile-menu a { min-height:44px; display:flex; align-items:center; font-weight:700; text-decoration:none; }
.km[data-motion="on"] [data-reveal].km-revealing { animation:km-reveal .7s cubic-bezier(.2,.65,.2,1) both; }
@keyframes km-world-breathe { from {transform:scale(1.01) translateY(0)} to {transform:scale(1.055) translateY(-3px)} }
@keyframes km-reveal { from {opacity:.65;transform:translateY(20px)} to {opacity:1;transform:translateY(0)} }
@media (hover:hover) and (pointer:fine) {
 .km[data-motion="on"] .km-card:hover { transform:translateY(-6px); box-shadow:0 16px 28px -18px #5e3d8270; }
 .km[data-motion="on"] .km-card:hover .km-artwork > img { transform:scale(1.055); }
 .km[data-motion="on"] .km-agecard:hover { transform:translateY(-4px); box-shadow:0 12px 24px -16px #573c64a0; }
 .km[data-motion="on"] .km-deptcard:hover { transform:translateX(4px); }
}
@container km (max-width:1023px) {
 .km[data-direction="02"] .km-hero__grid { grid-template-columns:1fr; gap:30px; }
 .km[data-direction="02"] .km-hero { padding-block:40px 40px; }
 .km-world-stage { width:min(100%,560px); }
 .km[data-direction="02"] .km-story__art { min-height:400px; }
}
@container km (max-width:639px) {
 .km[data-direction="02"] .km-hero { padding-block:26px 36px; }
 .km[data-direction="02"] .km-hero__copy { gap:20px; }
 .km[data-direction="02"] .km-hero__grid { gap:24px; }
 .km-world-frame { border-radius:46% 46% 18px 18px; }
 .km-world-label { right:0; top:10px; font-size:14px; padding:13px 14px; }
 .km-world-caption { font-size:14px; gap:10px; padding-top:14px; }
 .km-world-switcher button { font-size:14px; }
 .km[data-direction="02"] .km-story__copy { padding:28px 22px; }
 .km[data-direction="02"] .km-story__art { min-height:300px; }
 .km .km-hero__art { order:0; max-width:100%; }
 .km .km-agecard { padding-bottom:100px; }
 .km .km-agecard__world { width:100%; height:80px; top:auto; bottom:0; right:0; border-radius:0; transform:none; }
 .km .km-agecard__text { padding-right:0; max-width:100%; margin-top:14px; }
 .km .km-continue__art { min-height:240px; }
 .km .km-world-details .km-thumb span { display:block; font-size:10px; left:3px; bottom:3px; padding:2px 4px; }
 .km-art-dialog__bar { padding:12px; }
 .km-art-dialog__bar h2 { font-size:15px; }
}
@media (prefers-reduced-motion:reduce) {
 .km .km-world-frame { transform:none!important; }
 .km *, .km *::before,.km *::after { animation:none!important;transition:none!important; }
}