@charset "UTF-8";
:root { color-scheme:light; font-family:ui-rounded,"SF Pro Rounded","Avenir Next",Avenir,"Segoe UI",sans-serif; color:#294d46; background:#f3eddf; font-synthesis:none; --ink:#294d46; --muted:#7b8a77; --teal:#378f79; --orange:#e59b63; --paper:#fffcf5; }
* { box-sizing:border-box; }
body { margin:0; min-width:280px; min-height:100vh; min-height:100dvh; background:radial-gradient(ellipse at 85% 6%,#e2e9d7 0,transparent 42%),#f3eddf; -webkit-tap-highlight-color:transparent; }
button,input,textarea { font:inherit; }
button,a,input,textarea { -webkit-tap-highlight-color:transparent; }
button,a { touch-action:manipulation; }
button { cursor:pointer; }
button:disabled { cursor:wait; }
a { color:inherit; text-decoration:none; }
[hidden] { display:none!important; }
.icon-library { position:absolute; width:0; height:0; overflow:hidden; pointer-events:none; }
.icon { width:20px; height:20px; flex-shrink:0; display:block; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
:focus-visible { outline:3px solid #218779; outline-offset:4px; }
.page-wrap { width:min(100%,740px); margin:0 auto; padding:24px 20px 22px; padding-top:max(24px,env(safe-area-inset-top)); padding-bottom:max(22px,env(safe-area-inset-bottom)); }
.page-nav { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:0 5px 22px; }
.brand { display:flex; align-items:center; gap:9px; font-weight:800; font-size:14px; letter-spacing:-.3px; }
.brand-icon { display:grid; place-items:center; width:30px; height:30px; border-radius:10px; background:#d6e6d7; color:#478d73; transform:rotate(-7deg); }
.brand-icon .icon { width:20px; height:20px; }
.back-link { display:flex; align-items:center; gap:7px; color:#83927d; font-size:11px; font-weight:650; min-height:40px; }
.back-link .icon { width:14px; height:14px; transform:rotate(180deg); }
.feedback-card { padding:30px 34px 26px; border:1px solid #fff; border-radius:28px; background:#fffcf5; box-shadow:0 15px 50px #4e64470c,0 2px 3px #4e644704; }
.intro { display:flex; align-items:center; justify-content:space-between; gap:15px; }
.eyebrow { margin:0 0 8px; color:#819576; font-size:9px; font-weight:800; letter-spacing:1.6px; text-transform:uppercase; }
h1 { font-size:31px; line-height:1.13; font-weight:800; letter-spacing:-1px; margin:0; }
.intro-copy { max-width:360px; color:#88937e; font-size:12px; line-height:1.5; margin:10px 0 0; }
.little-blocks { position:relative; flex:0 0 67px; height:61px; margin-right:2px; transform:rotate(-5deg); }
.little-blocks span { position:absolute; width:26px; height:24px; border-radius:7px; background:#a9c3a3; box-shadow:0 5px 0 #8fac8e; left:6px; bottom:2px; }
.little-blocks span:nth-child(2) { background:#f0bc82; box-shadow:0 5px 0 #d89d67; left:38px; bottom:2px; transform:rotate(7deg); }
.little-blocks span:nth-child(3) { background:#69b4a3; box-shadow:0 5px 0 #519682; left:20px; bottom:34px; }
.little-blocks .icon { position:absolute; right:-8px; top:-6px; width:14px; height:14px; color:#d2b16b; }
.form-note { margin:23px 0 22px; border-top:1px solid #e9ecdf; padding-top:16px; color:#8d9884; font-size:10px; line-height:1.5; }
fieldset { border:0; min-width:0; margin:0; padding:0; }
.answer-fields { display:flex; flex-direction:column; gap:24px; }
.answer-fields:disabled { opacity:.62; }
.ratings-grid { display:grid; grid-template-columns:1fr 1fr; gap:25px; }
.question legend { width:100%; margin:0 0 12px; padding:0; font-size:12px; line-height:1.6; font-weight:750; letter-spacing:-.12px; }
.question-number { display:inline-grid; place-items:center; width:19px; height:19px; margin-right:6px; background:#e9efdf; border-radius:7px; color:#7c9773; font-size:10px; vertical-align:baseline; }
.rating-options { display:grid; grid-template-columns:repeat(5,1fr); gap:7px; }
.rating-options label,.map-options label,.replay-options label { position:relative; display:block; min-width:0; cursor:pointer; }
.rating-options input,.map-options input,.replay-options input { position:absolute; width:1px; height:1px; margin:0; opacity:0; pointer-events:none; }
.rating-options label > span { display:grid; place-items:center; height:45px; border:1px solid #e5e9db; border-bottom-width:3px; border-radius:12px; color:#8a9b83; background:#f6f7ed; font-size:18px; font-weight:750; transition:background .12s,border-color .12s,color .12s,transform .12s; }
.rating-options input:checked + span { color:#fffdf4; background:#64a68f; border-color:#64a68f; border-bottom-color:#4d8d75; }
.orange-rating input:checked + span { background:#e7a269; border-color:#e7a269; border-bottom-color:#c58855; }
.rating-options input:focus-visible + span,.map-options input:focus-visible + span,.replay-options input:focus-visible + span { outline:3px solid #218779; outline-offset:3px; }
.rating-scale { display:flex; justify-content:space-between; gap:6px; margin:8px 1px 0; font-size:9px; line-height:1.3; color:#98a08f; }
.map-options { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.map-choice { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; min-height:107px; padding:12px 9px; border:1px solid #e4e8da; border-bottom-width:3px; border-radius:16px; background:#f5f7ed; text-align:center; }
.map-art { display:grid; place-items:center; width:46px; height:43px; }
.map-art > svg { display:block; width:46px; height:46px; }
.map-name { display:block; font-size:11px; line-height:1.3; color:#829177; font-weight:700; }
.garden-choice { background:#f3f5e8; }
.harbour-choice { background:#f1f5ef; }
.choice-check { position:absolute; top:8px; right:8px; width:16px; height:16px; display:grid; place-items:center; border-radius:50%; border:1px solid #d6dfce; color:transparent; }
.choice-check .icon { width:11px; height:11px; stroke-width:2.6; }
.map-options input:checked + .map-choice { background:#e7f0df; border-color:#8ab695; border-bottom-color:#75a384; }
.map-options input:checked + .map-choice .map-name { color:#487d63; }
.map-options input:checked + .map-choice .choice-check { color:#fffdf5; background:#65a186; border-color:#65a186; }
.replay-options { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.replay-options label > span { display:grid; place-items:center; min-height:43px; padding:8px; border:1px solid #e4e8da; border-bottom-width:3px; border-radius:12px; color:#8b9781; background:#f7f7ed; text-align:center; font-size:11px; font-weight:650; line-height:1.3; }
.replay-options input:checked + span { color:#487d63; background:#e7f0df; border-color:#8ab695; border-bottom-color:#75a384; }
.comment-question > label { display:block; margin:0 0 10px; font-size:12px; font-weight:750; }
.comment-question > label span { margin-left:5px; color:#a1a896; font-size:10px; font-weight:500; }
textarea { display:block; width:100%; max-width:100%; resize:vertical; min-height:88px; border:1px solid #e0e6d6; border-radius:13px; padding:12px 13px; font-size:12px; line-height:1.55; color:#547260; background:#f9f9f0; }
textarea::placeholder { color:#a4ad99; }
textarea:focus { background:#fffdf6; }
.comment-footer { display:flex; justify-content:space-between; gap:10px; margin-top:6px; }
#comment-count { margin-left:auto; color:#a2aa98; font-size:9px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.submit-row { display:flex; align-items:center; justify-content:space-between; gap:15px; padding-top:2px; }
.submit-row > p { color:#98a28d; font-size:10px; line-height:1.55; margin:0; }
.primary-button { display:inline-flex; align-items:center; justify-content:center; gap:17px; min-height:47px; padding:12px 18px 10px; border:1px solid #418c74; border-bottom:3px solid #337961; border-radius:14px; color:#fffcf0; background:#519c82; font-weight:750; font-size:12px; line-height:1.3; }
.primary-button .icon { width:17px; height:17px; }
.primary-button:active { transform:translateY(1px); }
.field-error { margin:7px 0 0; color:#aa694f; font-size:10px; line-height:1.4; }
.comment-footer .field-error { margin-top:0; }
[aria-invalid="true"] + span { border-color:#c99179; }
textarea[aria-invalid="true"] { border-color:#c99179; }
.form-status { margin:13px 0 0; min-height:0; font-size:11px; line-height:1.5; color:#8d7963; }
.form-status:empty { display:none; }
.save-error { margin-top:23px; padding:17px 18px; border:1px solid #ecd9bb; border-radius:16px; background:#fbf0dd; }
.save-error h2 { margin:0 0 7px; font-size:14px; letter-spacing:-.25px; color:#947044; }
.save-error > p { margin:0; font-size:11px; line-height:1.6; color:#a0835b; }
.backup-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:13px; }
.secondary-button { display:inline-flex; align-items:center; gap:7px; min-height:39px; padding:8px 11px; border:1px solid #e6d8bf; border-radius:10px; background:#fff9ec; color:#997c54; font-size:10px; font-weight:650; }
.secondary-button .icon { width:14px; height:14px; }
.save-error .backup-status { margin-top:10px; }
.save-error .backup-status:empty { display:none; }
.manual-copy { margin-top:12px; }
.manual-copy label { display:block; margin-bottom:8px; font-size:11px; font-weight:650; color:#9a7c53; }
.manual-copy textarea { font-size:11px; min-height:140px; }
.success { padding:30px 4px 32px; text-align:center; }
.success-mark { position:relative; display:grid; place-items:center; width:73px; height:73px; margin:0 auto 25px; border:1px solid #cce0c3; border-radius:26px; background:#e0edd5; color:#62977a; transform:rotate(-5deg); }
.success-mark > .icon { width:33px; height:33px; stroke-width:2.4; }
.success-spark { position:absolute; width:23px; height:23px; top:-8px; right:-10px; color:#e2ac64; }
.success h1 { font-size:30px; }
.save-location { margin:13px 0 0; color:#668b6e; font-size:12px; }
.thank-you { margin:8px 0 25px; color:#98a28d; font-size:11px; line-height:1.5; }
.page-footer { margin-top:21px; text-align:center; color:#a1aa96; font-size:10px; letter-spacing:.1px; }
.no-script { margin-top:18px; color:#a07551; font-size:12px; line-height:1.5; }
.hosted-feedback { padding-top:20px; }
.hosted-feedback p { margin:0 0 16px; font-size:16px; line-height:1.6; color:#527461; }
.hosted-feedback .secondary-button { font-size:14px; text-decoration:none; }
.hosted-feedback iframe { display:block; width:100%; height:max(780px,85dvh); margin-top:20px; border:0; }
@media (hover:hover) { .back-link:hover { color:#588471; } .primary-button:hover:not(:disabled) { background:#458e75; } .rating-options label:hover > span { border-color:#afc6a7; } .map-options label:hover > span,.replay-options label:hover > span { border-color:#afc6a7; } .secondary-button:hover { background:#fffdf5; } }
@media (max-width:620px) {
  .page-wrap { padding-left:15px; padding-right:15px; padding-top:max(17px,env(safe-area-inset-top)); }
  .page-nav { margin-bottom:16px; }
  .brand { font-size:12px; gap:7px; }
  .back-link { font-size:10px; gap:5px; }
  .feedback-card { padding:24px 22px 23px; border-radius:23px; }
  h1 { font-size:28px; }
  .intro-copy { font-size:11px; }
  .little-blocks { flex-basis:54px; transform:scale(.85) rotate(-5deg); transform-origin:right center; margin-left:-6px; }
  .eyebrow { font-size:8px; letter-spacing:1.2px; }
  .form-note { margin-top:20px; margin-bottom:20px; font-size:9px; }
  .ratings-grid { grid-template-columns:1fr; gap:23px; }
  .answer-fields { gap:23px; }
  .question legend { margin-bottom:11px; }
  .rating-options label > span { height:47px; }
  .rating-scale { font-size:9px; }
  .map-options { gap:7px; }
  .map-choice { min-height:111px; padding:12px 6px; }
  .map-name { font-size:10px; }
  .choice-check { width:14px; height:14px; top:6px; right:6px; }
  .replay-options { gap:7px; }
  .replay-options label > span { font-size:10px; min-height:45px; padding:7px 4px; }
  textarea { font-size:16px; line-height:1.45; min-height:109px; }
  textarea::placeholder { font-size:12px; }
  .submit-row > p { font-size:9px; }
  .primary-button { font-size:11px; padding:11px 13px 10px; gap:11px; }
  .save-error { padding:15px; }
  .backup-actions { gap:7px; }
  .secondary-button { font-size:10px; }
}
@media (max-width:350px) {
  .page-wrap { padding-left:10px; padding-right:10px; }
  .feedback-card { padding-left:17px; padding-right:17px; }
  h1 { font-size:26px; }
  .intro { gap:7px; }
  .little-blocks { flex-basis:42px; transform:scale(.75) rotate(-5deg); }
  .question legend { font-size:11px; }
  .map-name { font-size:9px; }
  .map-choice { min-height:105px; }
  .submit-row { align-items:stretch; flex-direction:column; gap:11px; }
  .submit-row > p br { display:none; }
  .primary-button { width:100%; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; scroll-behavior:auto!important; } }