@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Noto+Sans+JP:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,600;0,700;1,600;1,700&display=swap');

:root { --ink:#143330; --muted:#6c7773; --forest:#153c38; --forest-2:#20554d; --cream:#f6f3ea; --paper:#fffdf7; --line:#deded3; --yellow:#e9b84b; --coral:#d76c4e; --serif:'Playfair Display','Noto Serif JP',serif; --sans:'Noto Sans JP',sans-serif; --mono:'DM Mono',monospace; }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); background:var(--cream); font-family:var(--sans); font-size:14px; } button,input,textarea,select { font:inherit; } button { cursor:pointer; } .app-shell { min-height:100vh; display:flex; } .sidebar { width:218px; flex:0 0 218px; background:var(--forest); color:#f9f4e9; padding:30px 17px 24px; display:flex; flex-direction:column; position:fixed; inset:0 auto 0 0; } .brand { color:inherit; text-decoration:none; display:flex; align-items:center; gap:9px; padding:0 10px; font:700 25px/1 var(--serif); letter-spacing:-1px; } .brand-mark { color:var(--yellow); font:32px/20px serif; transform:translateY(-2px); }.side-nav { margin-top:67px; display:grid; gap:7px; } .nav-item { border:0; border-radius:10px; background:transparent; color:#aebfba; text-align:left; padding:12px 11px; display:flex; align-items:center; gap:13px; font-size:13px; font-weight:500; transition:.2s; }.nav-item span { width:18px; font-family:var(--serif); font-size:21px; text-align:center; }.nav-item:hover,.nav-item.active { background:#28534e; color:#fffaf0; }.nav-item.active { box-shadow:inset 3px 0 0 var(--yellow); }.sidebar-foot { margin-top:auto; padding:0 10px; color:#bdcbc6; font-size:12px; line-height:1.8; }.sidebar-foot p { margin:13px 0 0; }.invite-pill { border:1px solid #5a7974; border-radius:99px; padding:4px 8px; color:#dfebe3; font:10px var(--mono); }.content { width:calc(100% - 218px); margin-left:218px; }.topbar { height:114px; padding:28px clamp(26px,6vw,88px) 22px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); background:#faf8f1cc; }.eyebrow { margin:0 0 6px; font:10px var(--mono); letter-spacing:.08em; color:#72817b; }.topbar h1 { margin:0; font:600 25px var(--serif); letter-spacing:-.5px; }.avatar-button,.large-avatar { background:var(--coral); color:white; border:0; display:grid; place-items:center; border-radius:50%; }.avatar-button { width:36px; height:36px; font-weight:700; }.page { max-width:1100px; margin:0 auto; padding:47px clamp(26px,6vw,88px) 90px; }.hero-card { background:var(--forest); color:#f8f4e9; min-height:315px; overflow:hidden; border-radius:4px; display:flex; position:relative; }.hero-copy { padding:42px 43px; width:58%; z-index:2; }.label-dot { margin:0 0 12px; color:#f1cf78; font-size:12px; }.label-dot:before { content:'•'; margin-right:6px; }.hero-copy h2,.circle-hero h2,.notes-hero h2 { margin:0; font:600 37px/1.22 var(--serif); letter-spacing:-1px; }.hero-copy h2 em { color:#f1ca65; }.hero-copy>p:not(.label-dot) { color:#c0cfca; max-width:360px; margin:14px 0 23px; line-height:1.75; font-size:12px; }.primary-btn { border:0; background:var(--yellow); color:#1c342e; border-radius:3px; padding:12px 15px; font-weight:700; box-shadow:0 3px 0 #c8952f; }.primary-btn span { font-size:17px; margin-left:14px; }.primary-btn:active { transform:translateY(2px); box-shadow:0 1px 0 #c8952f; }.complete-strip { display:inline-block; background:#2b5b53; color:#e6f0de; padding:11px 13px; border-radius:3px; font-size:12px; }.mountain-art { position:relative; height:345px; overflow:hidden; background:linear-gradient(#c6d8d2 0 51%,#dbe3d4 51%); }.hero-card .mountain-art { position:absolute; width:49%; right:0; height:100%; background:linear-gradient(135deg,#a6c9c7,#d3dfc9); }.sun { position:absolute; right:20%; top:17%; width:36px; height:36px; border-radius:50%; background:#f6dfa0; box-shadow:0 0 0 11px #f6dfa044; }.peak { position:absolute; bottom:0; clip-path:polygon(0 100%,54% 3%,100% 100%); }.peak-back { right:-11%; width:73%; height:68%; background:#6e9288; }.peak-main { left:8%; width:75%; height:88%; background:linear-gradient(135deg,#416c63 30%,#315b54 30%); }.peak-main:after { content:''; position:absolute; width:38%; height:18%; top:4%; left:41%; background:#e2ece1; clip-path:polygon(50% 0,100% 100%,0 100%); }.ridge { position:absolute; bottom:0; width:100%; height:24%; background:#244d48; clip-path:polygon(0 66%,25% 42%,47% 68%,68% 31%,100% 65%,100% 100%,0 100%); }.trail { position:absolute; left:16%; bottom:17%; width:61%; height:64%; border:3px dashed #edc15d; border-left:0; border-bottom:0; border-radius:0 100% 0 0; transform:skewY(-19deg); opacity:.92; }.trail-dot { position:absolute; width:8px; height:8px; border-radius:50%; background:#f7df96; }.d1{bottom:3%;left:2%}.d2{bottom:24%;left:32%}.d3{bottom:55%;left:55%}.d4{top:-3%;right:7%}.avatar-marker { position:absolute; bottom:calc(14% + (var(--p, 0) * 1%)); transform:translateX(-50%); color:#fdf8e9; text-align:center; z-index:2; filter:drop-shadow(0 2px 1px #173a35); }.avatar-marker span { display:block; color:#f3be4a; font-size:26px; line-height:15px; }.avatar-marker small { white-space:nowrap; font-size:9px; font-weight:700; }.mountain-art .avatar-marker { bottom:46%; }.mountain-label { position:absolute; bottom:15px; z-index:2; font:9px/1.35 var(--mono); color:#e2efdf; }.mountain-label.base { left:18px; }.mountain-label.summit { right:17px; text-align:right; }.metric-row { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:13px; margin:20px 0 42px; }.metric-card { padding:17px 18px; background:var(--paper); border:1px solid var(--line); border-radius:3px; min-height:120px; }.metric-card>span { color:var(--muted); font-size:11px; }.metric-card strong { display:block; margin-top:5px; font:600 31px var(--serif); }.metric-card strong small { font:15px var(--sans); margin-left:2px; }.metric-card p { margin:3px 0 0; color:var(--muted); font-size:11px; }.progress-bar,.member-progress { overflow:hidden; height:5px; margin-top:12px; background:#e8e7de; border-radius:99px; }.progress-bar i,.member-progress i { height:100%; display:block; background:var(--yellow); border-radius:inherit; }.section-heading { display:flex; align-items:end; justify-content:space-between; margin:0 0 15px; }.section-heading h2,.trail-section h2 { margin:0; font:600 24px var(--serif); }.text-btn { padding:0; border:0; background:transparent; color:#347065; font-size:12px; font-weight:700; }.empty-checkin { width:100%; display:flex; align-items:center; gap:13px; text-align:left; padding:19px; background:#edf1e8; border:1px dashed #bdc9bf; border-radius:3px; color:var(--ink); }.empty-checkin .circle-icon { border:1px solid #7a9188; border-radius:50%; height:32px; width:32px; display:grid; place-items:center; font-size:22px; color:#56756d; }.empty-checkin div { flex:1; }.empty-checkin strong { font-size:13px; }.empty-checkin p { margin:3px 0 0; color:var(--muted); font-size:11px; }.circle-heading { margin-top:48px; }.member-peek { display:grid; grid-template-columns:repeat(5,1fr); gap:9px; }.member-card { padding:17px; background:var(--paper); border:1px solid var(--line); border-radius:3px; }.member-peek .member-card { padding:13px; }.member-top { display:flex; gap:9px; align-items:center; }.mini-avatar { width:31px; height:31px; background:var(--avatar); color:white; border-radius:50%; display:grid; place-items:center; font:600 13px var(--serif); }.mine { background:var(--coral); }.member-top>div { min-width:0; flex:1; }.member-card h3 { margin:0; font:600 15px var(--serif); }.member-card h3 em { color:#6f8a80; font:10px var(--sans); font-style:normal; }.member-card .member-top p { color:var(--muted); margin:2px 0 0; font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.member-status { font-size:9px; border-radius:99px; padding:3px 6px; }.member-status.done { background:#dcecdf; color:#38654b; }.member-status.planned { background:#edf0e7; color:#77837a; }.member-note { min-height:33px; margin:15px 0 0; font-size:11px; line-height:1.55; }.member-card small { color:#78837e; font-size:9px; }.mountain-page { max-width:900px; }.mountain-card { overflow:hidden; border-radius:4px; background:var(--forest); }.mountain-card .mountain-art { height:360px; }.mountain-caption { background:#183f3a; padding:15px 23px; color:#f9f3e5; display:flex; justify-content:space-between; }.mountain-caption div:last-child { text-align:right; }.mountain-caption p { margin:0; color:#a9c2ba; font:9px var(--mono); }.mountain-caption strong { font:600 21px var(--serif); }.altitude-card { margin-top:16px; padding:23px; border:1px solid var(--line); background:var(--paper); display:flex; align-items:center; justify-content:space-between; gap:30px; }.altitude-card h2 { margin:0; font:600 41px var(--serif); }.altitude-card h2 small { font:16px var(--sans); }.altitude-card p:last-of-type { max-width:425px; color:var(--muted); line-height:1.7; font-size:12px; }.outline-btn { border:1px solid #417268; color:#32675d; background:transparent; padding:10px 13px; border-radius:3px; white-space:nowrap; font-weight:700; font-size:12px; }.trail-section { margin:47px 0; }.trail-section h2 { margin-bottom:20px; }.trail-steps { display:grid; grid-template-columns:repeat(5,1fr); position:relative; gap:5px; }.trail-steps:before { content:''; position:absolute; height:1px; top:15px; left:6%; right:6%; background:#cad6cd; }.trail-steps>div { z-index:1; text-align:center; color:#7b8883; font-size:10px; }.trail-steps b { display:grid; place-items:center; width:30px; height:30px; margin:0 auto 7px; border-radius:50%; background:#dfe5dd; color:#6d7a74; font:10px var(--mono); }.trail-steps .finished b { background:#3b746a; color:#fff; }.trail-steps .current b { background:var(--yellow); color:#283d33; box-shadow:0 0 0 5px #f6e6bc; }.trail-steps .current { color:var(--ink); font-weight:700; }.visibility-card { background:#edf1e8; border-top:1px solid #dce4d8; border-bottom:1px solid #dce4d8; padding:17px 18px; display:flex; gap:13px; align-items:center; }.visibility-card>div { display:flex; gap:11px; flex:1; }.visibility-card .lock { color:#4c776e; font-size:18px; }.visibility-card h3 { margin:0; font-size:13px; }.visibility-card p:last-child { margin:3px 0 0; color:var(--muted); font-size:10px; }.circle-hero { background:#dce9df; padding:38px 40px; display:flex; justify-content:space-between; min-height:220px; }.circle-hero h2,.notes-hero h2 { font-size:32px; }.circle-hero>div>p:not(.label-dot),.notes-hero>p:not(.label-dot) { margin:12px 0 0; color:#566961; font-size:12px; line-height:1.7; }.circle-ring { width:125px; height:125px; flex:0 0 125px; border:10px solid #bfd9cb; border-top-color:#3d7669; border-right-color:#3d7669; border-radius:50%; text-align:center; display:grid; place-content:center; transform:rotate(-20deg); }.circle-ring>* { transform:rotate(20deg); }.circle-ring strong { font:600 30px var(--serif); }.circle-ring small { font:13px var(--sans); }.circle-ring span { font-size:9px; color:#63796e; }.circle-note { margin:15px 0 25px; background:#f8f3e5; padding:12px 14px; display:flex; gap:9px; color:#7c6a40; font-size:11px; line-height:1.6; }.circle-note p { margin:0; }.circle-list { display:grid; grid-template-columns:repeat(2,1fr); gap:13px; }.circle-list .me-card { background:#eef4ec; border-color:#b8d0c2; }.notes-page { max-width:840px; }.notes-hero { padding:7px 0 34px; border-bottom:1px solid var(--line); }.notes-hero .primary-btn { margin-top:22px; }.note-list { display:grid; gap:12px; margin-top:21px; }.resource-card { display:flex; justify-content:space-between; gap:20px; padding:21px; background:var(--paper); border:1px solid var(--line); }.purpose-tag { background:#e0ede4; color:#3e7061; padding:3px 6px; border-radius:2px; font-size:10px; }.resource-card h3 { margin:10px 0 5px; font:600 18px var(--serif); }.resource-card p { max-width:540px; margin:0; color:var(--muted); line-height:1.7; font-size:11px; }.resource-icon { color:#9fbaaa; font-size:30px; }.profile-page { max-width:720px; }.profile-intro { display:flex; gap:14px; align-items:center; padding-bottom:31px; border-bottom:1px solid var(--line); }.large-avatar { width:56px; height:56px; font-size:21px; }.profile-intro h2 { margin:0; font:600 25px var(--serif); }.profile-intro p { margin:4px 0 0; color:var(--muted); font-size:11px; }.settings-group { margin-top:30px; }.setting-row { width:100%; border:1px solid var(--line); border-radius:3px; padding:16px; background:var(--paper); display:flex; align-items:center; gap:12px; text-align:left; color:var(--ink); }.setting-row>span { color:#3d7367; font-size:21px; }.setting-row>div { flex:1; }.setting-row strong { font-size:13px; }.setting-row p { margin:3px 0 0; color:var(--muted); font-size:10px; }.setting-row>b { font-size:23px; color:#809088; font-weight:400; }.safety-note { margin-top:10px; padding:10px; background:#edf1e8; color:#61736a; font-size:10px; line-height:1.65; }.invite-card { background:#1e4943; color:#f5f0e3; padding:15px; display:flex; justify-content:space-between; align-items:center; }.invite-card strong { font:600 16px var(--serif); }.invite-card p { margin:4px 0 0; color:#bccfc8; font-size:10px; }.invite-card>span { font-size:10px; border:1px solid #52736d; padding:3px 6px; border-radius:99px; }.mobile-nav { display:none; }.modal-backdrop { position:fixed; z-index:10; inset:0; background:#132d2a88; display:grid; place-items:center; padding:20px; }.modal { width:min(500px,100%); max-height:90vh; overflow:auto; position:relative; background:#fffdf7; padding:32px; border-radius:4px; box-shadow:0 18px 55px #10252266; }.modal h2 { margin:0; font:600 28px var(--serif); }.modal-lead { margin:8px 0 23px; color:#64726b; line-height:1.7; font-size:12px; }.modal-close { position:absolute; right:15px; top:12px; border:0; background:transparent; font-size:25px; color:#6d7871; } form { display:grid; gap:17px; } form>label,fieldset { display:grid; gap:7px; color:#44554f; font-size:12px; font-weight:600; border:0; padding:0; margin:0; } label span { color:#89938e; font-weight:400; } input,textarea,select { width:100%; border:1px solid #ced7d0; background:#fffefa; padding:10px; border-radius:3px; color:var(--ink); outline-color:#4f8075; font-size:13px; } textarea { min-height:80px; resize:vertical; }.choice { display:inline-flex; align-items:center; gap:5px; margin-right:17px; font-size:11px; color:#63736c; font-weight:400; }.choice input { width:auto; }.wide { width:100%; margin-top:3px; }.visibility-form { gap:10px; }.visibility-choice { display:flex; gap:10px; border:1px solid #d7ddd8; padding:11px; border-radius:3px; }.visibility-choice input { width:auto; align-self:start; margin-top:3px; }.visibility-choice span { display:grid; gap:3px; }.visibility-choice strong { color:var(--ink); font-size:13px; }.visibility-choice small { color:#71817a; font-size:10px; font-weight:400; }
@media (max-width: 760px) { body { padding-bottom:66px; }.sidebar { display:none; }.content { width:100%; margin:0; }.topbar { height:83px; padding:15px 20px; }.topbar h1 { font-size:21px; }.topbar .eyebrow { font-size:8px; margin-bottom:3px; }.page { padding:23px 18px 30px; }.hero-card { min-height:0; display:block; }.hero-copy { width:100%; padding:29px 25px; }.hero-copy h2 { font-size:32px; }.hero-card .mountain-art { position:relative; right:auto; bottom:auto; width:100%; height:175px; }.metric-row { grid-template-columns:repeat(2,1fr); margin:13px 0 35px; }.metric-card { min-height:104px; padding:14px; }.progress-metric { grid-column:span 2; }.member-peek { overflow:auto; grid-template-columns:repeat(5,150px); padding-bottom:5px; }.circle-heading { margin-top:39px; }.mobile-nav { display:block; position:fixed; z-index:4; bottom:0; left:0; right:0; background:#173e39; box-shadow:0 -3px 18px #132d2a33; }.mobile-nav .side-nav { margin:0; display:flex; justify-content:space-around; gap:0; }.mobile-nav .nav-item { color:#b5c5bf; flex:1; padding:8px 2px 7px; border-radius:0; display:grid; justify-items:center; gap:2px; font-size:9px; }.mobile-nav .nav-item span { font-size:18px; }.mobile-nav .nav-item.active { background:transparent; box-shadow:inset 0 2px 0 var(--yellow); }.mountain-card .mountain-art { height:280px; }.altitude-card { display:block; padding:19px; }.altitude-card .outline-btn { margin-top:13px; }.trail-steps span { font-size:9px; }.trail-steps b { width:26px; height:26px; }.trail-steps:before { top:13px; }.visibility-card { align-items:start; }.circle-hero { padding:28px 22px; min-height:200px; }.circle-hero h2,.notes-hero h2 { font-size:27px; }.circle-ring { width:90px; height:90px; flex-basis:90px; border-width:8px; }.circle-ring strong { font-size:24px; }.circle-list { grid-template-columns:1fr; }.modal { padding:28px 21px 23px; }.modal h2 { font-size:25px; } }

.notice { position:fixed; z-index:30; top:18px; left:50%; transform:translateX(-50%); width:min(540px,calc(100% - 32px)); display:flex; gap:10px; align-items:center; padding:12px 15px; border-radius:4px; color:#fff; box-shadow:0 8px 25px #132d2a35; font-size:13px; }.notice.success { background:#276458; }.notice.error { background:#a84638; }.notice>span { width:20px; height:20px; flex:0 0 20px; display:grid; place-items:center; border:1px solid #ffffff77; border-radius:50%; font-weight:700; }.notice button { margin-left:auto; border:0; background:transparent; color:inherit; font-size:20px; }.demo-banner { margin:0 0 15px; padding:10px 13px; background:#f8f1de; border-left:3px solid var(--yellow); color:#705e30; font-size:11px; }.report-link { display:block; margin:12px 0 0 auto; padding:0; border:0; background:transparent; color:#788b83; font-size:10px; text-decoration:underline; }.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.form-help { margin:0; color:#6c7d75; font-size:11px; line-height:1.65; }.account-actions { display:flex; flex-wrap:wrap; gap:9px; }.danger-btn { border:1px solid #a64d42; background:#fffaf6; color:#9e4035; padding:10px 13px; border-radius:3px; font-weight:700; font-size:12px; }.danger-btn.wide { width:100%; }.legal-links { display:flex; gap:15px; margin:12px 0 0; }.legal-links a,.auth-note a { color:#467466; font-size:11px; }.auth-page { min-height:100vh; display:grid; place-items:center; padding:36px 20px; background:radial-gradient(circle at 14% 15%,#dcebdd 0 12%,transparent 32%),linear-gradient(135deg,#eef2eb,#f8f4e9); }.auth-card { width:min(540px,100%); padding:52px; background:#fffdf7; border:1px solid #dce1d9; box-shadow:0 20px 60px #1a423521; text-align:left; }.auth-mark { display:block; color:var(--yellow); font:56px/1 var(--serif); margin-bottom:27px; }.auth-card h1 { margin:0; color:var(--forest); font:600 42px/1.16 var(--serif); letter-spacing:-1.4px; }.auth-card h1 em { color:#a76c36; }.auth-card>p:not(.eyebrow) { max-width:410px; margin:18px 0 26px; color:#64746d; font-size:13px; line-height:1.85; }.auth-note { margin-top:27px; color:#7b8781; font-size:11px; line-height:1.7; }.onboarding-card { width:min(620px,100%); }.onboarding-card h1 { font-size:36px; }.legal-page { max-width:760px; margin:0 auto; padding:72px 28px 100px; }.legal-page h1 { margin:0 0 9px; font:600 42px var(--serif); }.legal-page h2 { margin:42px 0 9px; font:600 24px var(--serif); }.legal-page p { color:#52645d; line-height:1.9; font-size:14px; }.legal-back { display:inline-block; margin-bottom:35px; color:#397065; font-size:12px; font-weight:700; text-decoration:none; }
@media (max-width: 760px) { .auth-card { padding:34px 25px; }.auth-card h1 { font-size:34px; }.form-grid { grid-template-columns:1fr; }.legal-page { padding:40px 21px 80px; }.legal-page h1 { font-size:34px; }.legal-page h2 { margin-top:32px; } }

.shared-resources { margin-top:46px; }
.setup-issues { margin:0; padding:12px 15px 12px 31px; border-left:3px solid var(--coral); background:#fbefea; color:#8d473e; font-size:11px; line-height:1.75; }
.resource-help { margin:0; color:var(--muted); font-size:11px; line-height:1.7; }
.resource-origin { margin:9px 0 -2px !important; color:#798781 !important; font-size:10px !important; }
.resource-origin.shared { color:#397166 !important; }
.resource-actions { display:flex; flex-direction:column; align-items:end; justify-content:space-between; gap:10px; flex:0 0 auto; }
.resource-delete { border:0; padding:0; background:transparent; color:#9e4a3f; font-size:10px; text-decoration:underline; }
.share-choice { display:flex; gap:10px; align-items:flex-start; border:1px solid #d7ddd8; padding:11px; border-radius:3px; font-size:11px; font-weight:400; }
.share-choice input { width:auto; margin-top:2px; }
.share-choice span { display:grid; gap:3px; }
.share-choice strong { color:var(--ink); font-size:12px; }
.share-choice small { color:#71817a; line-height:1.55; }