:root { --paper:#f7f4ee; --surface:#fffdfa; --ink:#20201e; --muted:#77736b; --line:#ded9d0; --violet:#7568e8; --violet-soft:#eeeaff; --mint:#dff2e7; --blue:#dceefd; --warm:#f2e9dc; --shadow:0 16px 42px rgba(52,45,35,.08); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; background:var(--paper); } body { margin:0; min-width:320px; background:radial-gradient(circle at 87% 4%, rgba(219,211,255,.55), transparent 24rem), radial-gradient(circle at 0 42%, rgba(212,241,232,.48), transparent 25rem), var(--paper); color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; } .site-shell { width:min(100%,1160px); margin:auto; padding:20px 24px 32px; }
.site-nav { display:flex; align-items:center; justify-content:space-between; min-height:54px; } .brand { color:var(--ink); font-size:20px; font-weight:850; letter-spacing:-.07em; text-decoration:none; } .brand span { color:var(--violet); } .nav-actions { display:flex; align-items:center; gap:19px; } .nav-link { color:var(--muted); font-size:13px; font-weight:650; text-decoration:none; } .nav-link:hover { color:var(--ink); } .login-chip { display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border:1px solid var(--line); border-radius:999px; background:rgba(255,253,250,.72); color:var(--ink); font-size:13px; font-weight:700; text-decoration:none; transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; } .login-chip:hover,.login-chip:focus-visible { transform:translateY(-1px); border-color:#bbb4aa; box-shadow:0 5px 15px rgba(58,49,37,.09); outline:none; } .access-dot { width:7px; height:7px; border-radius:50%; background:#b9b3aa; } .login-chip.is-signed-in { border-color:#a8d4b9; background:#effaf2; color:#356346; } .login-chip.is-signed-in .access-dot { background:#51ae77; box-shadow:0 0 0 4px rgba(81,174,119,.12); }
.hero { display:grid; grid-template-columns:1.05fr .95fr; align-items:center; min-height:510px; gap:50px; padding:52px 4.5vw 58px; margin-top:14px; border:1px solid rgba(222,217,208,.86); border-radius:30px; overflow:hidden; background:linear-gradient(118deg,rgba(255,253,250,.95),rgba(249,247,255,.78)); box-shadow:var(--shadow); } .kicker,.section-index { margin:0 0 13px; color:var(--violet); font-size:10px; font-weight:820; letter-spacing:.16em; } h1 { max-width:600px; margin:0; font-size:clamp(42px,5.7vw,76px); line-height:1.05; letter-spacing:-.075em; } h1 em { color:var(--violet); font-style:normal; white-space:nowrap; } .hero-intro { max-width:465px; margin:25px 0 0; color:var(--muted); font-size:16px; line-height:1.8; } .primary-link { display:inline-flex; gap:12px; align-items:center; margin-top:28px; padding:12px 17px; border-radius:12px; background:var(--ink); color:#fffdfa; font-size:14px; font-weight:750; text-decoration:none; box-shadow:0 8px 17px rgba(32,32,30,.14); } .primary-link span { color:#bdb5ff; font-size:17px; }
.hero-art { position:relative; width:min(100%,355px); aspect-ratio:1; margin:auto; border-radius:50%; background:radial-gradient(circle at 50% 50%,#fff 0 17%,transparent 17.5%),radial-gradient(circle at 50% 50%,rgba(117,104,232,.14) 0 47%,transparent 47.5%),radial-gradient(circle at 50% 50%,rgba(117,104,232,.09) 0 70%,transparent 70.5%); } .art-orbit { position:absolute; inset:10%; border:1px solid rgba(117,104,232,.32); border-radius:50%; } .orbit-two { inset:24%; border-color:rgba(117,104,232,.52); transform:rotateX(64deg) rotateZ(-28deg); } .art-core { position:absolute; inset:calc(50% - 29px); border-radius:17px; background:linear-gradient(135deg,#9c92f6,#6e61dd); box-shadow:0 15px 25px rgba(99,83,210,.28); transform:rotate(15deg); } .art-label { position:absolute; padding:6px 8px; border:1px solid rgba(117,104,232,.18); border-radius:8px; background:rgba(255,253,250,.8); color:#5c51bc; font-size:9px; font-weight:820; letter-spacing:.13em; box-shadow:0 6px 14px rgba(64,57,87,.06); } .label-one { top:18%; left:2%; }.label-two { bottom:17%; right:1%; }.label-three { top:8%; right:25%; }
.project-section,.member-workspace { margin-top:84px; } .section-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:23px; } .section-heading h2 { margin:0; font-size:clamp(28px,3vw,40px); letter-spacing:-.055em; } .section-note { margin:0 0 4px; color:var(--muted); font-size:13px; }.project-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.project-card { display:flex; min-height:450px; flex-direction:column; overflow:hidden; border:1px solid var(--line); border-radius:22px; background:var(--surface); color:var(--ink); text-decoration:none; box-shadow:0 6px 16px rgba(58,50,42,.03); transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease; }.project-card:hover,.project-card:focus-visible { transform:translateY(-5px); border-color:#c9c2b8; box-shadow:var(--shadow); outline:none; }.card-visual { position:relative; height:170px; overflow:hidden; }.visual-update { background:linear-gradient(130deg,#e5e1ff,#f0efff 55%,#dff3ef); }.visual-hall { background:linear-gradient(130deg,#f6e7dc,#f8f3ec 52%,#dceefd); }.visual-window { position:absolute; top:34px; left:50%; width:167px; height:103px; border:6px solid rgba(255,255,255,.86); border-radius:13px; background:linear-gradient(145deg,#7568e8,#b4adf9); box-shadow:0 12px 20px rgba(84,75,165,.15); transform:translateX(-50%) rotate(-7deg); }.visual-pack { position:absolute; width:47px; height:62px; border-radius:9px; background:#fffdfa; box-shadow:0 10px 17px rgba(48,41,80,.12); }.pack-a { top:73px; left:19%; transform:rotate(10deg); }.pack-b { top:48px; right:18%; background:#d7f0e5; transform:rotate(-11deg); }.visual-signal { position:absolute; top:30px; right:25%; width:32px; height:32px; border:2px solid rgba(117,104,232,.5); border-left-color:transparent; border-bottom-color:transparent; border-radius:50%; transform:rotate(8deg); }.hall-panel { position:absolute; width:100px; height:125px; border-radius:15px; background:rgba(255,253,250,.82); box-shadow:0 12px 20px rgba(100,72,42,.1); }.panel-one { top:23px; left:20%; transform:rotate(-9deg); }.panel-two { top:36px; left:39%; z-index:2; background:linear-gradient(155deg,#fffdfa,#d8ecff); transform:rotate(4deg); }.panel-three { top:21px; right:18%; background:#eadfff; transform:rotate(13deg); }.hall-spark { position:absolute; top:25px; left:49%; z-index:3; width:25px; height:25px; border-radius:7px; background:#7568e8; transform:rotate(18deg); box-shadow:0 7px 12px rgba(94,81,190,.2); }.card-body { padding:21px 22px 0; }.card-meta { display:flex; align-items:center; justify-content:space-between; color:#a09a91; font:11px ui-monospace,SFMono-Regular,Menlo,monospace; }.status { padding:5px 8px; border-radius:999px; font:700 10px/1 Inter,ui-sans-serif,sans-serif; }.live { background:var(--mint); color:#397254; }.planned { background:#eeeaff; color:#6659c2; }.project-kind { margin:22px 0 8px; color:var(--violet); font-size:10px; font-weight:820; letter-spacing:.14em; }.project-card h3 { margin:0; font-size:clamp(24px,2.5vw,31px); letter-spacing:-.055em; }.project-card p:not(.project-kind) { margin:11px 0 0; color:var(--muted); font-size:14px; line-height:1.75; }.card-link { margin:auto 22px 20px; padding-top:16px; border-top:1px solid #ebe6de; font-size:13px; font-weight:760; }.card-link b { float:right; color:var(--violet); font-size:17px; }
.member-workspace { padding:28px; border:1px solid #cfe3d5; border-radius:24px; background:linear-gradient(125deg,#f1fbf3,#fbfdfb); }.member-workspace[hidden] { display:none; }.owner-mark { padding:6px 9px; border-radius:99px; background:#dff2e7; color:#397254; font-size:11px; font-weight:750; }.workspace-intro { max-width:620px; margin:0 0 20px; color:var(--muted); line-height:1.75; }.dashboard-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.dashboard-card { display:grid; grid-template-columns:auto 1fr auto; gap:13px; align-items:start; padding:18px; border:1px solid #d8e6db; border-radius:16px; background:rgba(255,255,255,.76); color:inherit; text-decoration:none; }.dashboard-card h3 { margin:0; font-size:17px; letter-spacing:-.04em; }.dashboard-card p { margin:6px 0 0; color:var(--muted); font-size:13px; line-height:1.6; }.dashboard-icon { display:grid; width:30px; height:30px; place-items:center; border-radius:9px; background:#dff2e7; color:#397254; font-weight:900; }.dashboard-card>b { color:var(--violet); }.dashboard-muted { opacity:.72; }.tiny-label { color:var(--muted); font:10px ui-monospace,monospace; }.logout-link { display:inline-block; margin-top:18px; color:var(--muted); font-size:13px; }.about-strip { display:grid; grid-template-columns:.72fr 1.3fr 1fr; gap:28px; margin-top:84px; padding:32px 0; border-top:1px solid var(--line); }.about-strip h2 { margin:0; font-size:clamp(22px,2.4vw,32px); line-height:1.3; letter-spacing:-.05em; }.about-strip>p:last-child { margin:2px 0 0; color:var(--muted); font-size:14px; line-height:1.8; }.site-footer { display:flex; justify-content:space-between; margin-top:32px; padding:18px 0 0; border-top:1px solid var(--line); color:#989188; font-size:10px; font-weight:750; letter-spacing:.12em; }
.login-dialog { width:min(calc(100% - 36px),390px); padding:0; border:1px solid #ddd7ce; border-radius:20px; background:#fffdfa; color:var(--ink); box-shadow:0 30px 90px rgba(49,40,29,.24); }.login-dialog::backdrop { background:rgba(66,59,51,.32); backdrop-filter:blur(5px); }.login-dialog form { padding:26px; }.dialog-topline { display:flex; align-items:center; justify-content:space-between; color:var(--violet); font-size:10px; font-weight:820; letter-spacing:.13em; }.dialog-close { width:30px; height:30px; border:0; border-radius:50%; background:transparent; color:var(--muted); font-size:25px; line-height:1; }.dialog-close:hover { background:#f0ede8; color:var(--ink); }.login-dialog h2 { margin:17px 0 7px; font-size:27px; letter-spacing:-.055em; }.login-dialog p { margin:0 0 19px; color:var(--muted); font-size:13px; line-height:1.65; }.login-dialog label { display:block; margin:14px 0 6px; color:var(--muted); font-size:12px; font-weight:700; }.login-dialog input { width:100%; padding:12px; border:1px solid #d8d2c9; border-radius:10px; background:#fffefa; color:var(--ink); font:inherit; }.login-error { color:#bb5252!important; }.dialog-submit { width:100%; margin-top:22px; padding:13px; border:0; border-radius:10px; background:var(--violet); color:#fff; font:inherit; font-weight:820; }
.project-page { background:radial-gradient(circle at 86% 0%,rgba(220,214,255,.62),transparent 23rem),var(--paper); }.project-frame { width:min(100%,980px); margin:auto; padding:20px 24px 40px; }.project-nav { display:flex; align-items:center; justify-content:space-between; min-height:54px; }.back-link { color:var(--muted); font-size:13px; font-weight:700; text-decoration:none; }.back-link:hover { color:var(--ink); }.project-hero { display:grid; grid-template-columns:1.05fr .95fr; gap:38px; align-items:center; min-height:390px; margin-top:18px; padding:42px; border:1px solid var(--line); border-radius:28px; background:rgba(255,253,250,.82); box-shadow:var(--shadow); }.project-hero h1 { font-size:clamp(38px,5vw,62px); }.project-summary { margin:22px 0 0; color:var(--muted); font-size:16px; line-height:1.8; }.project-art { position:relative; min-height:245px; overflow:hidden; border-radius:20px; }.detail-visual-update { background:linear-gradient(135deg,#e4e0ff,#f7f5ff 58%,#dcf1ea); }.detail-visual-hall { background:linear-gradient(135deg,#f6e7dc,#fbf8f2 55%,#dbeeff); }.project-content { display:grid; grid-template-columns:1.15fr .85fr; gap:54px; margin-top:66px; }.project-content h2 { margin:0 0 15px; font-size:28px; letter-spacing:-.055em; }.project-content p { color:var(--muted); line-height:1.85; }.detail-list { margin:0; padding:0; list-style:none; border-top:1px solid var(--line); }.detail-list li { display:flex; justify-content:space-between; gap:20px; padding:15px 0; border-bottom:1px solid var(--line); font-size:14px; }.detail-list span:last-child { color:var(--muted); text-align:right; }.detail-callout { margin-top:28px; padding:22px; border-radius:16px; background:var(--violet-soft); }.detail-callout p { margin:0; color:#514a88; }.detail-action { display:inline-flex; align-items:center; gap:10px; margin-top:18px; padding:12px 15px; border-radius:10px; background:var(--ink); color:#fff; font-size:14px; font-weight:750; text-decoration:none; }
.compact-main { display:grid; min-height:calc(100vh - 150px); place-items:center; padding:54px 0 70px; }.compact-project-section { width:min(100%,760px); }.compact-kicker { margin:0 0 14px; color:var(--violet); font-size:10px; font-weight:820; letter-spacing:.16em; }.compact-card { display:grid; grid-template-columns:.82fr 1.18fr; grid-template-rows:1fr auto; min-height:336px; }.compact-card .card-visual { grid-row:1 / span 2; height:auto; min-height:336px; }.compact-card .card-body { padding:31px 30px 0; }.compact-card h1 { margin:20px 0 0; font-size:clamp(29px,3.6vw,42px); line-height:1.14; letter-spacing:-.06em; }.compact-card .card-link { grid-column:2; margin:20px 30px 24px; }.compact-home .site-footer { margin-top:0; }
@media (max-width:720px) { .site-shell,.project-frame { padding-left:17px; padding-right:17px; }.nav-link { display:none; }.hero { grid-template-columns:1fr; gap:23px; min-height:auto; padding:42px 24px 30px; border-radius:23px; }.hero-art { width:225px; }.project-section,.member-workspace { margin-top:58px; }.project-grid,.dashboard-grid,.project-content { grid-template-columns:1fr; }.project-card { min-height:420px; }.about-strip { grid-template-columns:1fr; gap:13px; margin-top:58px; }.site-footer { margin-top:22px; }.project-hero { grid-template-columns:1fr; padding:28px 24px; }.project-art { min-height:190px; }.project-content { gap:30px; margin-top:48px; } }
@media (max-width:720px) { .compact-main { min-height:calc(100vh - 130px); padding:36px 0 46px; place-items:start center; }.compact-project-section { width:100%; }.compact-card { display:flex; min-height:420px; }.compact-card .card-visual { height:170px; min-height:0; }.compact-card .card-body { padding:21px 22px 0; }.compact-card h1 { margin:20px 0 0; font-size:31px; }.compact-card .card-link { margin:20px 22px 20px; }.compact-home .site-footer { margin-top:0; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.project-card,.login-chip { transition:none; } }