@import url("./tokens.css?v=soft-gradients-3");
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0px; background: var(--color-background-canvas); color: var(--color-text); font: 1rem/1.55 var(--font-body); }
button, input, textarea, select { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: var(--color-action); }
img { max-width: 100%; display: block; }
h1, h2, h3, p { margin-top: 0px; }
h1, h2, h3 { line-height: 1.16; }
h1, h2, h3, .brand { font-family: var(--font-title); }
h1 { font-size: clamp(2.5rem, 4vw, 4rem); letter-spacing: -0.055em; line-height: 1.06; }
h2 { font-size: 1.45rem; letter-spacing: -0.025em; }
h3 { font-size: 1.12rem; }
p { margin-bottom: 1rem; }
small, .meta { font-size: 0.875rem; color: var(--color-text-muted); }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
button:disabled { opacity: 0.45; cursor: not-allowed; }
button[aria-busy="true"] { cursor: wait; }
.skip { position: fixed; top: -100px; left: 20px; z-index: 100; background: white; padding: 12px; }
.skip:focus { top: 10px; }
.sidebar { position: fixed; inset: 0px auto 0px 0px; width: 242px; border-right: 1px solid var(--color-border); padding: 32px 22px; background: rgb(247, 242, 232); display: flex; flex-direction: column; z-index: 20; }
.brand { font-size: 1.65rem; letter-spacing: -0.055em; line-height: 1.04; }
.brand small { display: block; font: .78rem/1.5 var(--font-body); letter-spacing: 0.12em; margin-bottom: 8px; color: var(--color-text); }
.brand em { font-style: normal; color: rgb(163, 75, 75); }
.brand-symbol { display: inline-flex; background: var(--color-pink); border-radius: 45% 55%; padding: 9px; transform: rotate(-8deg); margin-bottom: 12px; }
.sidebar .eyebrow { margin: 34px 10px 12px; }
.nav { display: grid; gap: 6px; }
.nav a { display: flex; align-items: center; gap: 12px; border-radius: 12px; padding: 12px 10px; text-decoration: none; color: var(--color-text); font-size: 0.94rem; transition: background var(--duration); }
.nav a:hover { background: rgb(236, 231, 220); }
.nav a[aria-current="page"] { background: var(--color-yellow); font-weight: bold; }
.nav .num { font: .75rem var(--font-code); margin-left: auto; opacity: 0.65; }
.sidebar-bottom { margin-top: auto; padding-top: 32px; }
.sidebar-note { font-size: 0.85rem; border-top: 1px dashed rgb(188, 190, 180); padding-top: 18px; }
.sidebar-bottom .badge { margin-top: 8px; }
.main { margin-left: 242px; padding: 0px 42px 60px; max-width: 1600px; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 23px 0px; border-bottom: 1px solid var(--color-border); font-size: 0.9rem; }
.topbar .top-label { display: flex; align-items: center; gap: 10px; }
.icon { width: 21px; height: 21px; flex-shrink: 0; }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.between { justify-content: space-between; }
.stack { display: grid; gap: 16px; }
.eyebrow { font-size: 0.75rem; letter-spacing: 0.13em; text-transform: uppercase; font-weight: bold; color: var(--color-text-muted); }
.mobile-menu { display: none; }
.hero { display: grid; grid-template-columns: 1.3fr 1fr; align-items: center; gap: 28px; padding: 34px 0px 28px; }
.hero h1 { margin-bottom: 15px; }
.hero h1 span { display: block; color: var(--color-action); }
.hero p { max-width: 480px; color: var(--color-text-muted); }
.hero-art { position: relative; background: rgb(255, 255, 255); border-radius: 50% 44% 40% 47%; padding: 10px; transform: rotate(2deg); max-width: 370px; justify-self: end; box-shadow: var(--shadow-soft); }
.hero-art img { border-radius: 40%; width: 100%; aspect-ratio: 1.5 / 1; object-fit: contain; }
.hero-sticker { position: absolute; bottom: -8px; left: -20px; background: var(--color-yellow); padding: 9px 17px; border-radius: 7px; transform: rotate(-7deg); font-size: 0.85rem; font-weight: bold; }
.section-intro { margin: 30px 0px 24px; display: flex; justify-content: space-between; align-items: end; gap: 20px; }
.section-intro h1 { font-size: 2.8rem; margin-bottom: 12px; }
.section-intro p { color: var(--color-text-muted); margin-bottom: 0px; max-width: 640px; }
.catalog-grid { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 22px; }
.specimen { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-soft); min-width: 0px; }
.specimen.wide { grid-column: 1 / -1; }
.specimen-head { padding: 21px 24px 17px; border-bottom: 1px dashed var(--color-border); }
.component-id { font: .75rem var(--font-code); color: var(--color-text-muted); display: block; margin-bottom: 8px; }
.specimen-head h2 { margin-bottom: 7px; }
.specimen-head p { font-size: 0.875rem; color: var(--color-text-muted); margin: 0px; }
.specimen-body { padding: 24px; }
.palette { display: grid; grid-template-columns: repeat(8, minmax(0px, 1fr)); gap: 12px; }
.swatch { min-width: 0px; }
.swatch-color { height: 88px; border-radius: 18px 18px 6px 6px; border: 1px solid rgba(38, 59, 70, 0.07); display: flex; align-items: end; padding: 10px; }
.swatch-color .icon { opacity: 0.8; }
.swatch strong { display: block; font-size: 0.8rem; margin-top: 10px; }
.swatch code { font-size: 0.72rem; color: var(--color-text-muted); }
code, pre { font-family: var(--font-code); }
.code-panel { background: rgb(242, 240, 232); padding: 16px; border-radius: 12px; overflow: auto; font-size: 0.85rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.type-example { border-bottom: 1px solid rgb(234, 232, 223); padding: 12px 0px; display: flex; align-items: baseline; gap: 20px; }
.type-example span:first-child { font-size: 0.75rem; min-width: 70px; color: var(--color-text-muted); }
.type-example:last-child { border: 0px; }
.title-type { font-family: var(--font-title); font-size: 2.15rem; letter-spacing: -0.045em; }
.spacing { display: grid; gap: 10px; }
.space-row { display: flex; align-items: center; gap: 14px; font-size: 0.875rem; }
.space-row code { min-width: 58px; }
.space-bar { height: 12px; background: var(--color-blue); border-radius: 3px; }
.shape-row { display: flex; gap: 16px; flex-wrap: wrap; }
.shape { width: 68px; height: 68px; background: var(--color-pink); display: grid; place-items: center; font-size: 0.8rem; }
.icon-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.icon-sample { text-align: center; padding: 12px 0px; border-radius: 12px; background: rgb(247, 244, 236); }
.icon-sample .icon { width: 26px; height: 26px; }
.icon-sample small { display: block; margin-top: 8px; font-size: 0.72rem; }
.reference-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.reference-item { border-radius: 15px; border: 1px solid var(--color-border); overflow: hidden; background: rgb(255, 255, 255); }
.reference-item img { aspect-ratio: 1.25 / 1; object-fit: contain; }
.reference-item p { font-size: 0.85rem; padding: 10px; margin: 0px; }
.reference-note { margin-top: 20px; color: var(--color-text-muted); font-size: 0.9rem; }
.btn { border: 1px solid transparent; min-height: var(--control-height); padding: 10px 18px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: var(--radius-pill); font-weight: 700; line-height: 1.3; transition: background var(--duration),transform var(--duration),box-shadow var(--duration); text-align: center; max-width: 100%; overflow-wrap: anywhere; }
.btn:hover:not(:disabled) { transform: translateY(-2px); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn-primary { background: var(--color-action); color: white; }
.btn-primary:hover { background: var(--color-action-hover); }
.btn-secondary { background: var(--color-yellow); color: var(--color-text); border-color: rgb(219, 198, 144); }
.btn-secondary:hover { background: rgb(255, 223, 160); }
.btn-quiet { background: transparent; color: var(--color-action); border-color: var(--color-border); }
.btn-quiet:hover { background: var(--color-info-soft); }
.btn-danger { background: var(--color-error); color: white; }
.btn-danger:hover { background: rgb(117, 32, 43); }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--color-border); border-radius: 50%; width: 44px; height: 44px; flex-shrink: 0; color: var(--color-text); }
.icon-btn:hover { background: var(--color-yellow); }
.favorite[aria-pressed="true"] { background: var(--color-pink); border-color: rgb(212, 119, 121); color: rgb(125, 42, 53); }
.favorite[aria-pressed="true"] svg { fill: currentcolor; }
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 0.75rem; font-weight: 700; padding: 5px 10px; border-radius: 99px; line-height: 1.35; color: var(--color-text); }
.tone-blue { background: var(--color-blue); }
.tone-pink { background: var(--color-pink); }
.tone-coral { background: var(--color-coral); }
.tone-yellow { background: var(--color-yellow); }
.tone-green { background: var(--color-green); }
.tone-peach { background: var(--color-peach); }
.tone-lilac { background: var(--color-lilac); }
.tone-muted { background: var(--color-surface-muted); }
.field { display: grid; gap: 7px; min-width: 0px; }
.field label { font-size: 0.875rem; font-weight: 700; }
.field input, .field textarea, .field select, select { width: 100%; min-width: 0px; border: 1px solid rgb(158, 167, 167); background: var(--color-surface); padding: 11px 13px; border-radius: 12px; color: var(--color-text); min-height: var(--control-height); }
.field textarea { resize: vertical; min-height: 105px; }
.field input:disabled { background: rgb(236, 235, 229); color: rgb(108, 115, 117); }
.field input[aria-invalid="true"] { border: 2px solid var(--color-error); }
.field small { font-size: 0.8rem; }
.error-text { color: var(--color-error) !important; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.control { display: flex; align-items: center; gap: 10px; font-size: 0.94rem; cursor: pointer; }
.control input { width: 20px; height: 20px; accent-color: var(--color-action); }
.switch input { appearance: none; width: 45px; height: 26px; background: rgb(154, 171, 174); border-radius: 99px; position: relative; cursor: pointer; border: 1px solid rgb(119, 138, 143); }
.switch input::after { content: ""; position: absolute; width: 20px; height: 20px; top: 2px; left: 2px; border-radius: 50%; background: white; transition: transform var(--duration); }
.switch input:checked { background: var(--color-action); }
.switch input:checked::after { transform: translateX(18px); }
input[type="range"] { accent-color: var(--color-action); width: 100%; min-height: 32px; }
.avatar { width: 46px; height: 46px; border: 3px solid var(--color-surface); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; overflow: hidden; flex-shrink: 0; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.large { width: 65px; height: 65px; }
.avatar-group { display: inline-flex; padding-left: 10px; }
.avatar-group .avatar { margin-left: -10px; }
.alert { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border: 1px solid transparent; border-radius: 14px; font-size: 0.9rem; }
.alert .icon { margin-top: 2px; }
.alert p { margin: 5px 0px 0px; font-size: 0.875rem; }
.alert-info { background: var(--color-info-soft); color: var(--color-info); }
.alert-success { background: var(--color-success-soft); color: var(--color-success); }
.alert-warning { background: var(--color-warning-soft); color: var(--color-warning); }
.alert-error { background: var(--color-error-soft); color: var(--color-error); }
.tooltip-wrap { position: relative; display: inline-flex; }
.tooltip { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); width: max-content; max-width: 230px; padding: 8px 12px; background: var(--color-text); color: white; font-size: 0.8rem; border-radius: 8px; opacity: 0; pointer-events: none; z-index: 3; }
.tooltip-wrap:hover .tooltip, .tooltip-wrap:focus-within .tooltip { opacity: 1; }
.dropdown { position: relative; display: inline-block; }
.dropdown summary { list-style: none; }
.dropdown summary::-webkit-details-marker { display: none; }
.dropdown-menu { position: absolute; top: calc(100% + 8px); left: 0px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; padding: 6px; box-shadow: var(--shadow-raised); z-index: 4; width: 230px; }
.dropdown-menu button { width: 100%; text-align: left; border: 0px; background: none; padding: 12px; border-radius: 8px; color: var(--color-text); }
.dropdown-menu button:hover { background: var(--color-yellow); }
.accordion { border-bottom: 1px solid var(--color-border); }
.accordion summary { cursor: pointer; padding: 15px 0px; font-weight: bold; }
.accordion p { font-size: 0.9rem; color: var(--color-text-muted); }
.tabs { display: flex; gap: 4px; background: var(--color-surface-muted); padding: 5px; border-radius: 14px; overflow: auto; }
.tabs button { background: transparent; border: 0px; padding: 10px 15px; border-radius: 10px; color: var(--color-text); white-space: nowrap; min-height: 44px; }
.tabs button[aria-selected="true"] { background: var(--color-surface); box-shadow: rgba(38, 59, 70, 0.07) 0px 2px 5px; font-weight: bold; }
.tab-panel { padding: 20px 3px; min-height: 105px; }
.breadcrumbs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.9rem; }
.pagination { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pagination button { border: 1px solid var(--color-border); background: white; border-radius: 10px; min-width: 44px; min-height: 44px; color: var(--color-text); }
.pagination button[aria-current="page"] { background: var(--color-action); color: white; }
.state-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.state-grid .state { display: grid; gap: 12px; justify-items: start; }
.state-label { font-size: 0.75rem; color: var(--color-text-muted); }
.demo-hover { background: var(--color-action-hover); transform: translateY(-2px); }
.demo-focus { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.spinner { width: 18px; height: 18px; border-width: 2px; border-style: solid; border-color: currentcolor transparent currentcolor currentcolor; border-image: none; border-radius: 50%; animation: 0.8s linear 0s infinite normal none running spin; }
.skeleton { background: linear-gradient(100deg, rgb(235, 232, 223) 30%, rgb(248, 245, 237) 45%, rgb(235, 232, 223) 60%) 0% 0% / 250% 100%; animation: 1.7s ease 0s infinite normal none running shimmer; border-radius: 10px; height: 16px; }
.skeleton.cover { height: 155px; margin-bottom: 18px; }
.empty-state { text-align: center; padding: 18px; }
.empty-icon { width: 66px; height: 66px; display: inline-grid; place-items: center; border-radius: 22px; margin-bottom: 18px; }
.empty-icon .icon { width: 30px; height: 30px; }
.empty-state p { color: var(--color-text-muted); font-size: 0.9rem; }
.memory-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 20px; overflow: hidden; min-width: 0px; }
.media-cover { width: 100%; position: relative; border: 0px; padding: 0px; display: block; }
.media-cover img { width: 100%; aspect-ratio: 1.4 / 1; object-fit: contain; background: rgb(255, 255, 255); }
.media-icon { position: absolute; bottom: 12px; right: 12px; background: var(--color-surface); border-radius: 50%; width: 40px; height: 40px; display: grid; place-items: center; box-shadow: rgba(38, 59, 70, 0.125) 0px 2px 10px; }
.memory-copy { padding: 16px; }
.memory-copy h3 { margin: 14px 0px 8px; }
.memory-copy p { margin: 0px; }
.two-cards, .three-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.three-cards { grid-template-columns: repeat(3, 1fr); }
.album { display: grid; grid-template-columns: 1fr 1fr; border-radius: 20px; overflow: hidden; border: 1px solid rgb(212, 198, 152); }
.album > img { height: 100%; width: 100%; object-fit: contain; background: white; max-height: 285px; }
.album > div { padding: 22px; display: flex; flex-direction: column; align-items: start; gap: 12px; }
.album p, .album h3 { margin: 0px; }
.recado { border-radius: 18px; border: 1px solid var(--color-border); padding: 20px; }
.recado .bubble { padding: 18px; background: rgb(255, 240, 233); border-radius: 4px 18px 18px; margin-top: 16px; }
.recado .bubble p { margin: 0px; }
.timeline { border-left: 2px dashed rgb(165, 189, 193); margin-left: 10px; padding-left: 25px; }
.timeline article { position: relative; margin-bottom: 22px; }
.timeline article::before { content: ""; position: absolute; left: -33px; top: 4px; background: var(--color-blue); border: 3px solid white; width: 12px; height: 12px; border-radius: 50%; }
.timeline h3 { margin-bottom: 5px; }
.upload-zone { border: 2px dashed rgb(138, 171, 186); background: rgb(242, 248, 250); border-radius: 18px; text-align: center; padding: 22px; }
.upload-zone label { cursor: pointer; display: block; }
.upload-zone .icon { width: 30px; height: 30px; margin: 0px auto 10px; }
.upload-zone strong { display: block; }
.upload-zone input { display: block; margin: 16px auto 0px; max-width: 100%; font-size: 0.8rem; }
.upload-zone.dragover { background: var(--color-yellow); }
.file-row { display: grid; grid-template-columns: 35px 1fr auto; gap: 10px; align-items: start; border: 1px solid var(--color-border); padding: 12px; border-radius: 12px; margin-top: 12px; }
.file-row .file-name { overflow-wrap: anywhere; font-size: 0.9rem; font-weight: bold; }
.file-row progress { width: 100%; height: 8px; accent-color: var(--color-action); }
.file-row small { font-size: 0.75rem; }
.recorder { text-align: center; padding: 20px; border-radius: 18px; background: rgb(248, 238, 233); }
.record-time { font-size: 2rem; font-family: var(--font-code); display: block; margin: 14px; }
.record-status { font-size: 0.9rem; color: var(--color-text-muted); }
.record-dot { display: inline-block; border-radius: 50%; width: 9px; height: 9px; background: var(--color-error); margin-right: 7px; }
.player { background: var(--color-info-soft); border-radius: 16px; padding: 16px; display: flex; align-items: center; gap: 16px; }
.player .progress-area { flex: 1 1 0%; }
.player input { width: 100%; }
.story-card { border-radius: 18px; border: 1px solid var(--color-border); overflow: hidden; background: var(--color-green); }
.story-card .cover { position: relative; }
.story-card img { width: 100%; aspect-ratio: 1.7 / 1; object-fit: contain; background: white; }
.story-card .copy { padding: 20px; }
.story-card .copy p { font-size: 0.9rem; }
.story-card .copy .badge { margin-bottom: 14px; }
.character-message { display: grid; grid-template-columns: 130px 1fr; gap: 20px; align-items: center; background: var(--color-yellow); border-radius: 22px; padding: 20px; }
.character-message img { border-radius: 50%; width: 130px; height: 100px; object-fit: cover; }
.character-message h3 { font-size: 1.5rem; margin-bottom: 8px; }
.character-message p { margin: 0px; }
.discovery { padding: 22px; border-radius: 20px; background: var(--color-lilac); }
.discovery > .icon { width: 32px; height: 32px; margin-bottom: 15px; }
.filter-row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.review-box { display: flex; gap: 18px; align-items: center; background: rgb(246, 244, 235); border-radius: 18px; padding: 18px; }
.review-box img { width: 100px; height: 120px; object-fit: contain; border-radius: 12px; background: white; }
.review-box .review-copy { flex: 1 1 0%; }
.review-box .row { margin-top: 16px; }
.review-box h3 { margin-bottom: 8px; }
.storage { height: 14px; width: 100%; accent-color: var(--color-action); }
.footnote { font-size: 0.8rem; color: var(--color-text-muted); margin: 18px 0px 0px; }
.catalog-footer { margin-top: 35px; border-top: 1px dashed var(--color-border); padding-top: 18px; font-size: 0.8rem; display: flex; justify-content: space-between; gap: 15px; flex-wrap: wrap; }
.toast-region { position: fixed; bottom: 24px; right: 24px; z-index: 100; display: grid; gap: 10px; max-width: min(420px, -32px + 100vw); }
.toast { padding: 15px 20px; background: var(--color-text); color: white; border-radius: 14px; box-shadow: var(--shadow-raised); display: flex; gap: 12px; align-items: center; animation: 0.2s ease-out 0s 1 normal none running enter; }
.toast .icon-btn { color: white; border-color: rgba(255, 255, 255, 0.25); width: 32px; height: 32px; }
.toast span { flex: 1 1 0%; }
.modal { border: 1px solid var(--color-border); border-radius: 24px; background: var(--color-surface); color: var(--color-text); padding: 0px; max-width: min(650px, -32px + 100vw); width: 650px; max-height: 90dvh; box-shadow: var(--shadow-raised); }
.modal::backdrop { background: rgba(38, 59, 70, 0.37); backdrop-filter: blur(3px); }
.modal[open] { animation: 0.2s ease-out 0s 1 normal none running enter; }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 22px 24px; border-bottom: 1px solid var(--color-border); gap: 15px; }
.modal-header h2 { margin: 0px; }
.modal-body { padding: 24px; }
.modal-footer { padding: 18px 24px; border-top: 1px solid var(--color-border); display: flex; justify-content: end; gap: 10px; flex-wrap: wrap; }
.modal.drawer { height: 100dvh; max-height: 100dvh; max-width: min(440px, 100vw); margin: 0px 0px 0px auto; border-radius: 24px 0px 0px 24px; }
.lightbox-image { height: 50dvh; width: 100%; object-fit: contain; background: white; border-radius: 14px; }
.muted { color: var(--color-text-muted); }
.page-enter { animation: 0.25s ease-out 0s 1 normal none running enter; }
.stat-chip { padding: 10px 15px; border: 1px solid var(--color-border); border-radius: 99px; font-size: 0.8rem; white-space: nowrap; }
.frame-label { display: block; margin-bottom: 14px; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; }
.mini-card { padding: 18px; border: 1px solid var(--color-border); border-radius: 16px; }
.no-results { padding: 20px; color: var(--color-text-muted); grid-column: 1 / -1; }
.catalog-view a { overflow-wrap: anywhere; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border: 0px; }
@keyframes spin { 
  100% { transform: rotate(360deg); }
}
@keyframes shimmer { 
  100% { background-position: -150% 0px; }
}
@keyframes enter { 
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0px); }
}
@media (min-width: 1600px) {
  .main { margin-right: auto; }
}
@media (max-width: 1150px) {
  .sidebar { width: 205px; padding: 28px 16px; }
  .main { margin-left: 205px; padding: 0px 26px 45px; }
  .palette { grid-template-columns: repeat(4, 1fr); }
  .state-grid { grid-template-columns: repeat(3, 1fr); }
  .three-cards { grid-template-columns: 1fr 1fr; }
  .hero-art { max-width: 280px; }
}
@media (max-width: 800px) {
  .sidebar { transform: translateX(-100%); transition: transform 0.2s; width: 242px; box-shadow: var(--shadow-raised); }
  body.nav-open .sidebar { transform: translateX(0px); }
  .main { margin-left: 0px; padding: 0px 22px 40px; }
  .mobile-menu { display: inline-flex; }
  .topbar { padding: 16px 0px; }
  .hero { grid-template-columns: 1.2fr 1fr; gap: 20px; }
  .hero h1 { font-size: 2.8rem; }
  .hero-art { max-width: 270px; }
  .catalog-grid { gap: 16px; }
  .specimen-head, .specimen-body { padding: 18px; }
  .icon-grid { grid-template-columns: repeat(4, 1fr); }
  .field-grid { grid-template-columns: 1fr; }
  .filter-row { grid-template-columns: 1fr 1fr; }
  .filter-row > .field:first-child { grid-column: 1 / -1; }
  .album { grid-template-columns: 1fr; }
  .album > img { max-height: 200px; }
  .character-message { grid-template-columns: 90px 1fr; }
  .character-message img { width: 90px; height: 90px; }
}
@media (max-width: 580px) {
  .main { padding: 0px 16px 35px; }
  .topbar .top-label span { font-size: 0.8rem; }
  .topbar .badge { font-size: 0.7rem; }
  .hero { grid-template-columns: 1fr; padding-top: 28px; gap: 12px; }
  .hero-art { max-width: 270px; justify-self: center; margin: 8px 0px 20px; }
  .hero h1 { font-size: 2.7rem; }
  .hero p { font-size: 0.95rem; }
  .catalog-grid { grid-template-columns: 1fr; }
  .specimen.wide { grid-column: auto; }
  .section-intro { display: block; }
  .section-intro .stat-chip { display: inline-block; margin-top: 15px; }
  .section-intro h1 { font-size: 2.3rem; }
  .palette { grid-template-columns: repeat(4, 1fr); gap: 9px; }
  .swatch-color { height: 62px; }
  .swatch strong { font-size: 0.7rem; }
  .swatch code { font-size: 0.65rem; }
  .two-cards, .three-cards { grid-template-columns: 1fr; }
  .reference-grid { grid-template-columns: 1fr 1fr; }
  .state-grid { grid-template-columns: 1fr 1fr; }
  .filter-row { grid-template-columns: 1fr; }
  .filter-row > .field:first-child { grid-column: auto; }
  .review-box { align-items: start; flex-direction: column; }
  .character-message { grid-template-columns: 1fr; }
  .character-message img { width: 110px; }
  .type-example { gap: 12px; }
  .type-example span:first-child { min-width: 58px; }
  .title-type { font-size: 1.8rem; }
  .modal-body { padding: 18px; }
  .modal-header { padding: 18px; }
  .toast-region { bottom: 15px; right: 15px; }
  .album { grid-template-columns: 1fr 1fr; }
  .album > div { padding: 14px; }
  .album h3 { font-size: 1rem; }
  .topbar { gap: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation: auto ease 0s 1 normal none running none !important; transition: none !important; scroll-behavior: auto !important; }
  .spinner { border-right-color: currentcolor; }
  .btn:hover { transform: none; }
}
.category-chip.selected, .btn[aria-pressed="true"] { background: var(--color-yellow); border-color: rgb(184, 156, 85); color: var(--color-text); }
.file-thumb { width: 35px; height: 40px; object-fit: cover; border-radius: 6px; }
.file-status { display: block; overflow-wrap: anywhere; }
.file-action .btn { font-size: 0.8rem; padding: 8px 10px; }
.file-action .badge { font-size: 0.7rem; }
.specimen-body > fieldset { border: 0px; }
dialog .two-cards { margin-top: 4px; }
dialog .memory-card h3 { font-size: 1rem; }
.file-row progress[hidden], [hidden] { display: none !important; }
.media-cover:focus-visible { outline-offset: -5px; }
.field:has(input:focus-visible), .field:has(textarea:focus-visible) { isolation: isolate; }
body.nav-open::before { content: ""; position: fixed; inset: 0px; background: rgba(38, 59, 70, 0.25); z-index: 15; }
.upload-zone input::file-selector-button { border: 1px solid rgb(158, 167, 167); background: var(--color-surface); border-radius: 9px; padding: 10px; font: inherit; color: var(--color-text); cursor: pointer; margin-right: 10px; }
.upload-zone input:focus-visible { outline-offset: 7px; }
.palette button { border: 1px solid rgba(38, 59, 70, 0.125); }
.reference-item { transform: rotate(-1deg); }
.reference-item:nth-child(2n) { transform: rotate(1deg); }
button.mobile-menu { display: none; }
.hero-art { margin: 0px; }
.sidebar { overflow-y: auto; }
.hero-art img { object-position: center center; }
@media (max-width: 800px) {
  button.mobile-menu { display: inline-flex; }
  .sidebar { visibility: hidden; }
  body.nav-open .sidebar { visibility: visible; }
}
.icon-btn, .gallery-nav, .gallery-thumb { transition: transform var(--duration),background var(--duration),box-shadow var(--duration); }
@media (hover: hover) {
  .btn:hover:not(:disabled), .icon-btn:hover:not(:disabled) { box-shadow: rgba(38, 59, 70, 0.082) 0px 5px 12px; }
  .media-cover:hover .media-icon { transform: scale(1.1); }
}
.media-icon { transition: transform var(--duration); }
.button-pop { animation: button-pop var(--motion-button) ease-out; }
.favorite.button-pop .icon { animation: heart-pop var(--motion-button) ease-out; }
.modal.gallery-modal { width: 800px; max-width: min(800px, -24px + 100vw); }
.gallery-modal .modal-header h2 { font-size: 1.25rem; }
.gallery-modal .modal-body { padding: 18px 24px; }
.gallery-stage { position: relative; overflow: hidden; border-radius: 18px; background: white; touch-action: pan-y pinch-zoom; }
.gallery-stage .lightbox-image { height: 40dvh; min-height: 150px; max-height: 440px; user-select: none; }
.gallery-type { position: absolute; left: 12px; bottom: 12px; }
.gallery-controls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; margin: 18px 0px; }
.gallery-nav { border: 1px solid rgb(181, 188, 202); border-radius: 18px; min-height: 62px; padding: 10px 16px; background: var(--color-blue); color: var(--color-text); display: flex; align-items: center; justify-content: center; gap: 12px; font-weight: bold; font-size: 1rem; }
.gallery-next { background: var(--color-yellow); border-color: rgb(206, 189, 135); }
.gallery-nav:hover { box-shadow: var(--shadow-soft); transform: translateY(-2px); }
.gallery-arrow { display: grid; place-items: center; background: rgba(255, 255, 255, 0.5); border-radius: 50%; width: 36px; height: 36px; flex-shrink: 0; }
.gallery-previous .icon { transform: rotate(90deg); }
.gallery-next .icon { transform: rotate(-90deg); }
.gallery-next .gallery-arrow { order: 2; }
.gallery-position { text-align: center; min-width: 64px; }
.gallery-position strong { font-size: 1.15rem; display: block; }
.gallery-position span { font-size: 0.75rem; display: block; color: var(--color-text-muted); }
.gallery-thumbnails { display: flex; gap: 10px; overflow-x: auto; padding: 6px 4px 12px; scroll-snap-type: x; }
.gallery-thumb { border: 3px solid transparent; position: relative; border-radius: 14px; background: var(--color-surface-muted); padding: 3px; width: 74px; height: 65px; flex: 0 0 74px; scroll-snap-align: center; }
.gallery-thumb img { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; background: white; }
.gallery-thumb[aria-pressed="true"] { border-color: var(--color-action); box-shadow: 0 0 0 2px var(--color-blue); }
.gallery-thumb span { position: absolute; right: 3px; bottom: 3px; background: var(--color-text); color: white; min-width: 19px; border-radius: 5px; font-size: 0.7rem; }
.gallery-hint { font-size: 0.875rem; text-align: center; color: var(--color-text-muted); margin: 5px 0px 0px; }
.gallery-enter-next { animation: gallery-next var(--motion-gallery) ease-out; }
.gallery-enter-previous { animation: gallery-previous var(--motion-gallery) ease-out; }
@keyframes button-pop { 
  0% { transform: scale(1); }
  40% { transform: scale(0.95); }
  75% { transform: scale(1.035); }
  100% { transform: scale(1); }
}
@keyframes heart-pop { 
  50% { transform: scale(1.18); }
  100% { transform: scale(1); }
}
@keyframes gallery-next { 
  0% { opacity: 0.35; transform: translateX(28px); }
  100% { opacity: 1; transform: translateX(0px); }
}
@keyframes gallery-previous { 
  0% { opacity: 0.35; transform: translateX(-28px); }
  100% { opacity: 1; transform: translateX(0px); }
}
@media (max-width: 580px) {
  .gallery-modal .modal-body { padding: 14px; }
  .gallery-modal .modal-header { padding: 14px; }
  .gallery-controls { gap: 8px; }
  .gallery-nav { gap: 6px; padding: 9px 8px; font-size: 0.875rem; min-height: 58px; border-radius: 14px; }
  .gallery-arrow { width: 26px; height: 26px; }
  .gallery-position { min-width: 52px; }
  .gallery-position strong { font-size: 1rem; }
  .gallery-stage .lightbox-image { height: 34dvh; }
  .gallery-thumb { width: 64px; flex-basis: 64px; height: 58px; }
  .gallery-modal .footnote { font-size: 0.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .button-pop, .favorite.button-pop .icon, .gallery-enter-next, .gallery-enter-previous { animation: auto ease 0s 1 normal none running none !important; }
  .gallery-nav:hover, .media-cover:hover .media-icon { transform: none; }
  .icon-btn, .gallery-nav, .gallery-thumb, .media-icon { transition: none; }
}
body.home-page .sidebar, body.home-page .topbar, body.home-page .catalog-footer { display: none; }
body.home-page > .main { margin: 0px; padding: 0px; max-width: none; }
body.home-page #catalog { outline: none; }
.oli-home { position: relative; isolation: isolate; min-height: 100dvh; overflow: hidden; background: var(--color-background-canvas); }
.home-header, .home-content, .home-footer { position: relative; z-index: 2; max-width: 1180px; margin: auto; }
.home-header { padding: 24px 30px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.home-brand { display: flex; gap: 12px; align-items: center; text-decoration: none; color: var(--color-text); }
.home-brand-mark { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 20px 24px 15px 25px; background: var(--color-yellow); transform: rotate(-7deg); border: 1px solid rgb(223, 206, 154); }
.home-brand-mark .icon { width: 33px; height: 33px; }
.home-brand small { display: block; font-size: 0.65rem; letter-spacing: 0.14em; font-weight: bold; }
.home-brand strong { font-family: var(--font-title); font-size: 1.6rem; letter-spacing: -0.06em; }
.home-brand em { font-style: normal; color: rgb(163, 75, 75); }
.home-header-actions { display: flex; align-items: center; gap: 16px; }
.adult-link { font-size: 0.8rem; color: var(--color-text-muted); display: flex; align-items: center; gap: 7px; text-decoration: none; padding: 8px; }
.adult-link:hover { text-decoration: underline; }
.motion-control { font-size: 0.75rem; min-height: 40px; padding: 8px 12px; background: rgba(255, 249, 238, 0.88); }
.home-content { padding: 0px 30px; }
.home-welcome { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; padding: 36px 0px 32px; gap: 25px; }
.welcome-text { position: relative; }
.home-tag { display: inline-block; font-size: 0.8rem; letter-spacing: 0.025em; background: var(--color-yellow); padding: 7px 13px; border-radius: 9px; transform: rotate(-2deg); margin-bottom: 22px; }
.home-welcome h1 { font-size: clamp(3rem, 5.5vw, 5.5rem); letter-spacing: -0.055em; line-height: 1.04; margin-bottom: 22px; }
.home-welcome h1 span { color: var(--color-action); position: relative; }
.home-welcome p { font-size: 1.1rem; color: var(--color-text-muted); line-height: 1.6; }
.welcome-swoosh { width: 125px; height: 11px; background: var(--color-coral); border-radius: 35% 65% 65% 35%; display: block; transform: rotate(-5deg); opacity: 0.8; }
.home-characters { position: relative; margin: 0px; padding: 15px 5px; transform: rotate(2deg); }
.home-characters > img { position: relative; border-radius: 42% 47% 42% 39%; background: white; width: 100%; aspect-ratio: 1.5 / 1; object-fit: contain; box-shadow: rgba(245, 200, 196, 0.275) 0px 14px 0px; }
.character-ring { position: absolute; inset: 0px -12px; background: var(--color-pink); border-radius: 45% 42% 45% 40%; transform: rotate(-9deg); }
.home-characters figcaption { position: absolute; bottom: 0px; right: 13%; background: var(--color-yellow); padding: 10px 24px; font-family: var(--font-title); border-radius: 8px; transform: rotate(-6deg); box-shadow: rgba(219, 190, 101, 0.19) 0px 4px 0px; }
.character-star { position: absolute; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; color: var(--color-action); background: var(--color-yellow); }
.character-star .icon { width: 35px; height: 35px; }
.star-one { top: 3%; left: -6%; transform: rotate(-12deg); }
.star-two { bottom: 10%; right: -5%; background: var(--color-green); transform: rotate(13deg); }
.home-choices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding: 20px 0px 35px; }
.home-choice { position: relative; text-align: left; border: 2px solid rgba(38, 59, 70, 0.15); color: var(--color-text); padding: 25px 21px 20px; border-radius: 26px 28px 23px 29px; display: flex; flex-direction: column; align-items: start; min-height: 255px; transition: transform var(--duration),box-shadow var(--duration); box-shadow: rgba(38, 59, 70, 0.063) 0px 6px 0px; }
.home-choice:nth-child(2n) { border-radius: 29px 23px 28px 26px; }
.choice-top { width: 100%; display: flex; justify-content: space-between; align-items: start; margin-bottom: 25px; }
.choice-icon { display: inline-grid; place-items: center; width: 64px; height: 64px; background: rgba(255, 249, 238, 0.5); border-radius: 23px 25px 19px 26px; transform: rotate(-6deg); }
.choice-icon .icon { width: 41px; height: 41px; stroke-width: 1.7; }
.choice-number { font: .8rem var(--font-code); opacity: 0.6; padding: 6px; }
.home-choice strong { font-family: var(--font-title); font-size: 1.4rem; letter-spacing: -0.035em; line-height: 1.1; margin-bottom: 10px; }
.choice-description { font-size: 0.85rem; line-height: 1.45; }
.choice-label { margin-top: auto; padding-top: 22px; font-size: 0.8rem; font-weight: bold; display: flex; gap: 8px; align-items: center; }
.choice-label .icon { width: 15px; height: 15px; fill: currentcolor; }
.home-choice:hover { transform: translateY(-6px) rotate(-1deg); box-shadow: rgba(38, 59, 70, 0.063) 0px 10px 0px; }
.home-choice:active { transform: translateY(1px) scale(0.98); }
.drawings-story { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; margin: 25px 0px 40px; padding: 32px; border: 1px dashed rgb(202, 185, 151); border-radius: 30px; background: rgba(255, 253, 246, 0.79); }
.drawings-story h2 { font-size: 2.3rem; letter-spacing: -0.04em; }
.drawings-story p { color: var(--color-text-muted); }
.crayon-friends { display: flex; justify-content: center; align-items: center; gap: 3px; }
.crayon-sprite { display: block; background-image: url("assets/turma-rabiscos-v1.png"); background-size: 300% 100%; background-repeat: no-repeat; width: 150px; aspect-ratio: 1 / 1; pointer-events: none; }
.sprite-friend-one { background-position: 0% 50%; transform: rotate(-5deg); }
.sprite-friend-two { background-position: 50% 50%; transform: rotate(4deg); }
.sprite-friend-three { background-position: 100% 50%; transform: rotate(-3deg); }
.home-doodles { position: absolute; inset: 0px; z-index: 0; pointer-events: none; overflow: hidden; }
.home-doodles > .crayon-sprite { position: absolute; opacity: 0.3; }
.sprite-monster { top: 300px; left: -40px; background-position: 0% 50%; width: 155px; animation: 24s ease-in-out 0s infinite alternate none running crayon-wander; }
.sprite-house { top: 90px; right: -30px; background-position: 50% 50%; width: 160px; animation: 28s ease-in-out -9s infinite alternate-reverse none running crayon-wander; }
.sprite-doll { top: 730px; right: 0px; background-position: 100% 50%; width: 135px; animation: 26s ease-in-out -5s infinite alternate none running crayon-wander; }
.home-scribble { position: absolute; display: block; background-image: url("assets/exemplo-1.svg"); background-size: contain; background-repeat: no-repeat; mix-blend-mode: multiply; opacity: 0.2; width: 210px; aspect-ratio: 1 / 1; }
.scribble-one { top: 520px; left: -110px; transform: rotate(15deg); }
.scribble-two { top: 760px; left: 48%; transform: rotate(-30deg); }
.scribble-three { top: 0px; right: 15%; width: 140px; transform: rotate(65deg); }
.crayon-friends .crayon-sprite { animation: 7s ease-in-out 0s infinite normal none running friend-bob; }
.crayon-friends .crayon-sprite:nth-child(2) { animation-delay: -2s; }
.crayon-friends .crayon-sprite:nth-child(3) { animation-delay: -4s; }
.home-footer { padding: 24px 30px; border-top: 1px dashed rgb(207, 199, 182); display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; font-size: 0.8rem; color: var(--color-text-muted); }
.home-footer a { color: var(--color-text-muted); }
.home-modal-intro { margin-bottom: 20px; color: var(--color-text-muted); }
.home-modal-things { display: grid; gap: 16px; }
.home-page .modal { max-width: min(800px, -24px + 100vw); width: 760px; }
.background-paused .home-doodles .crayon-sprite, .background-paused .crayon-friends .crayon-sprite { animation-play-state: paused; }
.home-page .modal-header h2 { font-size: 1.4rem; }
@keyframes crayon-wander { 
  0% { transform: translate(-10px, 0px) rotate(-7deg); }
  50% { transform: translate(40px, -12px) rotate(5deg); }
  100% { transform: translate(85px, 18px) rotate(-3deg); }
}
@keyframes friend-bob { 
  0%, 100% { transform: translateY(0px) rotate(-3deg); }
  50% { transform: translateY(-10px) rotate(4deg); }
}
@media (min-width: 1450px) {
  .sprite-monster { left: calc(50% - 710px); }
  .sprite-house { right: calc(50% - 715px); }
}
@media (max-width: 950px) {
  .home-choices { grid-template-columns: repeat(2, 1fr); }
  .home-choice { min-height: 225px; }
  .drawings-story { grid-template-columns: 1fr 1fr; }
  .crayon-sprite { width: 110px; }
  .home-welcome h1 { font-size: 3.8rem; }
  .home-header-actions { gap: 5px; }
  .adult-link span { max-width: 65px; }
  .motion-control span { max-width: 90px; }
}
@media (max-width: 580px) {
  .home-header { padding: 18px 18px 10px; gap: 8px; }
  .home-brand-mark { width: 40px; height: 40px; border-radius: 15px; }
  .home-brand-mark .icon { width: 26px; height: 26px; }
  .home-brand strong { font-size: 1.2rem; }
  .home-brand small { font-size: 0.55rem; }
  .home-header-actions { gap: 4px; }
  .adult-link { padding: 8px 0px; }
  .adult-link span, .motion-control span { display: none; }
  .motion-control { width: 40px; padding: 8px; min-height: 40px; }
  .home-content { padding: 0px 20px; }
  .home-welcome { grid-template-columns: 1fr; padding: 22px 0px 15px; gap: 28px; }
  .home-welcome h1 { font-size: 3.15rem; }
  .home-welcome p { font-size: 1rem; }
  .home-tag { font-size: 0.7rem; margin-bottom: 16px; }
  .home-characters { max-width: 330px; justify-self: center; width: 90%; margin-bottom: 5px; }
  .home-choices { gap: 12px; padding-top: 20px; }
  .home-choice { padding: 17px 14px; min-height: 230px; border-radius: 22px; }
  .choice-top { margin-bottom: 18px; }
  .choice-icon { width: 54px; height: 54px; border-radius: 18px; }
  .choice-icon .icon { width: 34px; height: 34px; }
  .choice-number { display: none; }
  .home-choice strong { font-size: 1.25rem; overflow-wrap: anywhere; }
  .choice-description { font-size: 0.8rem; }
  .choice-label { padding-top: 15px; }
  .drawings-story { grid-template-columns: 1fr; padding: 25px 20px; gap: 20px; }
  .drawings-story h2 { font-size: 2rem; }
  .crayon-sprite { width: 100px; }
  .sprite-monster { top: 330px; left: -65px; width: 110px; }
  .sprite-house { top: 90px; right: -55px; width: 120px; }
  .sprite-doll { top: 1080px; right: -40px; width: 110px; }
  .home-footer { padding: 20px; display: grid; gap: 10px; }
  .star-one, .star-two { width: 45px; height: 45px; }
  .character-star .icon { width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-doodles .crayon-sprite, .crayon-friends .crayon-sprite { animation: auto ease 0s 1 normal none running none !important; }
  .home-choice:hover, .home-choice:active { transform: none; }
  .home-choice { transition: none; }
}
.crayon-sprite { background-image: url("assets/turma-monstrinhos-v2.png"); background-size: 300% 200%; }
.sprite-friend-one, .sprite-monster { background-position: 0% 0%; }
.sprite-friend-two { background-position: 50% 0%; }
.sprite-friend-three { background-position: 100% 0%; }
.sprite-friend-four { background-position: 0% 100%; }
.sprite-friend-five { background-position: 50% 100%; }
.sprite-friend-six { background-position: 100% 100%; }
.sprite-house { background-position: 50% 100%; }
.sprite-doll { background-position: 100% 100%; }
.crayon-friends { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 4px; justify-items: center; }
.crayon-friends .crayon-sprite { width: 100%; max-width: 150px; }
.crayon-friends .crayon-sprite:nth-child(4) { animation-delay: -1s; }
.crayon-friends .crayon-sprite:nth-child(5) { animation-delay: -3s; }
.crayon-friends .crayon-sprite:nth-child(6) { animation-delay: -5s; }
.sprite-original-monster, .sprite-original-house, .sprite-original-doll, .home-doodles .sprite-monster, .home-doodles .sprite-house, .home-doodles .sprite-doll { background-image: url("assets/turma-rabiscos-v1.png"); background-size: 300% 100%; }
.sprite-original-monster, .home-doodles .sprite-monster { background-position: 0% 50%; }
.sprite-original-house, .home-doodles .sprite-house { background-position: 50% 50%; }
.sprite-original-doll, .home-doodles .sprite-doll { background-position: 100% 50%; }
.crayon-friends .crayon-sprite:nth-child(7) { animation-delay: -2s; }
.crayon-friends .crayon-sprite:nth-child(8) { animation-delay: -4s; }
.crayon-friends .crayon-sprite:nth-child(9) { animation-delay: -6s; }
.home-choices { grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 22px; }
.home-choice { padding: 18px; min-height: 0px; overflow: hidden; }
.choice-picture { position: relative; display: block; width: 100%; height: 230px; border-radius: 23px 27px 20px 25px; background: rgba(255, 253, 246, 0.61); overflow: hidden; }
.choice-picture > img { width: 100%; height: 100%; object-fit: contain; }
.picture-aventuras > img { mix-blend-mode: multiply; }
.picture-play, .choice-go { display: grid; place-items: center; background: var(--color-text); color: rgb(255, 253, 246); border-radius: 50%; width: 56px; height: 56px; box-shadow: rgba(38, 59, 70, 0.125) 0px 4px 0px; }
.picture-play { position: absolute; bottom: 14px; right: 14px; }
.picture-play .icon { width: 25px; height: 25px; fill: currentcolor; }
.choice-caption { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 18px 4px 3px; }
.choice-caption strong { margin: 0px; font-size: 1.55rem; }
.choice-go { width: 42px; height: 42px; flex-shrink: 0; }
.choice-go .icon { width: 22px; height: 22px; }
.picture-recados { display: flex; align-items: center; justify-content: center; gap: 16px; background: rgb(255, 244, 237); }
.family-photo-slot { display: grid; place-items: center; background: var(--color-pink); border: 5px solid rgb(255, 253, 246); width: 110px; height: 130px; border-radius: 40% 45% 38% 42%; transform: rotate(-8deg); }
.family-photo-slot:nth-child(2) { background: var(--color-yellow); transform: rotate(8deg); }
.family-photo-slot .icon { width: 65px; height: 65px; color: rgb(163, 75, 75); stroke-width: 1.4; }
.memory-print { position: absolute; left: 10%; top: 7%; width: 66%; height: 84%; padding: 9px 9px 24px; background: rgb(255, 253, 246); box-shadow: rgba(38, 59, 70, 0.125) 0px 5px 10px; transform: rotate(-8deg); }
.memory-print img { height: 100%; width: 100%; object-fit: cover; border-radius: 5px; }
.memory-print.small-print { width: 37%; height: 60%; left: auto; right: 5%; top: 30%; transform: rotate(12deg); }
.picture-descobertas > img { object-fit: contain; transform: rotate(-5deg); width: 75%; mix-blend-mode: multiply; }
.picture-descobertas .crayon-sprite { position: absolute; right: 0px; bottom: 0px; width: 43%; }
.home-choice:focus-visible { outline: 4px solid var(--color-action); outline-offset: 5px; }
@media (max-width: 580px) {
  .home-choices { gap: 14px; }
  .home-choice { padding: 10px; }
  .choice-picture { height: 155px; }
  .choice-caption { gap: 6px; padding-top: 14px; }
  .choice-caption strong { font-size: 1.1rem; }
  .choice-go { width: 32px; height: 32px; }
  .choice-go .icon { width: 18px; height: 18px; }
  .picture-play { width: 42px; height: 42px; right: 8px; bottom: 8px; }
  .family-photo-slot { width: 58px; height: 78px; border-width: 3px; }
  .family-photo-slot .icon { width: 38px; height: 38px; }
  .picture-recados { gap: 5px; }
}
@media (max-width: 350px) {
  .home-choices { grid-template-columns: 1fr; }
  .choice-picture { height: 180px; }
}
.youtube-cover { display: flex; align-items: center; justify-content: center; min-height: 200px; }
.youtube-cover > .crayon-sprite { width: 180px; }
.youtube-player-slot { display: grid; place-items: center; gap: 16px; background: var(--color-blue); padding: 20px; border-radius: 20px; min-height: 240px; }
.youtube-player-slot iframe { display: block; width: 100%; min-height: 220px; aspect-ratio: 16 / 9; border: 0px; border-radius: 12px; }
.youtube-player-slot:has(iframe) { padding: 0px; background: rgb(0, 0, 0); }
.youtube-cover > .youtube-thumbnail { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.youtube-cover:has(.youtube-thumbnail) { min-height: 0px; aspect-ratio: 16 / 9; overflow: hidden; }
.gallery-home-row { display: flex; justify-content: center; margin: 15px 0px 0px; }
.gallery-home-row .icon { width: 30px; height: 30px; }
.gallery-home-row .btn { min-height: 58px; }
.family-video { display: block; width: 100%; max-height: 65dvh; border-radius: 18px; background: rgb(22, 36, 46); }
.gallery-modal .gallery-stage .lightbox-image { object-fit: contain; }
.gift-intro { margin: 0px 0px 32px; border: 2px dashed rgb(212, 139, 125); border-radius: 28px; background: rgb(255, 242, 217); padding: 18px; text-align: center; }
.gift-button { border: 0px; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 16px; width: 100%; min-height: 90px; color: var(--color-text); font: inherit; }
.gift-button strong { font-size: 1.4rem; }
.gift-button > span:last-child { font-size: 0.95rem; }
.gift-box { font-size: 3.5rem; display: inline-block; transition: transform 0.2s; }
.gift-button:hover .gift-box { transform: rotate(-8deg) scale(1.12); }
.gift-reveal:not([hidden]) { display: flex; align-items: center; justify-content: center; gap: 14px; animation: 0.45s ease-out 0s 1 normal none running gift-appear; }
.gift-reveal .crayon-sprite { width: 110px; flex-shrink: 0; }
.gift-reveal h2 { font-size: 1.7rem; margin: 0px 0px 10px; }
.gift-reveal p { margin: 0px; }
.gift-unwrapped { border-style: solid; background: rgb(239, 244, 223); }
.picture-travel > svg { width: 100%; height: 100%; }
.picture-travel .crayon-sprite { position: absolute; width: 90px; right: 2%; bottom: 0px; }
.picture-piano { background: rgb(255, 241, 223); display: flex; align-items: flex-end; justify-content: center; }
.mini-piano { display: flex; width: 85%; height: 95px; gap: 5px; transform: rotate(-4deg); margin-bottom: 14px; }
.mini-piano i { background: rgb(255, 253, 245); border: 3px solid rgb(51, 75, 80); border-radius: 8px 8px 14px 14px; flex: 1 1 0%; }
.mini-piano i:nth-child(2n) { background: rgb(245, 200, 196); }
.picture-piano .crayon-sprite { position: absolute; width: 140px; bottom: 55px; left: 15%; }
.music-doodle { position: absolute; right: 12%; top: 12%; font-size: 2.6rem; color: rgb(87, 118, 148); transform: rotate(14deg); }
.monster-button { border: 0px; padding: 0px; background: transparent; cursor: pointer; border-radius: 25px; min-width: 0px; transition: background 0.2s, transform 0.2s; }
.monster-button > .crayon-sprite { width: 100%; animation: auto ease 0s 1 normal none running none; pointer-events: none; }
.monster-button:hover { background: rgba(245, 200, 196, 0.25); transform: translateY(-4px); }
.monster-button:focus-visible, .piano-key:focus-visible, .country-choice:focus-visible, .travel-pin:focus-visible, .gift-button:focus-visible { outline: rgb(38, 91, 100) solid 4px; outline-offset: 4px; }
.monster-cheer { animation: 0.9s ease-in-out 0s 1 normal none running monster-cheer !important; }
.travel-heading { display: flex; align-items: center; gap: 18px; }
.travel-heading .crayon-sprite { width: 90px; flex-shrink: 0; }
.travel-map { position: relative; aspect-ratio: 2 / 1; background: rgb(213, 234, 244); border: 3px solid rgb(87, 124, 131); border-radius: 24px; overflow: hidden; margin: 20px 3px; }
.travel-map.europe-view { aspect-ratio: 55 / 37; }
.travel-map > svg { display: block; width: 100%; height: 100%; }
.travel-map path { fill: rgb(197, 219, 169); stroke: rgb(105, 131, 106); stroke-width: 0.28; stroke-linejoin: round; }
.travel-pin { position: absolute; transform: translate(-50%, -50%); border: 2px solid rgb(255, 253, 246); border-radius: 50% 50% 50% 6%; background: rgb(179, 77, 77); color: white; width: 30px; height: 30px; padding: 4px; cursor: pointer; box-shadow: rgba(41, 77, 77, 0.2) 0px 2px 3px; transition: scale 0.15s; z-index: 1; }
.travel-pin .icon { width: 18px; height: 18px; }
.travel-pin:hover, .travel-pin:focus-visible { scale: 1.2; z-index: 2; }
.map-view-buttons { flex-wrap: wrap; }
.map-hint { color: rgb(70, 91, 95); font-size: 0.95rem; }
.country-choices { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 10px; }
.country-choice { display: flex; align-items: center; gap: 8px; min-height: 76px; padding: 8px; border: 2px solid rgb(180, 201, 197); border-radius: 18px; background: rgb(255, 253, 246); color: rgb(37, 60, 69); cursor: pointer; font: inherit; text-align: left; transition: background 0.2s; }
.country-choice:hover { background: rgb(255, 240, 202); }
.country-choice .crayon-sprite { width: 54px; flex-shrink: 0; }
.country-choice strong { overflow-wrap: anywhere; }
.trip-empty { text-align: center; padding: 18px; }
.trip-empty > .crayon-sprite { width: 190px; margin: auto; }
.trip-empty h3 { font-size: 1.8rem; }
.trip-empty p { max-width: 440px; margin: 14px auto; }
.monster-piano { display: grid; grid-template-columns: repeat(6, minmax(0px, 1fr)); gap: 8px; padding: 18px 4px; }
.piano-key { min-width: 0px; min-height: 230px; border-width: 3px 3px 8px; border-style: solid; border-color: rgb(83, 107, 112); border-image: none; border-radius: 24px 24px 18px 18px; background: rgb(255, 237, 181); color: rgb(37, 60, 69); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 12px 4px; cursor: pointer; font: inherit; transition: transform 0.15s, background 0.15s; }
.piano-key .crayon-sprite { width: 100%; max-width: 150px; margin: auto 0px; }
.piano-key > span:nth-child(2) { font-size: 1.3rem; font-weight: 800; }
.piano-key kbd { font-size: 0.8rem; border: 1px solid rgb(83, 107, 112); border-radius: 5px; padding: 1px 6px; margin-top: 8px; opacity: 0.7; }
.piano-tone-1 { background: rgb(245, 200, 196); }
.piano-tone-2 { background: rgb(197, 219, 169); }
.piano-tone-3 { background: rgb(158, 204, 240); }
.piano-tone-4 { background: rgb(215, 199, 232); }
.piano-tone-5 { background: rgb(255, 190, 152); }
.piano-key:hover { transform: translateY(-4px); }
.piano-key:active { transform: translateY(4px); }
.piano-key.is-singing { background: rgb(255, 253, 246); animation: 0.6s ease 0s 1 normal none running piano-sing; }
.piano-key.is-singing .crayon-sprite { animation: 0.6s ease 0s 1 normal none running monster-cheer; }
.piano-tools { flex-wrap: wrap; }
@keyframes monster-cheer { 
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  25% { transform: translateY(-12px) rotate(-7deg); }
  50% { transform: translateY(-3px) rotate(7deg); }
  75% { transform: translateY(-9px) rotate(-4deg); }
}
@keyframes piano-sing { 
  50% { box-shadow: rgb(245, 200, 196) 0px 0px 0px 5px; transform: translateY(3px); }
}
@keyframes gift-appear { 
  0% { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0px); }
}
@media (max-width: 580px) {
  .gift-button { flex-wrap: wrap; gap: 8px; }
  .gift-button > span:last-child { width: 100%; }
  .gift-reveal:not([hidden]) { flex-wrap: wrap; }
  .gift-reveal > div { order: 2; width: 100%; }
  .gift-reveal h2 { font-size: 1.4rem; }
  .gift-reveal .crayon-sprite { width: 75px; }
  .country-choices { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
  .country-choice { gap: 4px; font-size: 0.9rem; }
  .country-choice .crayon-sprite { width: 42px; }
  .travel-pin { width: 22px; height: 22px; padding: 2px; }
  .travel-pin .icon { width: 14px; height: 14px; }
  .monster-piano { grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 10px; }
  .piano-key { min-height: 155px; }
  .piano-key kbd { display: none; }
  .piano-key .crayon-sprite { max-width: 95px; }
  .travel-heading .crayon-sprite { width: 60px; }
  .picture-piano .crayon-sprite { width: 100px; bottom: 35px; }
  .mini-piano { height: 65px; }
}
@media (prefers-reduced-motion: reduce) {
  .monster-cheer, .piano-key.is-singing, .piano-key.is-singing .crayon-sprite, .gift-reveal:not([hidden]) { animation: auto ease 0s 1 normal none running none !important; }
  .gift-box, .monster-button, .piano-key, .travel-pin { transition: none !important; }
  .monster-button:hover, .piano-key:hover, .piano-key:active, .gift-button:hover .gift-box { transform: none; }
}
.gift-button[hidden], .gift-reveal[hidden] { display: none; }
.home-brand-mark.brand-drawing { width: 68px; height: 68px; flex-shrink: 0; background: rgb(255, 241, 209); border: 2px dashed rgb(191, 156, 113); border-radius: 45% 55% 48% 52%; transform: rotate(-6deg); }
.brand-drawing .crayon-sprite { width: 66px; animation: auto ease 0s 1 normal none running none; }
.home-brand strong em { color: rgb(169, 78, 88); }
@media (max-width: 580px) {
  .home-brand-mark.brand-drawing { width: 48px; height: 48px; }
  .brand-drawing .crayon-sprite { width: 46px; }
}
.crayon-friends > .monster-button { width: 100%; max-width: 150px; aspect-ratio: 1 / 1; }
.crayon-friends > .monster-button > .crayon-sprite { animation: auto ease 0s 1 normal none running none; }
.song-picker h3 { font-size: 1.3rem; margin: 12px 0px 16px; }
.song-options { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 10px; }
.song-choice { display: flex; align-items: center; gap: 12px; text-align: left; min-height: 88px; padding: 12px; border: 2px solid rgb(191, 204, 189); border-radius: 22px; background: rgb(255, 244, 223); color: rgb(37, 60, 69); cursor: pointer; font: inherit; transition: background 0.2s, transform 0.2s; }
.song-choice > span:first-child { font-size: 2.2rem; flex-shrink: 0; }
.song-choice strong { flex: 1 1 0%; overflow-wrap: anywhere; }
.song-play { display: grid; place-items: center; width: 32px; height: 32px; background: rgb(255, 253, 246); border-radius: 50%; flex-shrink: 0; }
.song-choice:hover { background: rgb(255, 237, 181); transform: translateY(-2px); }
.song-choice[aria-pressed="true"] { background: rgb(220, 238, 201); border-color: rgb(38, 91, 100); box-shadow: rgb(38, 91, 100) 0px 0px 0px 1px inset; }
.song-choice:focus-visible { outline: rgb(38, 91, 100) solid 4px; outline-offset: 3px; }
.piano-tools { margin-top: 18px; }
#song-now { font-size: 0.95rem; color: rgb(60, 87, 91); margin: 0px; flex: 1 1 0%; min-width: 180px; }
@media (max-width: 580px) {
  .song-options { grid-template-columns: 1fr; }
  .song-choice { min-height: 78px; }
}
@media (prefers-reduced-motion: reduce) {
  .song-choice { transition: none; }
  .song-choice:hover { transform: none; }
}
.activity-mascot { position: absolute; left: 2%; bottom: 2%; width: 95px; display: block; filter: drop-shadow(rgb(255, 253, 246) 0px 2px 1px); }
.activity-mascot > .crayon-sprite { width: 100%; }
.mascot-symbol { position: absolute; right: -4px; bottom: 2px; background: rgb(255, 248, 232); border: 2px solid rgb(83, 107, 112); border-radius: 50%; width: 34px; height: 34px; display: grid; place-items: center; transform: rotate(-8deg); }
.mascot-symbol .icon { width: 20px; height: 20px; }
.picture-descobertas .activity-mascot .crayon-sprite { position: static; width: 100%; }
.picture-descobertas > .crayon-sprite { display: none; }
@media (max-width: 580px) {
  .activity-mascot { width: 70px; }
  .mascot-symbol { width: 28px; height: 28px; }
  .mascot-symbol .icon { width: 17px; height: 17px; }
}
.home-characters > img { display: block; object-position: center center; padding: 8px; }
.picture-aventuras > img { object-fit: contain; object-position: center center; }
.personal-songs { margin: 12px 0px 28px; padding: 20px; background: rgb(255, 241, 218); border: 2px dashed rgb(207, 170, 124); border-radius: 26px; }
.personal-songs h3 { font-size: 1.5rem; margin: 0px 0px 8px; }
.personal-song-grid { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 14px; }
.personal-song-card { min-width: 0px; padding: 15px; border-radius: 22px; background: rgb(255, 253, 246); border: 2px solid rgb(236, 214, 194); text-align: center; }
.personal-song-card > .crayon-sprite { width: 110px; margin: auto; }
.personal-song-card h4 { margin: 8px 0px 12px; font-size: 1.05rem; }
.personal-song-button { min-width: 120px; min-height: 54px; margin-bottom: 12px; }
.personal-song-card audio { display: block; width: 100%; height: 44px; }
.personal-song-button[aria-pressed="true"] { background: rgb(220, 238, 201); }
@media (max-width: 580px) {
  .personal-song-grid { grid-template-columns: 1fr; }
  .personal-songs { padding: 14px; }
}
.picture-personal-songs { background: rgb(255, 245, 231); display: grid; place-items: center; }
.picture-personal-songs > .crayon-sprite { width: 180px; max-width: 80%; margin-top: 12px; }
.personal-music-notes { position: absolute; right: 12%; top: 8%; font-size: 2.4rem; color: rgb(89, 101, 137); transform: rotate(10deg); }
.personal-music-flags { position: absolute; left: 8%; bottom: 6%; font-size: 2rem; letter-spacing: 0.15em; }
.personal-song-button { width: 100%; gap: 20px; min-height: 76px; }
.song-language-flag { font-size: 2.7rem; line-height: 1; }
.personal-song-symbol { display: grid; place-items: center; width: 38px; height: 38px; background: rgb(255, 253, 246); border-radius: 50%; }
.personal-song-symbol .icon { width: 24px; height: 24px; }
@media (max-width: 580px) {
  .picture-personal-songs > .crayon-sprite { width: 120px; }
  .personal-music-flags { font-size: 1.4rem; }
  .personal-music-notes { font-size: 1.8rem; }
}
h1, h2, h3, .brand, .home-brand strong, .home-choice strong { font-weight: 700; letter-spacing: -0.015em; }
.home-welcome h1 { font-weight: 750; letter-spacing: -0.025em; line-height: 1.12; }
.home-welcome h1 span { letter-spacing: -0.025em; }
.choice-caption strong { line-height: 1.2; letter-spacing: 0px; }
.home-brand strong { letter-spacing: -0.02em; }
.drawings-story h2 { letter-spacing: -0.015em; line-height: 1.18; }
.home-tag { font-weight: 800; }
.song-choice strong, .country-choice strong, .personal-song-card h4 { font-weight: 800; line-height: 1.3; }
.piano-key > span:nth-child(2) { font-family: var(--font-title); font-weight: 700; }
.gift-button strong { font-family: var(--font-title); font-weight: 700; }
.home-characters figcaption { font-weight: 650; }
.btn { font-weight: 800; }
.oli-home { background-image: var(--gradient-paper); background-color: var(--color-background-canvas); }
.home-choice.tone-blue { background: var(--gradient-card-blue); }
.home-choice.tone-pink { background: var(--gradient-card-pink); }
.home-choice.tone-yellow { background: var(--gradient-card-yellow); }
.home-choice.tone-green { background: var(--gradient-card-green); }
.home-choice.tone-lilac { background: var(--gradient-card-lilac); }
.world-playground { position: relative; padding: 30px 0px 45px; }
.world-intro { text-align: center; margin: 0px 0px 20px; }
.world-intro .home-tag { margin-bottom: 14px; }
.world-intro h2 { font-size: 2.4rem; margin: 0px 0px 8px; }
.world-intro p { color: var(--color-text-muted); }
.world-islands { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 34px 26px; align-items: start; }
.world-trail { position: absolute; inset: 0px; width: 100%; height: 100%; pointer-events: none; opacity: 0.35; }
.world-trail path { fill: none; stroke: rgb(186, 160, 124); stroke-width: 2; stroke-dasharray: 3, 12; stroke-linecap: round; }
.world-door { position: relative; min-width: 0px; display: flex; flex-direction: column; align-items: center; gap: 8px; border: 0px; background: none; color: var(--color-text); padding: 12px 8px; cursor: pointer; isolation: isolate; transition: transform 0.2s; border-radius: 40px; }
.world-door:nth-of-type(2n) { margin-top: 14px; }
.world-door:last-child { grid-column: auto; }
.world-door:hover { transform: translateY(-5px); }
.world-door:active { transform: translateY(2px); }
.world-door:focus-visible { outline: 4px dashed var(--color-action); outline-offset: 3px; }
.world-object { position: relative; display: block; width: 100%; max-width: 260px; height: 220px; pointer-events: none; }
.world-cloud { position: absolute; inset: 28px 4px 6px; background: var(--gradient-card-lilac); border-radius: 48% 52% 58% 42% / 50% 42% 58% 50%; opacity: 0.65; transform: rotate(-7deg); z-index: -1; }
.world-tone-blue .world-cloud { background: var(--gradient-card-blue); }
.world-tone-pink .world-cloud { background: var(--gradient-card-pink); border-radius: 60% 40% 43% 57% / 40% 59% 41% 60%; }
.world-tone-yellow .world-cloud { background: var(--gradient-card-yellow); }
.world-tone-green .world-cloud { background: var(--gradient-card-green); }
.door-label { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 8px 10px; border-radius: 50% 45% 40%; background: rgba(255, 249, 238, 0.79); }
.door-label strong { font: 700 1.35rem/1.22 var(--font-title); text-align: center; overflow-wrap: anywhere; }
.door-arrow { display: grid; place-items: center; border: 1.5px solid rgba(83, 107, 112, 0.44); border-radius: 50%; width: 32px; height: 32px; background: rgb(255, 253, 245); flex-shrink: 0; }
.door-arrow .icon { width: 18px; height: 18px; }
.world-musician { display: block; position: absolute; inset: 0px; }
.world-musician > .crayon-sprite { position: absolute; width: 190px; left: calc(50% - 95px); top: 8px; }
.headphones { position: absolute; inset: 4px 10px 0px; width: calc(100% - 20px); height: 190px; fill: none; stroke: rgb(88, 118, 125); stroke-width: 10; stroke-linecap: round; transform: rotate(-8deg); }
.floating-note { position: absolute; font: 700 2.8rem var(--font-title); color: rgb(98, 116, 154); }
.note-left { left: 2%; top: 18%; transform: rotate(-15deg); }
.note-right { right: 4%; top: 9%; transform: rotate(14deg); }
.world-flags { position: absolute; bottom: 0px; left: 0px; right: 0px; text-align: center; font-size: 1.6rem; letter-spacing: 0.1em; }
.world-cinema { position: absolute; left: 9%; right: 7%; top: 42px; height: 145px; background: rgb(168, 203, 213); border: 3px solid rgb(83, 107, 112); border-radius: 35px 29px 32px 26px; transform: rotate(-5deg); padding: 13px 32px 13px 13px; box-shadow: rgba(120, 159, 170, 0.2) 0px 6px 0px; }
.cinema-screen { position: relative; display: block; width: 100%; height: 100%; border: 2px solid rgb(83, 107, 112); border-radius: 24% 22% 28% 20%; background: rgb(255, 253, 251); overflow: hidden; }
.cinema-screen img { width: 100%; height: 100%; object-fit: contain; }
.cinema-play { position: absolute; right: 5px; bottom: 5px; color: rgb(255, 255, 255); background: rgb(59, 98, 107); border-radius: 50%; display: grid; place-items: center; width: 27px; height: 27px; }
.cinema-play .icon { width: 15px; height: 15px; }
.cinema-antenna { position: absolute; width: 65px; height: 33px; left: 37%; top: -32px; border-left: 3px solid rgb(83, 107, 112); border-right: 3px solid rgb(83, 107, 112); transform: perspective(40px) rotateX(-20deg); }
.cinema-dials { position: absolute; right: 8px; top: 36px; display: grid; gap: 17px; }
.cinema-dials i { width: 12px; height: 12px; border: 2px solid rgb(83, 107, 112); background: rgb(255, 240, 200); border-radius: 50%; }
.cinema-feet { position: absolute; bottom: -11px; left: 20%; right: 20%; height: 10px; border-left: 13px solid rgb(83, 107, 112); border-right: 13px solid rgb(83, 107, 112); }
.door-adventures .world-object > .crayon-sprite { position: absolute; width: 90px; bottom: 0px; left: -2%; }
.world-memory { position: absolute; inset: 0px; }
.world-camera { position: absolute; top: 29px; left: 3%; width: 107px; height: 78px; border: 3px solid rgb(101, 117, 104); border-radius: 20px; background: rgb(203, 218, 180); transform: rotate(-12deg); }
.world-camera > .icon { position: absolute; left: 11px; top: 21px; width: 29px; height: 29px; }
.world-camera i { position: absolute; right: 9px; top: 14px; width: 45px; height: 45px; border: 5px solid rgb(99, 126, 118); border-radius: 50%; background: rgb(237, 241, 219); }
.world-print { position: absolute; top: 65px; left: 9%; width: 112px; height: 132px; padding: 7px 7px 19px; background: rgb(255, 253, 246); transform: rotate(-9deg); box-shadow: rgba(83, 107, 112, 0.15) 0px 4px 10px; }
.world-print img { width: 100%; height: 100%; object-fit: cover; }
.world-print.print-two { width: 110px; height: 120px; left: 45%; top: 48px; transform: rotate(11deg); }
.door-memories .world-object > .crayon-sprite { position: absolute; right: 0px; bottom: 0px; width: 88px; }
.world-piano { position: absolute; inset: 0px; }
.world-piano > .crayon-sprite { position: absolute; width: 170px; left: calc(50% - 85px); top: 0px; }
.world-piano > .mini-piano { position: absolute; bottom: 7px; left: 7%; width: 86%; height: 86px; margin: 0px; transform: rotate(-5deg); }
.world-planet { display: block; position: absolute; inset: 0px; }
.world-planet > svg { position: absolute; width: 100%; height: 100%; inset: 0px; }
.world-planet > .crayon-sprite { position: absolute; bottom: -5px; right: 0px; width: 100px; }
.world-postbox { position: absolute; inset: 0px; }
.postbox-body { position: absolute; left: 12%; top: 35px; width: 68%; height: 125px; background: rgb(230, 181, 175); border: 3px solid rgb(136, 104, 105); border-radius: 60px 60px 17px 17px; transform: rotate(4deg); }
.postbox-eyes { display: flex; gap: 10px; justify-content: center; margin: 15px; }
.postbox-eyes i { width: 20px; height: 24px; border-radius: 50%; background: rgb(255, 253, 245); position: relative; }
.postbox-eyes i::after { content: ""; position: absolute; bottom: 3px; right: 3px; width: 11px; height: 15px; background: rgb(51, 69, 76); border-radius: 50%; }
.postbox-mouth { position: absolute; top: 52px; left: 12%; right: 12%; height: 16px; background: rgb(139, 105, 105); border-radius: 50%; }
.world-letter { position: absolute; left: 24%; top: 57px; width: 58%; height: 68px; background: rgb(255, 244, 220); border: 2px solid rgb(174, 154, 125); transform: rotate(-8deg); display: grid; place-items: center; border-radius: 6px; }
.world-letter .icon { width: 34px; height: 34px; color: rgb(173, 90, 105); }
.postbox-pole { position: absolute; top: 162px; left: 45%; height: 40px; width: 14px; background: rgb(161, 150, 120); border-radius: 3px; }
.postbox-flag { position: absolute; right: 11%; top: 25px; width: 12px; height: 46px; background: rgb(122, 145, 135); transform: rotate(5deg); }
.postbox-flag::before { content: ""; position: absolute; right: 0px; top: 0px; width: 30px; height: 23px; background: rgb(202, 170, 131); border-radius: 4px; }
.door-messages .world-object > .crayon-sprite { position: absolute; left: 0px; bottom: 0px; width: 85px; }
.world-art { display: block; position: absolute; inset: 0px; }
.world-paper { position: absolute; top: 15px; left: 14%; width: 68%; height: 150px; background: rgb(255, 253, 247); border: 2px solid rgb(212, 200, 174); border-radius: 6px; transform: rotate(-8deg); padding: 10px; box-shadow: rgba(184, 171, 138, 0.15) 0px 4px 0px; }
.world-paper > img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.world-pencil { position: absolute; right: 9%; top: 58px; width: 17px; height: 114px; border: 2px solid rgb(164, 126, 109); background: rgb(233, 182, 162); border-radius: 3px; transform: rotate(18deg); }
.world-pencil::after { content: ""; position: absolute; bottom: -17px; left: -2px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 16px solid rgb(137, 114, 96); }
.world-art > .crayon-sprite { position: absolute; left: -2%; bottom: 0px; width: 105px; }
.world-door .world-object > .crayon-sprite { animation: 8s ease-in-out 0s infinite normal none running world-friend-float; }
.world-door:nth-of-type(2n) .world-object > .crayon-sprite { animation-delay: -3s; }
.background-paused .world-door .crayon-sprite { animation-play-state: paused; }
@keyframes world-friend-float { 
  0%, 100% { translate: 0px; }
  50% { translate: 0px -6px; }
}
@media (max-width: 950px) {
  .world-islands { grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 24px 14px; }
  .world-object { height: 190px; }
  .door-label strong { font-size: 1.15rem; }
  .world-cinema { left: 5%; right: 5%; height: 122px; }
  .world-musician > .crayon-sprite { width: 160px; left: calc(50% - 80px); }
  .world-piano > .crayon-sprite { width: 145px; left: calc(50% - 72px); }
  .world-print { width: 95px; height: 110px; }
  .world-print.print-two { width: 86px; height: 95px; }
  .world-camera { width: 90px; }
  .world-art > .crayon-sprite { width: 90px; }
  .headphones { height: 155px; }
  .world-flags { bottom: 0px; }
}
@media (max-width: 680px) {
  .world-islands { grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 22px 12px; }
  .world-door:nth-of-type(3n+2) { margin-top: 0px; }
  .world-door:nth-of-type(2n) { margin-top: 18px; }
  .world-door:last-child { grid-column: auto; width: auto; justify-self: stretch; }
  .world-intro h2 { font-size: 2rem; }
  .world-object { height: 190px; }
  .world-trail { opacity: 0.2; }
  .world-playground { padding-top: 20px; }
}
@media (max-width: 430px) {
  .world-door { padding: 6px 0px; }
  .world-object { height: 155px; }
  .door-label { padding: 7px 2px; gap: 5px; }
  .door-label strong { font-size: 1.05rem; }
  .door-arrow { width: 25px; height: 25px; }
  .world-musician > .crayon-sprite { width: 135px; left: calc(50% - 67px); top: 0px; }
  .headphones { height: 130px; inset: 0px; width: 100%; }
  .world-flags { font-size: 1.2rem; }
  .floating-note { font-size: 2rem; }
  .world-cinema { height: 100px; top: 30px; padding: 9px 23px 9px 9px; }
  .cinema-dials { right: 5px; top: 25px; gap: 12px; }
  .cinema-dials i { width: 10px; height: 10px; }
  .door-adventures .world-object > .crayon-sprite { width: 65px; }
  .world-camera { top: 14px; width: 75px; height: 57px; }
  .world-camera > .icon { width: 18px; height: 18px; left: 5px; top: 15px; }
  .world-camera i { width: 32px; height: 32px; top: 10px; right: 5px; border-width: 4px; }
  .world-print { width: 78px; height: 89px; top: 47px; padding: 5px 5px 15px; }
  .world-print.print-two { width: 72px; height: 82px; top: 36px; left: 43%; }
  .door-memories .world-object > .crayon-sprite { width: 60px; }
  .world-piano > .crayon-sprite { width: 119px; left: calc(50% - 60px); top: -3px; }
  .world-piano > .mini-piano { height: 58px; bottom: 5px; gap: 3px; }
  .world-planet > .crayon-sprite { width: 73px; }
  .postbox-body { top: 19px; height: 97px; }
  .postbox-eyes { margin: 9px; gap: 8px; }
  .postbox-eyes i { width: 16px; height: 19px; }
  .postbox-eyes i::after { width: 9px; height: 12px; }
  .postbox-mouth { top: 41px; height: 12px; }
  .world-letter { top: 47px; height: 48px; }
  .world-letter .icon { width: 27px; height: 27px; }
  .postbox-pole { top: 118px; height: 29px; width: 10px; }
  .postbox-flag { top: 10px; width: 8px; height: 36px; }
  .postbox-flag::before { width: 24px; height: 17px; }
  .door-messages .world-object > .crayon-sprite { width: 65px; }
  .world-paper { height: 110px; padding: 6px; }
  .world-art > .crayon-sprite { width: 75px; }
  .world-pencil { height: 80px; width: 12px; top: 40px; }
  .world-pencil::after { border-left-width: 5px; border-right-width: 5px; border-top-width: 12px; bottom: -12px; left: -1px; }
  .world-cloud { inset: 16px 0px 4px; }
  .world-intro p { font-size: 0.9rem; }
  .world-playground { padding-bottom: 28px; }
  .home-welcome h1 { font-size: 2.65rem; }
}
@media (prefers-reduced-motion: reduce) {
  .world-door, .world-door .world-object > .crayon-sprite { animation: auto ease 0s 1 normal none running none !important; transition: none !important; }
  .world-door:hover, .world-door:active { transform: none; }
}
.home-doodles > .edge-friend { width: 120px; opacity: 0.32; animation: 19s ease-in-out 0s infinite normal none running edge-friend-drift; pointer-events: none; }
.edge-friend-one { left: -46px; top: 24%; animation-delay: -4s !important; }
.edge-friend-two { right: -45px; top: 43%; animation-duration: 24s !important; animation-delay: -12s !important; }
.edge-friend-three { left: -42px; top: 65%; animation-duration: 27s !important; animation-delay: -19s !important; }
.edge-friend-four { right: -48px; top: 84%; animation-duration: 22s !important; animation-delay: -7s !important; }
@keyframes edge-friend-drift { 
  0%, 100% { transform: translateY(0px) rotate(-6deg); }
  50% { transform: translateY(-18px) rotate(5deg); }
}
@media (max-width: 680px) {
  .home-doodles > .edge-friend { width: 84px; opacity: 0.2; }
  .edge-friend-one { left: -48px; }
  .edge-friend-two { right: -49px; }
  .edge-friend-three { left: -48px; }
  .edge-friend-four { right: -50px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-doodles > .edge-friend { animation: auto ease 0s 1 normal none running none !important; }
}
.country-choice { flex-direction: column; justify-content: center; gap: 6px; text-align: center; min-height: 158px; padding: 10px 6px; background: linear-gradient(150deg, rgb(255, 253, 246), rgb(244, 240, 228)); }
.country-choice strong { line-height: 1.25; min-height: 1.25em; }
.flag-friend { position: relative; display: block; width: 114px; height: 106px; flex-shrink: 0; }
.country-choice .flag-friend > .crayon-sprite, .flag-friend > .crayon-sprite { position: absolute; left: 0px; bottom: 0px; width: 88px; }
.friend-flagpole { position: absolute; left: 77px; top: 8px; height: 88px; width: 4px; border-radius: 4px; background: rgb(140, 120, 101); transform: rotate(-4deg); transform-origin: center bottom; }
.friend-flagpole::before { content: ""; position: absolute; top: -5px; left: -2px; width: 8px; height: 8px; background: rgb(212, 177, 123); border-radius: 50%; }
.friend-flag { position: absolute; left: 72px; top: 7px; width: 39px; height: 28px; font: 30px / 1 "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; transform: rotate(-4deg); transform-origin: left center; filter: drop-shadow(rgba(83, 107, 112, 0.2) 0px 1px 1px); }
.friend-flag > svg { display: block; width: 100%; height: 100%; border: 1px solid rgb(212, 204, 192); }
.friend-flag-hand { position: absolute; left: 71px; top: 66px; width: 11px; height: 7px; border: 2px solid rgb(66, 99, 94); border-radius: 50%; background: rgb(255, 253, 245); transform: rotate(-9deg); }
.flag-friend-large { width: 205px; height: 190px; margin: 0px auto; }
.flag-friend-large > .crayon-sprite { width: 163px; }
.flag-friend-large .friend-flagpole { left: 143px; top: 12px; height: 160px; width: 5px; }
.flag-friend-large .friend-flag { left: 134px; top: 12px; width: 66px; height: 44px; font-size: 48px; }
.flag-friend-large .friend-flag-hand { left: 134px; top: 120px; width: 17px; height: 11px; }
@media (max-width: 580px) {
  .country-choice { min-height: 145px; font-size: 0.95rem; }
  .country-choice .flag-friend { width: 108px; height: 100px; }
  .country-choice .flag-friend > .crayon-sprite { width: 82px; }
  .country-choice .friend-flagpole { height: 83px; left: 73px; }
  .country-choice .friend-flag { left: 68px; width: 38px; height: 27px; }
  .country-choice .friend-flag-hand { left: 67px; top: 63px; }
}
.crayon-sprite.sprite-friend-one { background-size: 256% 170.667%; background-position: -2.1368% -5.8962%; clip-path: polygon(3.333% 4.167%, 83% 4.167%, 83.667% 48.5%, 98.167% 56.333%, 98.167% 79.833%, 79.333% 82%, 70% 93.333%, 11.667% 93.333%, 3.333% 82.5%); }
.crayon-sprite.sprite-friend-two { background-size: 240% 160%; background-position: 52.4554% -10.4167%; clip-path: polygon(1.562% 15.625%, 85.156% 15.625%, 98.438% 35.156%, 84.375% 50%, 81.25% 85.938%, 43.75% 89.844%, 14.062% 89.844%, 14.062% 45.312%, 1.562% 35.938%); }
.crayon-sprite.sprite-friend-three { background-size: 256% 170.667%; background-position: 106.838% -5.8962%; clip-path: polygon(22.5% 4.167%, 71.667% 4.167%, 89.333% 30%, 89.333% 92.833%, 11.667% 92.833%, 5% 60%, 16.667% 49.167%); }
.crayon-sprite.sprite-friend-four { background-size: 256% 170.667%; background-position: -2.1368% 117.924%; clip-path: polygon(3.333% 6.667%, 63.333% 6.667%, 70.833% 1.667%, 81.667% 3%, 89% 17.5%, 92.5% 45.5%, 78.333% 56.667%, 70.5% 87.333%, 3.333% 87.333%); }
.crayon-sprite.sprite-friend-five { background-size: 256% 170.667%; background-position: 53.4188% 117.924%; clip-path: polygon(8.333% 3.333%, 68.333% 3.333%, 85% 6.667%, 86.667% 30%, 74.167% 50%, 79.167% 87.333%, 3.333% 87.333%, 3.333% 58.333%, 8.333% 38.333%); }
.crayon-sprite.sprite-friend-six { background-size: 256% 170.667%; background-position: 104.701% 117.924%; clip-path: polygon(21.667% 5%, 73.333% 5%, 92.667% 29.167%, 92.667% 87.333%, 5% 87.333%, 3.333% 47.5%, 0% 30%, 14.167% 21.167%); }
.brazil-places .crayon-sprite { width: 112px; height: 112px; flex: 0 0 auto; }
.place-media-icons { display: flex; gap: 10px; color: var(--color-text); opacity: 0.65; }
.place-media-icons svg { width: 23px; height: 23px; }
.brazil-welcome { padding-bottom: 12px; }
.video-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 20px; min-width: 0px; }
.video-section-title { margin: 28px 0px 14px; line-height: 1.3; }
.video-choices .media-cover, .youtube-cover:has(.youtube-thumbnail) { display: block; position: relative; aspect-ratio: 16 / 9; min-height: 0px; overflow: hidden; background: var(--color-surface-muted); }
.video-choices .media-cover > img, .youtube-cover > .youtube-thumbnail { position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; margin: 0px; }
.video-choices .memory-copy { padding: 16px; }
.video-choices .memory-copy h3 { margin: 10px 0px 0px; overflow-wrap: anywhere; line-height: 1.35; }
.video-choices .media-icon { width: 48px; height: 48px; right: 14px; bottom: 14px; }
.memory-albums { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; margin-top: 24px; }
.memory-album { display: flex; flex-direction: column; align-items: center; gap: 10px; border: 1px solid var(--color-border); border-radius: 24px; background: linear-gradient(145deg,var(--color-surface),var(--color-yellow)); padding: 18px; color: var(--color-text); min-height: 185px; }
.memory-album:nth-child(3n+2) { background: linear-gradient(145deg,var(--color-surface),var(--color-pink)); }
.memory-album:nth-child(3n) { background: linear-gradient(145deg,var(--color-surface),var(--color-blue)); }
.memory-album .crayon-sprite { width: 100px; height: 100px; }
.memory-album strong { font-size: 1.1rem; line-height: 1.3; }
.memory-album small { font-size: 0.75rem; }
.photo-caption { display: grid; gap: 5px; text-align: center; padding: 14px; }
.photo-caption time { font-size: 0.85rem; color: var(--color-text-muted); }
.photo-adult-actions { margin: 20px 0px 0px; justify-content: center; }
#photo-details { display: grid; gap: 18px; margin-top: 20px; }
.album-scene { position: relative; display: block; width: 220px; max-width: 100%; height: 150px; flex: 0 0 auto; isolation: isolate; pointer-events: none; }
.album-scenery { position: absolute; inset: 0px; width: 100%; height: 100%; z-index: 2; }
.memory-album .album-scene .scene-character, .trip-empty .album-scene .scene-character { position: absolute; width: 108px; height: 108px; left: 40px; top: 35px; z-index: 1; }
.scene-0 .scene-character.character-0 { left: 67px; }
.scene-1 .scene-character.character-0, .scene-3 .scene-character.character-0 { left: 4px; }
.scene-1 .scene-character.character-1, .scene-3 .scene-character.character-1 { left: 112px; }
.scene-2 .scene-character.character-0 { left: 0px; width: 90px; height: 90px; top: 47px; }
.scene-2 .scene-character.character-1 { left: 66px; width: 90px; height: 90px; top: 43px; }
.scene-2 .scene-character.character-2 { left: 132px; width: 90px; height: 90px; top: 47px; }
.trip-empty .album-scene { margin: 0px auto; }
.memory-album { padding: 14px 12px 18px; }
.memory-album:hover .album-scene { transform: translateY(-3px); }
.album-scene { transition: transform 0.2s; }
@media (prefers-reduced-motion: reduce) {
  .album-scene { transition: none; }
  .memory-album:hover .album-scene { transform: none; }
}
.albums-below-gallery { margin-top: 30px; padding-top: 24px; border-top: 2px dashed var(--color-border); }
.album-section-heading { margin: 0px 0px 8px; }
.albums-below-gallery .memory-albums { margin-top: 18px; }
.whale-song { margin: 24px 0px; }
.whale-choice { width: 100%; background: linear-gradient(135deg,var(--color-blue),var(--color-surface)); }
.whale-choice > svg { width: 100px; height: 75px; flex: 0 0 auto; }
.whale-choice strong { flex: 1 1 0%; }
@media (max-width: 420px) {
  .whale-choice > svg { width: 72px; height: 60px; }
}
.favorite-song-options { display: grid; gap: 14px; }
.finger-choice { width: 100%; background: linear-gradient(135deg,var(--color-peach),var(--color-surface)); }
.finger-choice > svg { width: 100px; height: 85px; flex: 0 0 auto; }
.finger-choice strong { flex: 1 1 0%; }
@media (max-width: 420px) {
  .finger-choice > svg { width: 72px; height: 65px; }
}
.dance-microphone { position: absolute; right: 20px; bottom: 3px; width: 65px; height: 100px; }
.singing-videos { margin-top: 22px; }
.singing-videos .memory-copy h3 { font-size: 1.1rem; line-height: 1.4; }
.favorite-local-video { display: block; width: 100%; max-height: 65dvh; aspect-ratio: 16 / 9; object-fit: contain; background: rgb(21, 39, 38); border-radius: 18px; }
.scene-2 .scene-character.character-0 { left: 0px; width: 75px; height: 75px; top: 55px; }
.scene-2 .scene-character.character-1 { left: 48px; width: 75px; height: 75px; top: 45px; }
.scene-2 .scene-character.character-2 { left: 97px; width: 75px; height: 75px; top: 53px; }
.scene-2 .scene-character.character-3 { left: 145px; width: 75px; height: 75px; top: 45px; }
.gallery-real-video{display:block;height:50dvh;width:100%;object-fit:contain;background:#152726;border-radius:14px}.photo-location{font-size:.85rem;color:var(--color-text-muted)}.gallery-thumbnails img{content-visibility:auto}.photo-caption strong{overflow-wrap:anywhere}.video-choices .memory-copy small{display:block;margin-top:8px}
/* Family edition 30: gentle play and durable contributions. */
.memory-door-art{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:100%}.memory-door-art .crayon-sprite{width:95px;height:115px}.pair-heart{position:absolute;top:12px;right:38%;color:#b97889;font-size:32px}.adult-link{border:0;background:transparent;cursor:pointer;font:inherit;color:var(--color-action);display:flex;align-items:center;gap:8px}
.drawing-together{margin:20px -12px -12px;max-width:350px}.drawing-together img{width:100%;height:auto;display:block}.drawings-story{scroll-margin-top:25px}.drawings-story p{max-width:37ch}.family-footer{display:block;padding:54px 28px 24px;border-top:1px solid #e7d9c6;background:linear-gradient(150deg,#f6e9d980,#eee4f580);text-align:center}.footer-play{max-width:1100px;margin:auto}.footer-play h2{font-family:var(--font-title);font-size:clamp(25px,4vw,39px);margin:12px 0}.sound-friends{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:22px auto 32px}.sound-friend{position:relative;width:95px;min-height:112px;padding:5px;border:0;border-radius:24px;background:transparent;cursor:pointer}.sound-friend .crayon-sprite{width:85px;height:100px;display:block}.sound-bubble{position:absolute;right:1px;top:2px;background:#fffefa;color:#245977;border:1px solid #c6c8b5;border-radius:50%;width:27px;height:27px;font-size:21px}.sound-friend:hover{background:#fffefa90}.sound-friend:focus-visible{outline:3px solid #8052ad;outline-offset:3px}.footer-bottom{border-top:1px solid #d9cebb;padding-top:22px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px 28px}.footer-brand{font-family:var(--font-title);font-size:22px;font-weight:800}.footer-bottom small{flex-basis:100%;color:#52656b}
.memory-game{max-width:620px;margin:auto;text-align:center}.memory-game-status{min-height:3em;font-size:19px;font-weight:bold;margin:20px 0 8px}.memory-board{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;width:min(460px,100%);margin:auto}.memory-flip{min-height:145px;aspect-ratio:1.15;position:relative;background:linear-gradient(130deg,#f5c8c4,#f8ddbe);border:3px solid #fffefa;border-radius:25px;box-shadow:0 4px 0 #d0b7aa;cursor:pointer;transition:background .2s,transform .2s}.memory-card-back{font-size:62px;color:#78557b;display:grid;place-items:center}.memory-card-face{position:absolute;inset:12%;width:76%;height:76%;opacity:0}.memory-flip.face-up{background:#fffefa}.face-up .memory-card-back{visibility:hidden}.face-up .memory-card-face{opacity:1}.memory-flip.pair-found{background:#e5efda;border-color:#80a175;box-shadow:0 4px 0 #80a175}.memory-flip.pair-found:after{content:'♥';position:absolute;right:9px;top:6px;color:#547a49;font-size:23px}.memory-flip:focus-visible{outline:3px solid #8052ad;outline-offset:5px}.memory-game-tools,.memory-levels{justify-content:center;margin-top:24px}
.family-comments{margin:18px auto;padding:16px;border:1px solid #e0d4bf;border-radius:18px;max-width:720px;background:#fffefa;text-align:left}.family-comments summary,.family-drawing-upload summary{font-weight:bold;cursor:pointer;min-height:42px;display:flex;align-items:center}.family-comments p{font-size:16px}.comment-list{margin:16px 0}.family-comment{padding:16px 0;border-bottom:1px solid #eee1cf}.family-comment time{display:block;color:#52656b;font-size:13px}.family-comment p{white-space:pre-wrap;overflow-wrap:anywhere}.comment-form label{display:block;font-weight:700}.comment-form textarea{display:block;width:100%;padding:12px;border:1px solid #949f9f;border-radius:12px;font:inherit;margin:8px 0 12px}.comment-status{min-height:24px}.voice-list{display:grid;gap:14px}.voice-card{display:grid;gap:8px;padding:20px;background:#fff9ee;border-radius:18px;border:1px solid #e0d4bf}.voice-card audio,#voice-preview{width:100%;margin:10px 0}.voice-card span{font-size:14px;color:#52656b}.real-recorder #voice-status{min-height:45px;margin:18px 0}.voice-file-label{cursor:pointer}.family-drawings{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:18px}.drawing-card{display:grid;gap:10px;text-align:left;border:1px solid #e0d4bf;border-radius:20px;background:#fffefa;padding:14px;cursor:pointer;font:inherit}.drawing-card img{width:100%;height:180px;object-fit:contain;background:white;border-radius:12px}.drawing-card small{color:#52656b}.drawing-large{display:block;max-width:100%;max-height:65vh;object-fit:contain;margin:auto}.family-drawing-upload{margin-top:24px;border-top:1px solid #e0d4bf;padding-top:16px}.family-user{display:grid;gap:4px;padding:16px;border-bottom:1px solid #e0d4bf}.invite-url{width:100%;font:inherit;padding:12px;border-radius:12px;border:1px solid #949f9f}.family-user .btn{justify-self:start}.family-account hr{margin:22px 0}.monster-piano{grid-template-columns:repeat(7,minmax(0,1fr))}
@media(max-width:600px){.sound-friend{width:74px;min-height:88px}.sound-friend .crayon-sprite{width:65px;height:82px}.family-footer{padding:34px 16px 20px}.drawing-together{max-width:270px;margin:15px auto}.memory-board{gap:12px}.memory-flip{min-height:125px;border-radius:20px}.memory-game-status{font-size:17px}.family-comments{padding:12px}.footer-bottom{flex-direction:column;gap:12px}.monster-piano{gap:4px}.piano-key{min-width:0}.piano-key kbd{display:none}.family-drawings{grid-template-columns:repeat(2,minmax(0,1fr))}.drawing-card img{height:120px}}
@media(prefers-reduced-motion:reduce){.memory-flip{transition:none}.sound-friend,.drawing-together{animation:none!important}}

/* Presente das titias: faixa integrada à página, sem popup. */
/* A pequena dedicatória acompanha a festa, com contorno de papel orgânico. */
.home-celebration-row{display:grid;grid-template-columns:minmax(0,700px) minmax(250px,310px);align-items:center;justify-content:center;gap:24px;margin:12px auto 20px;max-width:1060px}
.home-celebration-row .home-celebration-band{width:100%;margin:0;box-sizing:border-box}
.aunts-gift-banner{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;text-align:center;gap:0;padding:18px 27px 25px;border:1px solid #e4d7c6;border-radius:47% 53% 44% 56% / 42% 45% 55% 58%;background:linear-gradient(135deg,#f8e5d8,#eee4f4 64%,#f6efdb);color:#345653;margin:0;overflow:hidden;box-shadow:0 5px 16px #ac7d9410}
.aunts-gift-banner>img{width:132px;height:85px;object-fit:contain;flex-shrink:0}.aunts-gift-banner .home-tag{font-size:10px;letter-spacing:.02em}.aunts-gift-banner h2{font-size:20px;line-height:1.15;margin:7px 0}.aunts-gift-banner p{font-size:12px;line-height:1.45;margin:0;max-width:240px}.aunts-gift-stars{font-size:23px;letter-spacing:8px;color:#ac7d94;position:absolute;right:28px;top:30px;opacity:.3;z-index:-1}
@media(max-width:760px){.home-celebration-row{grid-template-columns:1fr;gap:12px}.aunts-gift-banner{justify-self:end;width:min(310px,100%);box-sizing:border-box;padding:15px 28px 23px}.aunts-gift-banner>img{height:70px;width:115px}.home-celebration-row .home-celebration-band{max-width:none}}


.family-photo-avatar{display:block;width:68px;height:68px;position:relative;overflow:hidden;border-radius:48% 52% 46% 54%;background:#f7ebd8;border:3px solid #fff8ed;box-shadow:0 2px 8px #34565318;flex-shrink:0}.family-photo-avatar img{position:absolute;height:auto;max-width:none}.family-photo-avatar.avatar-large{width:180px;height:180px;margin:0 auto 20px}.avatar-placeholder .crayon-sprite{width:100%;height:100%}.family-world-map{min-height:300px;overflow:visible;margin:30px 0 55px}.family-city-pin{position:absolute;transform:translate(-50%,-50%);width:68px;min-height:68px;display:grid;justify-items:center;border:0;background:transparent;color:#345653;cursor:pointer}.family-city-pin .crayon-sprite{width:52px;height:52px}.family-city-pin strong{font-size:12px;background:#fff8ed;padding:3px 6px;border-radius:8px;white-space:nowrap}.family-city-pin.pin-3{transform:translate(-90%,-115%)}.family-city-pin.pin-4{transform:translate(5%,10%)}.family-place-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:18px}.family-place-card{padding:18px;background:linear-gradient(130deg,#faf0db,#eaf0e5);border-radius:24px;border:1px solid #e0ddcc}.family-place-title{display:flex;gap:12px;text-align:left;background:none;border:0;color:inherit;width:100%;align-items:center;padding:4px;cursor:pointer}.family-place-title .crayon-sprite{width:52px;height:52px;flex-shrink:0}.family-place-title strong{font-size:20px}.family-place-title small{display:block;margin-top:4px}.family-person-buttons{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:16px 0}.family-person-buttons>button{display:flex;flex-direction:column;align-items:center;gap:8px;max-width:100px;border:0;border-radius:16px;padding:8px;background:transparent;color:#345653;cursor:pointer;font-weight:700}.family-person-buttons>button:hover{background:#fff8ed}.family-person-detail{text-align:center;padding:24px 10px}.family-place-title:focus-visible,.family-city-pin:focus-visible,.family-person-buttons>button:focus-visible{outline:3px solid #47737b;outline-offset:4px}@media(max-width:480px){.family-world-map{min-height:190px}.family-city-pin{width:48px;min-height:48px}.family-city-pin .crayon-sprite{width:38px;height:38px}.family-city-pin strong{font-size:10px}.family-photo-avatar{width:64px;height:64px}}

/* Um único presente: a festa, a dedicatória e os rostos das titias. */
.home-celebration-row.gift-unified{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) 230px;grid-template-rows:auto auto;gap:0 20px;max-width:1000px;margin:36px auto 24px;padding:34px 32px 28px;border:1px solid #e4d7c6;border-radius:32px;background:linear-gradient(115deg,#fff0d5,#f5e4ed 60%,#e8edf3);box-sizing:border-box;overflow:visible}
.gift-unified .home-celebration-band{grid-column:1;grid-row:1;border:0;background:none;padding:0;max-width:none;gap:16px;align-self:end}.gift-unified .home-celebration-band strong{font-size:clamp(32px,4.5vw,48px);line-height:1.12}.gift-unified .home-celebration-band span:not(.home-party-emblem){font-size:16px}.gift-unified .home-party-emblem{width:72px;height:72px}.gift-unified .home-celebration-band .icon-btn{margin-left:8px}
.gift-unified .aunts-gift-banner{display:contents}.gift-unified .aunts-gift-banner>img{grid-column:2;grid-row:1 / 3;align-self:center;justify-self:center;width:230px;height:170px;object-fit:contain}.gift-unified .aunts-gift-banner>div{grid-column:1;grid-row:2;text-align:left;padding:12px 0 0 88px}.gift-unified .aunts-gift-banner p{font-size:15px;line-height:1.55;max-width:530px;margin:0}.gift-unified .aunts-gift-banner h2[hidden]{display:none}.gift-unified .aunts-gift-banner .home-tag{position:absolute;left:-12px;top:-15px;transform:rotate(-3deg);font-size:12px;padding:10px 20px;letter-spacing:0;background:#ffe6a4;border-radius:9px 7px 10px 6px;box-shadow:0 3px 8px #ac7d9420;z-index:2}.gift-unified .aunts-gift-stars{right:18px;top:22px;z-index:0}
@media(max-width:600px){.home-celebration-row.gift-unified{grid-template-columns:minmax(0,1fr) 125px;gap:12px 8px;padding:29px 18px 22px;border-radius:26px;margin-top:30px}.gift-unified .home-celebration-band{gap:8px;position:static}.gift-unified .home-party-emblem{width:38px;height:46px}.gift-unified .home-celebration-band strong{font-size:32px}.gift-unified .home-celebration-band span:not(.home-party-emblem){font-size:13px}.gift-unified .home-celebration-band .icon-btn{position:absolute;right:10px;bottom:10px;width:36px;height:36px}.gift-unified .aunts-gift-banner>img{width:125px;height:112px;grid-row:1}.gift-unified .aunts-gift-banner>div{grid-column:1 / 3;grid-row:2;padding:0 26px 0 0}.gift-unified .aunts-gift-banner p{font-size:14px;max-width:none}.gift-unified .aunts-gift-banner .home-tag{left:-6px;font-size:11px;padding:8px 14px}.gift-unified .aunts-gift-stars{display:none}}
@media(max-width:370px){.home-celebration-row.gift-unified{grid-template-columns:minmax(0,1fr) 96px;padding-left:12px;padding-right:12px}.gift-unified .aunts-gift-banner>img{width:96px}.gift-unified .home-celebration-band strong{font-size:29px}.gift-unified .home-party-emblem{display:none}}

.gift-unified .aunt-party-portrait{grid-column:2;grid-row:1 / 3;position:relative;width:260px;height:190px;align-self:center;justify-self:center;display:block}.gift-unified .aunt-party-portrait>img{position:absolute;inset:12px 20px 8px;width:220px;height:170px;object-fit:contain}.aunt-party-decor{position:absolute;inset:0;pointer-events:none}.aunt-party-decor svg{width:100%;height:100%;overflow:visible}.aunt-balloons{animation:aunt-balloon-float 4.5s ease-in-out infinite;transform-origin:44px 90px}.aunt-record{transform-box:fill-box;transform-origin:center;animation:aunt-record-turn 12s linear infinite}.record-two{animation-direction:reverse}.aunt-party-sparkles{animation:aunt-star-glow 3.5s ease-in-out infinite}
#persistent-disco{position:fixed;top:0;left:50%;transform:translateX(-50%);width:150px;height:100px;z-index:35;pointer-events:none!important}#persistent-disco *{pointer-events:none!important}#persistent-disco .disco-reflections{display:none}#persistent-disco .disco-ball{width:64px;height:82px;left:43px;top:0}#persistent-disco .disco-star{width:15px;height:15px}#persistent-disco .disco-mirror-grid{animation:persistent-disco-turn 8s linear infinite;transform-box:fill-box;transform-origin:center}.home-party .disco-ball{display:none}
@keyframes aunt-balloon-float{50%{transform:translateY(-5px) rotate(3deg)}}@keyframes aunt-record-turn{to{transform:rotate(360deg)}}@keyframes aunt-star-glow{50%{opacity:.5}}@keyframes persistent-disco-turn{0%{transform:scaleX(1)}25%{transform:scaleX(.5)}50%{transform:scaleX(-1)}75%{transform:scaleX(-.5)}100%{transform:scaleX(1)}}
body.background-paused #persistent-disco *,body.background-paused .aunt-party-portrait *{animation-play-state:paused!important}
@media(max-width:600px){.gift-unified .aunt-party-portrait{grid-column:2;grid-row:1;width:135px;height:125px}.gift-unified .aunt-party-portrait>img{inset:12px 8px;width:119px;height:101px}#persistent-disco{width:110px;height:74px;top:0}#persistent-disco .disco-ball{width:47px;height:61px;left:32px}#persistent-disco .disco-star{width:11px;height:11px}}
@media(max-width:370px){.gift-unified .aunt-party-portrait{width:106px;height:115px}.gift-unified .aunt-party-portrait>img{width:96px;inset:12px 5px}}
@media(prefers-reduced-motion:reduce){#persistent-disco *,.aunt-party-portrait *{animation:none!important}}

/* O globo é uma decoração estática; somente as estrelas cintilam. */
#persistent-disco .disco-mirror-grid{animation:none;transform:none}

.gift-unified .aunt-party-portrait{height:255px}.gift-unified .aunt-party-portrait>img{height:160px;inset:5px 20px auto}.aunt-party-decor{bottom:auto;height:185px}.oli-birthday-seal{position:absolute;bottom:3px;left:50%;transform:translateX(-50%) rotate(-3deg);display:flex;align-items:center;justify-content:center;gap:6px;padding:7px 12px;background:linear-gradient(120deg,#fff4db,#f8e4ed);border:1px solid #eadaca;border-radius:48% 52% 46% 54%;width:126px;height:89px;box-sizing:border-box}.oli-birthday-face{position:relative;display:block;width:62px;height:62px;overflow:hidden;border-radius:50%;background:#fffdf9;border:2px solid #fff8ed;flex-shrink:0}.oli-birthday-face img{position:absolute;max-width:none!important;width:266.333%;height:auto;left:-136.667%;top:-3.333%}.oli-three-candle{width:42px;height:69px;overflow:visible}
@media(max-width:600px){.gift-unified .aunt-party-portrait{height:185px}.gift-unified .aunt-party-portrait>img{height:100px;inset:3px 8px auto}.aunt-party-decor{height:120px}.oli-birthday-seal{width:102px;height:74px;padding:5px 8px;bottom:0;gap:3px}.oli-birthday-face{width:47px;height:47px}.oli-three-candle{width:33px;height:56px}}
@media(max-width:370px){.gift-unified .aunt-party-portrait{height:176px}.gift-unified .aunt-party-portrait>img{inset:3px 5px auto}}

.home-celebration-band .celebration-replay-labeled{width:auto;height:auto;min-height:44px;display:inline-flex;gap:7px;padding:8px 12px;flex-wrap:nowrap;white-space:normal;max-width:150px;text-align:left;border-radius:18px}.home-celebration-band .celebration-replay-labeled svg{flex-shrink:0;width:21px;height:21px}.home-celebration-band .celebration-replay-labeled span{font-size:12px!important;line-height:1.25}.gift-unified .home-celebration-band{flex-wrap:wrap}.gift-unified .home-celebration-band .celebration-replay-labeled{margin-left:88px}
@media(max-width:600px){.gift-unified .home-celebration-band .celebration-replay-labeled{position:static;width:auto;height:auto;margin-left:0;padding:6px 9px;min-height:40px;max-width:160px}.home-celebration-band .celebration-replay-labeled span{font-size:11px!important}}

.oli-birthday-seal{width:170px;height:102px;border:0;border-radius:0;background:none;box-shadow:none;padding:0;gap:7px;transform:translateX(-50%);bottom:0;align-items:end}.oli-real-birthday-face{width:86px;height:99px;object-fit:contain}.oli-birthday-cake{width:73px;height:90px;flex-shrink:0}.gift-unified .aunt-party-portrait{height:270px}
@media(max-width:600px){.oli-birthday-seal{width:128px;height:82px;padding:0;gap:3px}.oli-real-birthday-face{width:67px;height:80px}.oli-birthday-cake{width:56px;height:73px}.gift-unified .aunt-party-portrait{height:195px}}
@media(max-width:370px){.oli-birthday-seal{width:112px;gap:1px}.oli-real-birthday-face{width:59px}.oli-birthday-cake{width:50px}.gift-unified .aunt-party-portrait{height:190px}}

/* As três fotografias formam uma única composição de aniversário. */
.gift-unified .aunt-party-portrait{height:285px}.oli-birthday-seal{width:176px;height:122px;gap:8px;bottom:0}.oli-real-birthday-face{width:96px;height:122px;object-fit:contain;object-position:center bottom}.oli-birthday-cake{width:69px;height:86px;margin-bottom:3px}.gift-unified .aunts-gift-stars{opacity:.22}
@media(max-width:600px){.gift-unified .aunt-party-portrait{height:207px}.oli-birthday-seal{width:130px;height:100px;gap:3px}.oli-real-birthday-face{width:72px;height:100px}.oli-birthday-cake{width:53px;height:70px;margin-bottom:2px}}
@media(max-width:370px){.gift-unified .aunt-party-portrait{height:199px}.oli-birthday-seal{width:114px;gap:2px}.oli-real-birthday-face{width:65px;height:96px}.oli-birthday-cake{width:47px;height:64px}}

/* Trio fotográfico, com rostos na mesma escala e a Oli entre as titias. */
.home-celebration-row.gift-unified{grid-template-columns:minmax(0,1fr) 340px;column-gap:14px}.gift-unified .aunt-party-portrait{width:340px;height:228px}.birthday-trio{position:absolute;left:0;top:12px;width:340px;height:175px}.trio-aunt{display:block;position:absolute;top:0;width:108px;height:173px;overflow:hidden}.trio-aunt img{position:absolute!important;max-width:none!important;width:306px!important;height:172px!important;top:0;left:-28px;object-fit:fill!important}.trio-left{left:5px}.trio-right{right:5px}.trio-right img{left:-167px}.birthday-trio>.oli-real-birthday-face{position:absolute;left:50%;transform:translateX(-50%);top:-18px;width:130px;height:180px;object-fit:contain;object-position:center bottom}.oli-birthday-seal{width:90px;height:84px;bottom:0;left:50%;gap:0;justify-content:center}.oli-birthday-cake{width:73px;height:82px;margin:0}.aunt-party-decor{left:-8px;right:-8px;height:200px;z-index:-1}
@media(max-width:760px){.home-celebration-row.gift-unified{grid-template-columns:1fr;row-gap:18px}.gift-unified .home-celebration-band{grid-column:1;grid-row:1}.gift-unified .aunts-gift-banner>div{grid-column:1;grid-row:2;padding:0;text-align:center}.gift-unified .aunts-gift-banner p{max-width:530px;margin:auto}.gift-unified .aunt-party-portrait{grid-column:1;grid-row:3;width:310px;height:215px}.birthday-trio{left:50%;transform:translateX(-50%);width:310px}.trio-left{left:0}.trio-right{right:0}.birthday-trio>.oli-real-birthday-face{width:122px;height:177px}.gift-unified .home-celebration-band .celebration-replay-labeled{margin-left:auto;position:static;max-width:150px}.gift-unified .home-celebration-band strong{font-size:34px}.gift-unified .home-party-emblem{width:48px;height:48px}.oli-birthday-seal{width:82px;height:76px}.oli-birthday-cake{width:65px;height:76px}}
@media(max-width:370px){.gift-unified .aunt-party-portrait{width:272px;height:205px}.birthday-trio{width:272px;height:162px}.trio-aunt{width:98px;height:158px}.trio-aunt img{width:278px!important;height:156px!important;left:-25px}.trio-right img{left:-152px}.birthday-trio>.oli-real-birthday-face{width:110px;height:162px;top:-16px}.gift-unified .home-party-emblem{display:none}.gift-unified .home-celebration-band strong{font-size:32px}}

/* Compensar a margem transparente da foto da Oli para igualar os rostos. */
.birthday-trio>.oli-real-birthday-face{width:190px;height:180px;top:-18px}.gift-unified .aunt-party-portrait{height:252px}.oli-birthday-seal{height:66px;bottom:0}.oli-birthday-cake{width:62px;height:66px}
@media(max-width:760px){.birthday-trio>.oli-real-birthday-face{width:190px;height:180px;top:-18px}.gift-unified .aunt-party-portrait{height:252px}}
@media(max-width:370px){.birthday-trio>.oli-real-birthday-face{width:172px;height:166px;top:-16px}.gift-unified .aunt-party-portrait{height:238px}}

.oli-birthday-seal{left:calc(50% + 100px);bottom:8px}
@media(max-width:370px){.oli-birthday-seal{left:calc(50% + 88px);bottom:8px}}

/* O único bolo pertence ao título da festa. */
.gift-unified .home-party-emblem .oli-birthday-cake{width:100%;height:100%;margin:0}.gift-unified .aunt-party-portrait{height:190px}
@media(max-width:760px){.gift-unified .aunt-party-portrait{height:190px}.gift-unified .home-party-emblem{width:57px;height:64px}}
@media(max-width:370px){.gift-unified .aunt-party-portrait{height:178px}.gift-unified .home-party-emblem{display:block;width:43px;height:53px}}
/* Adult account management: names and credentials stay separate. */
.account-manager .field{display:grid;gap:8px;margin:16px 0}
.account-manager input,.account-manager select{width:100%;min-height:46px;padding:11px 13px;border:1px solid var(--color-border);border-radius:12px;font:inherit;color:var(--color-text);background:var(--color-surface)}
.account-password{display:flex;gap:6px;align-items:center}.account-password input{min-width:0;flex:1}.account-password button{flex:none}
.account-create{padding:16px;border:1px solid var(--color-border);border-radius:18px;background:var(--color-background)}
.account-create summary{font-weight:700;cursor:pointer}.account-manager .family-user{padding:16px 0;border-bottom:1px solid var(--color-border);display:grid;gap:7px}.account-manager .family-user .row{flex-wrap:wrap}.account-manager .note{font-size:.85rem}.account-success{padding:12px;border-radius:12px;background:#dcece3;color:#234936}.account-status{overflow-wrap:anywhere}

/* Birthday typography and a replay label that stays on one line. */
.home-celebration-band strong{font-family:var(--font-title);font-weight:800}
.home-celebration-band .celebration-replay-labeled{white-space:nowrap;max-width:none;width:fit-content;flex-shrink:0}
.home-celebration-band .celebration-replay-labeled span{white-space:nowrap}
@media(max-width:760px){.gift-unified .home-celebration-band .celebration-replay-labeled{max-width:none;white-space:nowrap}}

.portfolio-notice{position:relative;z-index:100;padding:12px 20px;text-align:center;background:#efe5f4;color:#263b46;font-size:13px}.portfolio-notice a{color:#245977;text-decoration:underline}.trio-aunt img{object-fit:contain!important;width:100%!important;left:0!important;top:0!important}.oli-real-birthday-face{object-fit:contain}.home-page .topbar{display:none}

.birthday-trio .trio-aunt img{height:100%!important;object-fit:contain!important}.family-photo-avatar img{height:100%;object-fit:contain}.oli-real-birthday-face{object-fit:contain!important}