:root {
  --ink: #353331;
  --cream: #f7f1e5;
  --paper: rgba(255, 253, 247, .92);
  --pink: #f0a8c6;
  --mint: #c4dda6;
  --blue: #c4def0;
  --shadow: rgba(53, 51, 49, .24);
  font-family: ui-rounded, "SF Pro Rounded", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body, #app { width: 100%; min-width: 320px; height: 100%; margin: 0; }
body { overflow: hidden; color: var(--ink); background: linear-gradient(180deg, #92c9e7 0%, #c9e9f1 64%, #f6f2e8 100%); -webkit-font-smoothing: antialiased; transition: background .35s ease; }
body.studio-theme { background: linear-gradient(180deg, #b9dcec 0%, #d8e5e5 54%, #f3dfd1 100%); }
button, a { font: inherit; }
button { color: inherit; }

#app { position: relative; overflow: hidden; isolation: isolate; }
#scene { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; outline: 0; cursor: grab; }
#scene:active { cursor: grabbing; }

.scene-controls { position: absolute; z-index: 3; top: max(12px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); left: max(14px, env(safe-area-inset-left)); display: flex; align-items: flex-start; justify-content: space-between; pointer-events: none; }
.controls-left, .controls-right { display: flex; align-items: flex-start; gap: 8px; pointer-events: auto; }
.controls-right { gap: 7px; }

.ui-button, .icon-button {
  min-height: 39px;
  border: 2.5px solid var(--ink);
  background: var(--paper);
  box-shadow: 0 3px 0 var(--ink);
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: -.01em;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.ui-button { padding: 0 15px; border-radius: 999px; }
.ui-button span { margin-right: 3px; }
.ui-button.mint { background: rgba(196, 221, 166, .92); }
.booth-exit { display: none; background: rgba(255, 235, 190, .96); }
.booth-exit.is-visible { display: inline-block; animation: booth-exit-pop .25s cubic-bezier(.2, .9, .28, 1.22) both; }
.map-button { background: rgba(255, 249, 229, .94); }
.lang-button { min-width: 54px; padding: 0 10px; background: rgba(196, 221, 166, .95); }
.icon-button { display: grid; width: 39px; place-items: center; border-radius: 50%; background: rgba(255, 253, 247, .96); }
.ui-button:hover, .icon-button:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--ink); }
.ui-button:active, .icon-button:active { transform: translateY(3px); box-shadow: none; }
.ui-button:disabled { cursor: default; opacity: .45; transform: none; box-shadow: 0 2px 0 rgba(53, 51, 49, .5); }
.ui-button.is-active { background: var(--pink); }
.icon-button[aria-pressed="true"] { background: var(--pink); }

@keyframes booth-exit-pop { from { transform: translateY(-8px) scale(.85); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }

.sound-icon { position: relative; display: block; width: 4px; height: 14px; margin-left: 3px; border-radius: 3px; background: var(--ink); }
.sound-icon::before { content: ""; position: absolute; left: -6px; bottom: -2px; width: 10px; height: 6px; border-radius: 50%; background: var(--ink); transform: rotate(-12deg); }
.sound-icon::after { content: ""; position: absolute; top: -1px; left: 2px; width: 8px; height: 3px; border-radius: 3px; background: var(--ink); transform: skewY(-18deg); transform-origin: left center; }

.sky-brand { position: absolute; top: 0; left: 50%; display: grid; color: rgba(255, 255, 255, .9); text-align: center; text-decoration: none; transform: translateX(-50%); pointer-events: auto; filter: drop-shadow(0 2px 1px rgba(48, 85, 105, .12)); }
.sky-brand span { font-family: "Brush Script MT", "Segoe Script", cursive; font-size: clamp(26px, 3vw, 43px); font-weight: 700; letter-spacing: -.06em; line-height: .85; white-space: nowrap; }
.sky-brand small { margin-top: 5px; font-size: 8px; font-weight: 900; letter-spacing: .16em; opacity: .84; }

.hint-card { position: absolute; z-index: 3; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 7px; padding: 8px 16px; border: 2.5px solid var(--ink); border-radius: 999px; background: rgba(255, 250, 238, .93); box-shadow: 0 3px 0 var(--ink); transform: translateX(-50%); font-size: 11px; font-weight: 800; white-space: nowrap; pointer-events: none; }
.hint-card > span:first-child { color: #df7fa7; font-size: 17px; transform: rotate(-13deg); }

.decorate-panel { position: absolute; z-index: 8; top: max(62px, calc(env(safe-area-inset-top) + 50px)); left: max(14px, env(safe-area-inset-left)); width: 255px; padding: 16px; border: 2.5px solid var(--ink); border-radius: 19px 22px 18px 21px; background: rgba(255, 250, 240, .96); box-shadow: 6px 7px 0 rgba(53, 51, 49, .24); opacity: 0; transform: translateX(-18px) rotate(-1deg); pointer-events: none; transition: opacity .2s ease, transform .25s cubic-bezier(.2, .9, .28, 1.16); backdrop-filter: blur(9px); }
.decorate-panel.is-open { opacity: 1; transform: translateX(0) rotate(.2deg); pointer-events: auto; }
.decorate-heading { display: flex; align-items: center; gap: 9px; padding-bottom: 11px; border-bottom: 2px dashed rgba(53, 51, 49, .22); }.decorate-heading > span { display: grid; width: 32px; height: 32px; place-items: center; border: 2px solid var(--ink); border-radius: 12px 15px 12px 14px; background: var(--pink); font-size: 17px; }.decorate-heading b, .decorate-heading small { display: block; }.decorate-heading b { font-size: 15px; }.decorate-heading small { margin-top: 2px; color: #6c6a65; font-size: 10px; font-weight: 700; }
.decorate-drag-tip { margin: 10px 0 0; padding: 8px 9px; border-radius: 10px 12px 11px 9px; background: #edf5dc; color: #4d6346; font-size: 10px; font-weight: 800; line-height: 1.45; }.decorate-drag-tip span { margin-right: 3px; color: #df7fa7; font-size: 14px; }
.decorate-group { padding-top: 11px; }.decorate-group p { margin: 0 0 7px; font-size: 11px; font-weight: 900; }.decorate-options { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }.decorate-options.compact { grid-template-columns: repeat(3, 1fr); }
.decorate-choice, .paint-choice, .floor-choice { display: flex; align-items: center; justify-content: flex-start; gap: 5px; min-height: 32px; padding: 5px 7px; border: 1.8px solid rgba(53, 51, 49, .56); border-radius: 10px 12px 10px 11px; background: #fffdf6; cursor: pointer; font-size: 10px; font-weight: 800; transition: transform .13s ease, border-color .13s ease, box-shadow .13s ease; }.decorate-options.compact button { justify-content: center; gap: 4px; padding: 4px 3px; font-size: 9px; }.decorate-choice:hover, .paint-choice:hover, .floor-choice:hover { transform: translateY(-1px); border-color: var(--ink); }.decorate-choice.is-selected, .paint-choice.is-selected, .floor-choice.is-selected { border: 2px solid var(--ink); box-shadow: 0 2px 0 var(--ink); background: #fff4d7; }
.swatch, .paint { display: inline-block; flex: 0 0 auto; width: 16px; height: 16px; border: 1.5px solid var(--ink); border-radius: 5px 6px 5px 6px; }.swatch.lawn { background: linear-gradient(135deg, #9dc76d 0 50%, #f7f1e5 50%); }.swatch.studio { background: linear-gradient(135deg, #c1977d 0 50%, #c6d9dc 50%); }.paint.sky { background: #83a8c6; }.paint.cream { background: #fff2d0; }.paint.pink { background: #f0a8c6; }.paint.checkers { background: conic-gradient(#353331 25%, #fffdf6 0 50%, #353331 0 75%, #fffdf6 0); background-size: 8px 8px; }.paint.blush { background: #f7cfdd; }.paint.lilac { background: #ddd0ee; }
.decorate-done { width: 100%; margin-top: 14px; min-height: 36px; border: 2px solid var(--ink); border-radius: 11px 13px 11px 12px; background: var(--mint); box-shadow: 0 3px 0 var(--ink); cursor: pointer; font-size: 11px; font-weight: 900; }.decorate-done:active { transform: translateY(3px); box-shadow: none; }
.decorate-reset { width: 100%; margin-top: 9px; min-height: 30px; border: 0; border-bottom: 1.5px dashed rgba(53, 51, 49, .42); background: transparent; color: #6b6762; cursor: pointer; font-size: 10px; font-weight: 800; }.decorate-reset:hover { color: var(--ink); }

.float-label { position: absolute; z-index: 4; display: none; padding: 7px 12px; border: 2px solid var(--ink); border-radius: 999px; background: var(--cream); box-shadow: 3px 4px 0 var(--shadow); font-size: 11px; font-weight: 900; pointer-events: none; white-space: nowrap; }
.float-label::after { content: ""; position: absolute; bottom: -7px; left: 50%; width: 10px; height: 10px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); background: var(--cream); transform: translateX(-50%) rotate(45deg); }

.place-card { position: absolute; z-index: 4; right: max(20px, env(safe-area-inset-right)); bottom: max(70px, calc(env(safe-area-inset-bottom) + 40px)); width: min(300px, calc(100vw - 40px)); padding: 23px 23px 20px; border: 2.5px solid var(--ink); border-radius: 21px 24px 19px 24px; background: rgba(255, 250, 240, .96); box-shadow: 7px 8px 0 rgba(53, 51, 49, .25); opacity: 0; transform: translateY(14px) rotate(1deg); pointer-events: none; transition: opacity .22s ease, transform .25s cubic-bezier(.2, .9, .28, 1.25); backdrop-filter: blur(7px); }
.place-card.is-open { opacity: 1; transform: translateY(0) rotate(-.5deg); pointer-events: auto; }
.place-kicker { margin: 0 0 6px; color: #df7fa7; font-size: 10px; font-weight: 900; letter-spacing: .13em; }
.place-card h1 { margin: 0; font-size: 28px; font-weight: 900; letter-spacing: -.07em; }
.place-card > p:not(.place-kicker) { margin: 10px 0 16px; font-size: 13px; font-weight: 700; line-height: 1.65; }
.close-button { position: absolute; top: 9px; right: 11px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; font-size: 26px; line-height: 22px; }
.close-button:hover { background: #f1d4da; }
.place-action { width: 100%; padding: 10px 13px; border: 2px solid var(--ink); border-radius: 12px; background: var(--mint); box-shadow: 0 3px 0 var(--ink); cursor: pointer; font-size: 12px; font-weight: 900; text-align: left; }
.place-action:active { transform: translateY(3px); box-shadow: none; }.place-action span { float: right; font-size: 17px; line-height: 11px; }

.map-sheet { position: fixed; z-index: 10; inset: 0; display: grid; place-items: center; visibility: hidden; opacity: 0; transition: visibility .25s linear, opacity .25s ease; }
.map-sheet.is-open { visibility: visible; opacity: 1; }
.map-backdrop { position: absolute; inset: 0; background: rgba(51, 67, 77, .36); backdrop-filter: blur(5px); }
.map-panel { position: relative; width: min(590px, calc(100vw - 38px)); padding: 34px; border: 2.5px solid var(--ink); border-radius: 25px 30px 25px 32px; background: #fff8e8; background-image: radial-gradient(rgba(53, 51, 49, .11) 1.1px, transparent 1.25px); background-size: 12px 12px; box-shadow: 10px 13px 0 rgba(41, 50, 57, .24); transform: translateY(13px) rotate(1deg) scale(.98); transition: transform .26s cubic-bezier(.2, .9, .28, 1.18); }
.map-sheet.is-open .map-panel { transform: translateY(0) rotate(-.5deg) scale(1); }
.eyebrow { margin: 0 0 6px; color: #5c7887; font-size: 10px; font-weight: 900; letter-spacing: .16em; }
.map-panel h2 { margin: 0; font-size: 42px; font-weight: 900; letter-spacing: -.08em; }.map-subtitle { margin: 7px 0 20px; font-size: 13px; font-weight: 700; }.map-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
.map-stop { min-height: 146px; padding: 13px 8px; border: 2px solid var(--ink); border-radius: 17px 20px 16px 20px; box-shadow: 3px 4px 0 var(--shadow); cursor: pointer; transition: transform .15s ease; }.map-stop:hover { transform: translateY(-3px) rotate(-1.5deg); }.map-stop.peach { background: #f5bfca; }.map-stop.mint { background: #c4dda6; }.map-stop.blue { background: #c4def0; }.map-stop span, .map-stop b, .map-stop small { display: block; }.map-icon { margin: 1px 0 13px; font-size: 33px; }.map-stop b { font-size: 13px; }.map-stop small { margin-top: 6px; font-size: 10px; font-weight: 700; opacity: .75; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.computer-overlay { position: fixed; z-index: 13; inset: 0; display: grid; place-items: center; visibility: hidden; opacity: 0; pointer-events: none; transition: visibility .22s linear, opacity .22s ease; }
.computer-overlay.is-open { visibility: visible; opacity: 1; pointer-events: auto; }
.computer-backdrop { position: absolute; inset: 0; background: rgba(50, 84, 101, .42); backdrop-filter: blur(10px); }
.computer-window { position: relative; width: min(690px, calc(100vw - 34px)); min-height: min(500px, calc(100vh - 50px)); overflow: hidden; border: 3px solid var(--ink); border-radius: 27px 31px 25px 29px; background: #c5e5ef; box-shadow: 10px 13px 0 rgba(36, 55, 65, .3); transform: translateY(14px) rotate(1deg) scale(.97); transition: transform .27s cubic-bezier(.2, .9, .28, 1.18); }
.computer-overlay.is-open .computer-window { transform: translateY(0) rotate(-.35deg) scale(1); }
.computer-topbar { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 43px 0 15px; border-bottom: 2px solid rgba(53, 51, 49, .36); background: rgba(255, 253, 247, .76); color: #56656e; font-size: 10px; font-weight: 900; letter-spacing: .13em; }
.computer-topbar small { margin-left: auto; color: #8da8af; font-size: 9px; letter-spacing: .04em; }
.computer-mark { color: #87bdca; font-size: 16px; line-height: 1; }
.computer-close { position: absolute; z-index: 2; top: 5px; right: 8px; width: 29px; height: 29px; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; font-size: 25px; line-height: 23px; }
.computer-close:hover { background: rgba(255, 255, 255, .64); }
.computer-lock, .computer-desktop { min-height: 460px; padding: clamp(34px, 7vw, 70px) 25px 28px; text-align: center; }
.computer-lock { background: radial-gradient(circle at 18% 12%, rgba(255,255,255,.75) 0 3%, transparent 3.2%), radial-gradient(circle at 81% 28%, rgba(255,248,218,.62) 0 7%, transparent 7.2%), linear-gradient(145deg, #b8e1ee, #d6eef1 58%, #a6d2de); }
.computer-lock-icon { display: grid; width: 61px; height: 61px; margin: 0 auto 13px; place-items: center; border: 2px solid rgba(53,51,49,.58); border-radius: 21px 24px 18px 22px; background: rgba(255,255,255,.72); box-shadow: 3px 4px 0 rgba(53, 51, 49, .17); color: #5f98aa; font-size: 37px; font-weight: 900; }
.computer-kicker { margin: 0 0 5px; color: #5f8792; font-size: 10px; font-weight: 900; letter-spacing: .18em; }.computer-lock h2, .computer-desktop h2 { margin: 0; color: #354e59; font-size: clamp(30px, 5vw, 49px); font-weight: 900; letter-spacing: -.08em; }.computer-lock > p:not(.computer-kicker):not(.computer-password-error) { margin: 10px 0 21px; color: #58747d; font-size: 13px; font-weight: 800; }
.computer-unlock-form { display: flex; width: min(365px, 100%); margin: 0 auto; padding: 5px; border: 2px solid rgba(53,51,49,.62); border-radius: 15px 18px 14px 17px; background: rgba(255,255,255,.84); box-shadow: 3px 4px 0 rgba(53, 51, 49, .16); }.computer-unlock-form input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: #3b5862; font: inherit; font-size: 13px; font-weight: 800; }.computer-unlock-form input::placeholder { color: #91adb4; }.computer-unlock-form button { padding: 8px 12px; border: 2px solid var(--ink); border-radius: 10px 12px 9px 11px; background: #f8d49f; box-shadow: 0 2px 0 var(--ink); cursor: pointer; font-size: 11px; font-weight: 900; }.computer-unlock-form button:active { transform: translateY(2px); box-shadow: none; }.computer-password-error { min-height: 18px; margin: 11px 0 0; color: #bb5e75; font-size: 11px; font-weight: 900; }
.computer-desktop { position: relative; min-height: 460px; padding: 22px; overflow: auto; background: linear-gradient(145deg, #b7e2ef 0%, #d8f0e8 53%, #fbe9bf 100%); color: #375460; text-align: left; }.calendar-heading, .agenda-heading, .calendar-toolbar, .schedule-form-row, .schedule-form-actions { display: flex; align-items: center; }.calendar-heading { justify-content: space-between; margin-bottom: 15px; }.calendar-kicker, .agenda-heading p { margin: 0 0 3px; color: #668b94; font-size: 10px; font-weight: 900; letter-spacing: .14em; }.calendar-desktop h2 { margin: 0; color: #354e59; font-size: 31px; letter-spacing: -.06em; }.calendar-today, .agenda-heading > button, .calendar-toolbar button, .schedule-form button, .agenda-actions button { border: 2px solid rgba(53,51,49,.62); border-radius: 10px 12px 9px 11px; background: rgba(255,253,247,.86); box-shadow: 2px 3px 0 rgba(53,51,49,.16); color: #39525b; cursor: pointer; font: inherit; font-size: 11px; font-weight: 900; }.calendar-today, .agenda-heading > button { padding: 7px 10px; }.calendar-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(225px, .85fr); gap: 13px; }.calendar-panel, .agenda-panel { min-width: 0; padding: 13px; border: 2px solid rgba(53,51,49,.48); border-radius: 17px 20px 16px 19px; background: rgba(255,255,255,.68); box-shadow: 3px 4px 0 rgba(53,51,49,.13); }.calendar-toolbar { justify-content: space-between; gap: 8px; margin-bottom: 11px; }.calendar-toolbar p { margin: 0; color: #45616a; font-size: 13px; font-weight: 900; }.calendar-toolbar button { width: 27px; height: 26px; padding: 0; font-size: 20px; line-height: 19px; }.calendar-weekdays, .calendar-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }.calendar-weekdays { margin-bottom: 5px; color: #77949b; text-align: center; font-size: 9px; font-weight: 900; }.calendar-day { position: relative; aspect-ratio: 1; min-height: 30px; padding: 0; border: 0; border-radius: 10px 12px 9px 11px; background: transparent; color: #4f6c74; cursor: pointer; font: inherit; font-size: 11px; font-weight: 900; }.calendar-day:hover { background: rgba(255,255,255,.9); }.calendar-day.is-today { color: #c86389; }.calendar-day.is-selected { background: #f3b3c9; box-shadow: inset 0 0 0 2px rgba(53,51,49,.54); color: #553946; }.calendar-day.has-items::after { position: absolute; right: 50%; bottom: 3px; width: 4px; height: 4px; border-radius: 50%; background: #6ea0ac; content: ''; transform: translateX(50%); }.calendar-day.is-selected::after { background: #fff9ec; }.calendar-blank { min-height: 30px; }.agenda-heading { justify-content: space-between; gap: 8px; margin-bottom: 11px; }.agenda-heading h3 { margin: 0; color: #45616a; font-size: 15px; font-weight: 900; }.agenda-heading > button { background: #f8d49f; }.agenda-list { display: grid; gap: 7px; max-height: 243px; margin: 0; padding: 0; overflow: auto; list-style: none; }.agenda-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 7px; padding: 8px; border: 1px solid rgba(53,51,49,.29); border-radius: 11px 13px 10px 12px; background: rgba(255,253,247,.8); }.agenda-time { min-width: 35px; color: #d17396; font-size: 10px; font-weight: 900; }.agenda-item strong, .agenda-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.agenda-item strong { color: #405b64; font-size: 12px; }.agenda-item small { margin-top: 2px; color: #789098; font-size: 9px; font-weight: 800; }.agenda-actions { display: flex; gap: 4px; }.agenda-actions button { padding: 3px 5px; font-size: 9px; box-shadow: none; }.agenda-actions button:last-child { color: #bc647d; }.agenda-empty { margin: 27px 0 0; color: #789098; text-align: center; font-size: 11px; font-weight: 800; }.schedule-form { display: grid; gap: 7px; margin-bottom: 9px; padding: 9px; border: 1px dashed rgba(53,51,49,.45); border-radius: 12px; background: rgba(255,255,255,.68); }.schedule-form input { box-sizing: border-box; min-width: 0; width: 100%; border: 1px solid rgba(53,51,49,.37); border-radius: 8px; outline: none; background: rgba(255,255,255,.9); color: #405b64; padding: 6px 7px; font: inherit; font-size: 11px; font-weight: 800; }.schedule-form input:focus { border-color: #d17396; box-shadow: 0 0 0 2px rgba(241,173,198,.44); }.schedule-form-row { gap: 6px; }.schedule-form-row input:first-child { max-width: 76px; }.schedule-form-actions { justify-content: flex-end; gap: 6px; }.schedule-form button { padding: 5px 8px; }.schedule-form button[type="submit"] { background: #f8d49f; }

.guestbook-overlay { position: fixed; z-index: 14; inset: 0; display: grid; place-items: center; visibility: hidden; opacity: 0; pointer-events: none; transition: visibility .22s linear, opacity .22s ease; }
.guestbook-overlay.is-open { visibility: visible; opacity: 1; pointer-events: auto; }
.guestbook-backdrop { position: absolute; inset: 0; background: rgba(55, 63, 72, .42); backdrop-filter: blur(8px); }
.guestbook-window { position: relative; width: min(660px, calc(100vw - 34px)); max-height: min(760px, calc(100vh - 30px)); overflow: auto; padding: 30px 30px 25px; border: 3px solid var(--ink); border-radius: 27px 31px 25px 29px; background: #fff8e8; box-shadow: 10px 13px 0 rgba(36, 55, 65, .28); transform: translateY(14px) rotate(1deg) scale(.97); transition: transform .27s cubic-bezier(.2, .9, .28, 1.18); }
.guestbook-overlay.is-open .guestbook-window { transform: translateY(0) rotate(-.35deg) scale(1); }
.guestbook-heading { display: flex; align-items: center; gap: 13px; padding-right: 35px; }.guestbook-heading .eyebrow { margin-bottom: 2px; }.guestbook-heading h2 { margin: 0; color: #49515a; font-size: clamp(25px, 5vw, 40px); letter-spacing: -.07em; }.guestbook-pin { display: grid; width: 50px; height: 50px; flex: 0 0 auto; place-items: center; border: 2px solid var(--ink); border-radius: 17px 21px 15px 20px; background: #f5c5d3; box-shadow: 3px 4px 0 rgba(53,51,49,.16); color: #fff5de; font-size: 27px; }.guestbook-intro { margin: 9px 0 17px; color: #71808a; font-size: 12px; font-weight: 800; }.guestbook-form { padding: 15px; border: 2px dashed #d6b6a8; border-radius: 17px 21px 15px 19px; background: rgba(255,255,255,.66); }.guestbook-form label { display: block; margin-bottom: 11px; color: #64717a; font-size: 11px; font-weight: 900; }.guestbook-form input, .guestbook-form textarea { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; padding: 9px 11px; border: 2px solid #c7d4d7; border-radius: 11px 14px 10px 13px; outline: 0; background: #fffdf7; color: #4b5960; font: inherit; font-size: 12px; font-weight: 700; resize: vertical; }.guestbook-form input:focus, .guestbook-form textarea:focus { border-color: #85baca; box-shadow: 0 0 0 3px rgba(133,186,202,.18); }.guestbook-form-footer { display: flex; align-items: center; gap: 10px; justify-content: space-between; }.guestbook-form-footer span { min-height: 17px; color: #a26978; font-size: 10px; font-weight: 800; }.guestbook-form-footer button { padding: 9px 13px; border: 2px solid var(--ink); border-radius: 11px 14px 10px 13px; background: #f6c7d3; box-shadow: 0 3px 0 var(--ink); cursor: pointer; color: var(--ink); font-size: 11px; font-weight: 900; }.guestbook-form-footer button:active { transform: translateY(3px); box-shadow: none; }.guestbook-form-footer button:disabled { cursor: wait; opacity: .58; }.guestbook-list { display: grid; gap: 9px; margin-top: 17px; }.guestbook-empty, .guestbook-error { padding: 22px 16px; border-radius: 14px 17px 12px 16px; background: #e7f2ed; color: #6f8582; text-align: center; font-size: 11px; font-weight: 800; }.guestbook-error { background: #f8e2df; color: #a9666d; }.guestbook-note { position: relative; padding: 12px 14px 11px; border-radius: 7px 11px 8px 10px; box-shadow: 3px 4px 0 rgba(53,51,49,.12); color: #4e5b61; }.guestbook-note:nth-child(3n + 1) { background: #fff0a9; transform: rotate(-.6deg); }.guestbook-note:nth-child(3n + 2) { background: #cce8e1; transform: rotate(.7deg); }.guestbook-note:nth-child(3n) { background: #f7c9d5; transform: rotate(-.3deg); }.guestbook-note b { display: block; font-size: 12px; }.guestbook-note time { display: block; margin-top: 2px; color: rgba(78,91,97,.64); font-size: 9px; font-weight: 800; }.guestbook-note p { margin: 8px 0 0; white-space: pre-wrap; word-break: break-word; font-size: 12px; font-weight: 700; line-height: 1.5; }
.toast { position: absolute; z-index: 12; top: max(64px, calc(env(safe-area-inset-top) + 52px)); left: 50%; padding: 9px 15px; border-radius: 999px; background: var(--ink); color: var(--cream); font-size: 12px; font-weight: 800; white-space: nowrap; transform: translate(-50%, -10px); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; }.toast.show { transform: translate(-50%, 0); opacity: 1; }

@media (max-width: 760px) {
  .guestbook-window { width: min(560px, calc(100vw - 22px)); padding: 23px 17px 18px; max-height: calc(100vh - 18px); }.guestbook-heading { gap: 9px; }.guestbook-pin { width: 42px; height: 42px; font-size: 22px; }.guestbook-form { padding: 12px; }
}

@media (max-width: 385px) { #recenterButton { display: none; }.hint-card { font-size: 9px; }.map-stop small { display: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }