.sea-surface{position:absolute;inset:0;z-index:35;overflow:hidden;background:#d7e6e5;color:#294c48;isolation:isolate;animation:sea-arrival .65s ease both;}
.sea-surface[hidden]{display:none;}
.sea-surface *{box-sizing:border-box;letter-spacing:0;}
.sea-art{position:absolute;touch-action:none;user-select:none;}
.sea-painting,.sea-water{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;}
.sea-water{z-index:1;}
.sea-water[hidden]{display:none;}
.sea-object{position:absolute;z-index:3;padding:0;border:0;background:transparent;cursor:pointer;}
.sea-object:hover{background:#eaf5f012;}
.sea-object:focus-visible{outline:0;background:#f1f9f034;box-shadow:inset 0 0 0 3px #fff9;}
.sea-heading{position:absolute;top:28px;left:30px;z-index:5;pointer-events:none;text-shadow:0 1px 10px #f4fbfbd9;}
.sea-heading>p{font:10px/1.4 Arial,sans-serif;margin:0 0 7px;}
.sea-heading h1{font:30px/1.35 "Songti SC",serif;margin:0 0 10px;font-weight:400;}
.sea-moment{display:flex;gap:12px;font:12px/1.5 Arial,"PingFang SC",sans-serif;font-variant-numeric:tabular-nums;}
.sea-surface[data-phase="night"] .sea-heading{color:#f0f4f0;text-shadow:0 1px 9px #182c35;}
.sea-tools{position:absolute;top:26px;right:28px;z-index:12;display:flex;gap:9px;}
.sea-icon,.sea-preferences>summary{width:42px;height:42px;display:grid;place-items:center;border:1px solid #d3e0db;background:#f8fbf4ef;color:#41615d;border-radius:6px;padding:10px;cursor:pointer;}
.sea-icon svg,.sea-preferences>summary svg{width:20px;height:20px;}
.sea-icon:hover,.sea-preferences>summary:hover{background:#fff;}
.sea-preferences>summary{list-style:none;}
.sea-preferences>summary::-webkit-details-marker{display:none;}
.sea-preferences{position:relative;}
.sea-menu{position:absolute;right:0;top:50px;width:254px;padding:19px;background:#fafcf8f7;border:1px solid #d3dfd9;border-radius:6px;box-shadow:0 8px 24px #14353921;line-height:1.7;font:14px/1.7 "PingFang SC",sans-serif;}
.sea-menu label:not(.sea-check){display:block;margin:0 0 7px;}
.sea-menu label.sea-season-label{margin-top:15px}
.sea-menu{max-height:calc(100dvh - 160px);overflow:auto;overscroll-behavior:contain}
.sea-menu select,.sea-panel select,.sea-panel input:not([type=checkbox]){display:block;width:100%;min-width:0;height:44px;padding:8px 10px;border:1px solid #c5d3ce;background:#fffefa;border-radius:3px;font:14px/1.5 "PingFang SC",sans-serif;color:#35544b;}
.sea-menu input[type=range]{display:block;width:100%;accent-color:#5c8d83;margin:10px 0 20px;}
.sea-check{display:flex;gap:9px;align-items:center;}
.sea-check input{width:18px;height:18px;accent-color:#57887e;}
.sea-pan{position:absolute;right:28px;top:47%;z-index:7;display:flex;gap:9px;}
.sea-pan .sea-icon{background:#f9fcf4de;}
.sea-footer{position:absolute;left:26px;right:26px;bottom:24px;z-index:8;display:flex;align-items:center;justify-content:space-between;gap:16px;}
.sea-return,.sea-activities button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:12px 16px;border:0;background:#fbfcf5ed;color:#36574f;font:14px/1.5 "PingFang SC",sans-serif;cursor:pointer;}
.sea-return{border:1px solid #d6dfd6;border-radius:5px;}
.sea-return svg,.sea-activities svg{width:18px;height:18px;flex:none;}
.sea-activities{display:flex;background:#fbfcf5ed;border:1px solid #d6dfd6;border-radius:6px;overflow:hidden;}
.sea-activities button{background:transparent;border-right:1px solid #d9e3db;min-width:118px;}
.sea-activities button:last-child{border:0;}
.sea-activities button:hover{background:#e7f1ec;}
.sea-activities small{font-size:11px;display:block;font-variant-numeric:tabular-nums;}
.sea-panel{position:fixed;inset:auto 28px 100px auto;margin:0;width:min(420px,calc(100% - 48px));max-height:calc(100% - 148px);overflow:auto;padding:26px 28px 28px;border:1px solid #d4ded3;border-radius:6px;background:#fbfcf7f7;color:#37574d;box-shadow:0 10px 50px #16393a20;}
.sea-panel::backdrop{background:#123d4712;}
.sea-surface[data-view="sea/listen"] .sea-panel{left:28px;right:auto;}
.sea-surface[data-view="sea/sand"] .sea-panel{left:50%;right:auto;transform:translateX(-50%);}
.sea-close{float:right;width:34px;height:34px;padding:8px;margin:-8px -8px 0 12px;}
.sea-panel h2{font:24px/1.45 "Songti SC",serif;font-weight:400;margin:4px 30px 22px 0;}
.sea-eyebrow{font:10px/1.5 Arial,"PingFang SC",sans-serif;color:#8b7179;margin:0 0 9px;}
.sea-label{display:block;font:14px/1.6 "PingFang SC",sans-serif;margin:17px 0 9px;}
.sea-panel textarea{display:block;width:100%;min-width:0;min-height:104px;max-height:240px;resize:vertical;border:1px solid #c8d6cf;border-radius:3px;background:#fffef9;padding:12px;font:16px/1.8 "Songti SC",serif;color:#35544b;}
.sea-note{font:12px/1.7 "PingFang SC",sans-serif;color:#6f837b;margin:12px 0 17px;overflow-wrap:anywhere;}
.sea-primary,.sea-secondary{border:1px solid #66887b;min-height:43px;padding:10px 16px;font:14px/1.5 "PingFang SC",sans-serif;cursor:pointer;border-radius:4px;color:#fff;background:#50766b;}
.sea-secondary{background:#fafcf6eb;color:#46685c;border-color:#cbd9cf;}
.sea-primary:disabled,.sea-secondary:disabled{opacity:.55;cursor:default;}
.sea-actions{display:flex;gap:10px;align-items:center;}
.sea-countdown{font:48px/1.2 "Songti SC",serif;font-variant-numeric:tabular-nums;margin:24px 0 8px;min-height:58px;}
.sea-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
.sea-engraving-fallback{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;mix-blend-mode:multiply;}
.sea-engraving-fallback[hidden]{display:none;}
.sea-sand-actions{position:absolute;z-index:9;left:50%;top:28px;transform:translateX(-50%);display:flex;gap:10px;white-space:nowrap;}
.sea-sand-actions[hidden]{display:none;}
.sea-message{position:absolute;z-index:100;top:82px;left:50%;transform:translateX(-50%);margin:0;max-width:calc(100% - 28px);padding:9px 15px;background:#f9fcf5f5;border:1px solid #d2dfd6;border-radius:3px;color:#466558;font:13px/1.6 "PingFang SC",sans-serif;pointer-events:none;}
.sea-tip{position:absolute;z-index:9;max-width:220px;padding:8px 11px;background:#fafcf6ec;border:1px solid #d6e1d8;border-radius:3px;font:12px/1.4 "PingFang SC",sans-serif;pointer-events:none;}
.sea-shell-shore{position:absolute;inset:0;z-index:2;overflow:clip;background:#eef2e9;}
.sea-shell-art{position:absolute;touch-action:none;user-select:none;}
.sea-shell-art>img{display:block;width:100%;height:100%;pointer-events:none;}
.sea-shell-object{position:absolute;padding:0;border:0;background:transparent;cursor:pointer;touch-action:none;}
.sea-shell-object:hover{background:#fff6f414;}
.sea-shell-object:focus-visible{outline:0;background:#fff7fa40;box-shadow:inset 0 0 0 3px #52798b;}
.sea-shell-retry{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}
.sea-shell-journey .sea-art[hidden],.sea-shell-shore[hidden],.sea-picked-count[hidden],.sea-shell-retry[hidden]{display:none;}
.sea-shell-journey .sea-heading{color:#335664!important;text-shadow:0 1px 8px #fff,0 0 24px #fff;}
.sea-shell-journey .sea-heading h1{font-size:26px;}
.sea-shell-journey .sea-moment,.sea-shell-journey .sea-activities,.sea-shell-journey .sea-tools{display:none;}
.sea-shell-journey .sea-panel{background:#fbfdfcf7;border-color:#cee0e3;color:#355965;}
.sea-shell-journey .sea-panel::backdrop{background:#1d414f08;}
.sea-picked-count{margin:0;padding:10px 16px;background:#f8fcf6e8;border:1px solid #d7e4e2;border-radius:4px;color:#426778;font:14px/1.5 "PingFang SC",sans-serif;}
.sea-collection-tools{display:flex;gap:8px;}
#seaAtlas{display:none;}
.sea-shell-journey #seaAtlas{display:grid;}
.sea-shell-picture{display:block;aspect-ratio:1;width:100%;background-image:var(--shell-atlas,url('../assets/garden/shell-atlas-watercolor-v2.png'));background-size:var(--shell-size,300% 300%);background-position:var(--shell-position);background-repeat:no-repeat;}
.sea-shell-object[hidden],.sea-shell-choice[hidden]{display:none}
.sea-shell-object.is-specimen>svg{width:100%;height:100%;pointer-events:none;filter:drop-shadow(2px 5px 3px #686b6b60)}
.sea-shore-tabs{position:absolute;z-index:3;top:110px;left:30px;display:flex;background:#fafffff0;border:1px solid #cbdedc;border-radius:4px}
.sea-shore-tabs button,.sea-atlas-tabs button{border:0;border-bottom:2px solid transparent;background:none;font:13px/1.6 "PingFang SC",sans-serif;color:#6f8887;padding:10px 14px;cursor:pointer}
.sea-shore-tabs button[aria-pressed=true],.sea-atlas-tabs button[aria-pressed=true]{color:#335d64;border-bottom-color:#977384;background:#e8f3f0}
.sea-atlas-tabs{display:flex;justify-content:center;border-bottom:1px solid #d7dfd9;margin-bottom:12px}
@media(max-width:760px){.sea-shore-tabs{left:16px;top:92px;max-width:calc(100% - 32px)}.sea-shore-tabs button,.sea-atlas-tabs button{padding:8px 11px;font-size:12px}}
.sea-shell-picture[data-shell-portrait="oyster"]{clip-path:inset(0 0 7%);}
.sea-shell-picture.has-shell-image{background:none}.sea-shell-picture>svg{display:block;width:100%;height:100%}
.sea-shell-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 26px;margin:0;}
.sea-shell-choice{display:flex;flex-direction:column;align-items:center;padding:4px 0 10px;border:0;border-bottom:1px solid #d8d8c9;background:none;color:#365b5b;cursor:pointer;min-width:0;}
.sea-shell-choice>.sea-shell-picture{width:100%;max-width:150px;transition:transform .2s ease;}
.sea-shell-choice strong{font:18px/1.6 "Songti SC",serif;font-weight:400;}
.sea-shell-choice small{font:13px/1.6 "PingFang SC",sans-serif;color:#697e7b;}
.sea-specimen-number{font:12px/1.5 Georgia,serif;color:#9c8261;margin-right:8px;}
.sea-shell-choice:hover>.sea-shell-picture{transform:translateY(-3px);}
.sea-shell-choice:focus-visible{outline:2px solid #8eaaa4;outline-offset:4px;}
.sea-surface .sea-panel.is-shell-atlas{inset:50% auto auto 50%;transform:translate(-50%,-50%);width:min(790px,calc(100% - 40px));max-height:calc(100% - 40px);padding:24px 32px;background:#fcfbf5;border-color:#cbd9d5;}
.sea-panel.is-shell-atlas h2{margin-bottom:12px;font-size:27px;}
.sea-atlas-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:16px;font:14px/1.6 "PingFang SC",sans-serif;color:#748380;}
@media(min-width:761px){.sea-shell-choice>.sea-shell-picture{width:auto;height:clamp(68px,calc((100dvh - 440px)/3),140px);max-width:100%;}}
@media(prefers-reduced-motion:reduce){.sea-shell-choice>.sea-shell-picture{transition:none}.sea-shell-choice:hover>.sea-shell-picture{transform:none}}
.sea-panel-body>.sea-shell-picture{max-width:160px;}
#seaPanelBody>.sea-shell-picture{width:190px;max-width:100%;aspect-ratio:1;margin:12px auto;}
.sea-shell-row{display:flex;gap:14px;padding:16px 0;border:0;border-bottom:1px solid #d6e0d7;background:transparent;color:#426252;width:100%;text-align:left;cursor:pointer;font:13px/1.6 "PingFang SC",sans-serif;}
.sea-shell-row .sea-shell-picture{width:65px;height:65px;flex:none;}
.sea-shell-meaning{text-align:center;margin:16px 0 22px;padding:16px 0;border-block:1px solid #d9e2d8}.sea-shell-meaning>span{font:14px/1.6 "PingFang SC",sans-serif;color:#9c7187}.sea-shell-meaning blockquote{font:20px/1.8 "Songti SC",serif;margin:8px 0;color:#426253}.sea-shell-meaning small{font-size:12px;color:#6f837b}
.sea-preview{position:absolute;left:30px;top:134px;z-index:5;padding:4px 7px;background:#fcfcf7;color:#97657c;font-size:10px;pointer-events:none;}
.sea-shell-row>span:last-child{min-width:0;overflow-wrap:anywhere;}
.sea-shell-row strong,.sea-shell-row small,.sea-shell-row>span>span{display:block;}
.sea-shell-row strong{font-weight:500;font-size:15px;}
.sea-shell-row small{font-size:11px;color:#7d8b82;margin:3px 0;}
@keyframes sea-arrival{from{opacity:0;transform:scale(1.015);}to{opacity:1;transform:scale(1);}}
@media(max-width:760px){
 .sea-heading{left:20px;top:20px;max-width:calc(100% - 130px);}
 .sea-heading h1{font-size:25px;}
 .sea-heading>p{font-size:9px;}
 .sea-moment{font-size:11px;flex-wrap:wrap;gap:4px 9px;}
 .sea-tools{top:20px;right:16px;gap:6px;}
 .sea-icon,.sea-preferences>summary{width:38px;height:38px;padding:9px;}
 .sea-pan{top:41%;right:16px;}
 .sea-footer{left:10px;right:10px;bottom:max(8px,env(safe-area-inset-bottom));gap:6px;display:grid;grid-template-columns:38px minmax(0,1fr) 38px;align-items:center;}
 .sea-activities{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));}
 .sea-activities button{min-width:0;padding:5px 2px;gap:2px;font-size:11px;min-height:42px;flex-direction:column;line-height:1.3;}
 .sea-activities svg{width:14px;height:14px;}
 .sea-return{width:38px;height:38px;padding:9px;min-height:38px;font-size:12px;}
 .sea-return span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
 .sea-surface .sea-panel{inset:auto 14px 122px 14px;width:auto;max-height:calc(100% - 145px);transform:none;padding:22px;}
 .sea-panel h2{font-size:22px;}
 .sea-panel .sea-close{width:34px;height:34px;}
 .sea-sand-actions{top:130px;gap:7px;}
 .sea-sand-actions button{font-size:12px;padding:9px 12px;}
 .sea-preview{left:20px;top:124px;font-size:9px;}
 .story-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:calc(100% - 24px);}
 .story-nav button{white-space:normal;border-bottom:1px solid #dce1d5;}
 .sea-message{top:184px;font-size:12px;width:max-content;}
 .sea-tip{display:none;}
 .sea-shell-journey .sea-footer{grid-template-columns:38px minmax(0,1fr) 84px;}
 .sea-picked-count{justify-self:center;padding:9px 12px;font-size:14px;}
 .sea-shell-journey .sea-heading{top:16px;left:18px;}
 .sea-shell-journey .sea-heading h1{font-size:23px;}
 .sea-shell-journey .sea-panel{bottom:70px;max-height:calc(100dvh - 98px);}
 .sea-surface .sea-panel.is-shell-atlas{inset:50% auto auto 50%;transform:translate(-50%,-50%);width:calc(100% - 24px);max-height:calc(100% - 24px);padding:20px 16px;}
 .sea-shell-choices{gap:10px 10px;}
 .sea-shell-choice strong{font-size:15px;}
 .sea-shell-choice small{font-size:12px;}
 .sea-atlas-footer{flex-wrap:wrap;font-size:12px;gap:8px;}
 .sea-panel.is-shell-atlas h2{font-size:24px;}
}
@media(max-height:530px) and (min-width:761px){.sea-heading{top:15px}.sea-panel{bottom:82px;max-height:calc(100% - 100px);padding:20px;}.sea-footer{bottom:14px;}}
@media(prefers-reduced-motion:reduce){.sea-surface{animation:none;}}