:root { --ink:#1d1d1f; --muted:#6e6e73; --line:rgba(29,29,31,.11); --surface:rgba(255,255,255,.82); --blue:#0071e3; --blue-deep:#0066cc; --warm:#f5f5f7; --radius:28px; --shadow:0 20px 60px rgba(29,29,31,.08); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:"SF Pro Display","PingFang SC","Hiragino Sans GB","Helvetica Neue",sans-serif; letter-spacing:-.015em; }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.55; }
[v-cloak] { display:none; }
.shell { width:min(1160px,calc(100% - 48px)); margin:0 auto; }
.site-header { position:sticky; top:0; z-index:30; backdrop-filter:saturate(180%) blur(18px); background:rgba(245,245,247,.72); border-bottom:1px solid rgba(29,29,31,.05); }
.header-inner { height:54px; display:flex; align-items:center; justify-content:space-between; }
.brand { display:inline-flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink); font-size:14px; font-weight:650; letter-spacing:.01em; }
.brand-orb { display:grid; place-items:center; width:25px; height:25px; border-radius:50%; background:#1d1d1f; color:white; font-size:12px; font-family:Georgia,serif; }
.main-nav { display:flex; gap:29px; margin-left:auto; margin-right:29px; }
.main-nav a { color:#55555a; text-decoration:none; font-size:12px; transition:color .25s ease; }
.main-nav a:hover { color:var(--blue); }
.admin-trigger,.plain-action,.logout-action,.subtle-action { border:0; background:transparent; color:#424245; font-size:12px; }
.admin-trigger { display:inline-flex; gap:7px; align-items:center; padding:8px 0; }
.admin-dot { width:7px; height:7px; border-radius:50%; background:#b7b7bb; }.admin-dot.is-live { background:#34c759; box-shadow:0 0 0 4px rgba(52,199,89,.13); }
.hero-section { padding:78px 0 48px; }.eyebrow { margin:0; color:#86868b; font-size:10px; letter-spacing:.14em; font-weight:700; }.eyebrow span { display:inline-block; width:22px; height:1px; margin:0 8px 3px; background:#b7b7bb; }
.hero-grid { display:grid; grid-template-columns:1.42fr .86fr; align-items:end; gap:58px; margin-top:28px; }.hero-kicker { margin:0 0 7px; font-size:20px; color:#4a4a4f; }.hero-copy h1 { max-width:700px; margin:0; font-size:clamp(46px,6.5vw,84px); line-height:1.055; letter-spacing:-.072em; font-weight:660; }.hero-copy h1 em { color:#8d8d92; font-style:normal; }.hero-role { margin:26px 0 0; color:var(--muted); font-size:15px; }
.focus-card { position:relative; min-height:225px; overflow:hidden; padding:27px 28px 23px; border-radius:var(--radius); background:#161719; color:#fff; box-shadow:var(--shadow); }.focus-light { position:absolute; width:260px; height:260px; top:-150px; right:-45px; border-radius:50%; background:radial-gradient(circle at 50%,rgba(90,168,255,.88),rgba(46,100,223,.4) 37%,transparent 70%); filter:blur(8px); }.focus-label,.focus-copy,.focus-footer { position:relative; }.focus-label { margin:0; color:#aeb8d7; font-size:10px; letter-spacing:.16em; font-weight:700; }.focus-copy { max-width:260px; margin:26px 0 33px; font-size:21px; line-height:1.45; font-weight:550; }.focus-footer { display:flex; justify-content:space-between; align-items:center; color:#a4a4aa; font-size:11px; }.focus-arrow { color:#fff; font-size:22px; }
.section-block { padding:81px 0 0; }.section-heading { display:flex; align-items:end; justify-content:space-between; margin-bottom:25px; }.section-heading h2 { margin:7px 0 0; font-size:clamp(29px,3.7vw,43px); letter-spacing:-.055em; line-height:1; font-weight:650; }.section-heading > p { margin:0 0 4px; color:#86868b; font-size:13px; }.goal-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }.goal-card { min-height:210px; padding:26px 27px 23px; border-radius:var(--radius); background:var(--surface); border:1px solid rgba(255,255,255,.7); box-shadow:0 8px 28px rgba(29,29,31,.035); }.goal-card.tone-violet { background:linear-gradient(135deg,#efefff,#fbfbff); }.goal-card.tone-orange { background:linear-gradient(135deg,#fff4e9,#fffdfb); }.goal-top { display:flex; justify-content:space-between; color:#86868b; font-size:11px; }.goal-top strong { color:#1d1d1f; font-size:25px; letter-spacing:-.06em; line-height:.8; }.goal-top small { font-size:11px; margin-left:1px; }.goal-card h3 { margin:42px 0 8px; font-size:21px; letter-spacing:-.035em; }.goal-card p { margin:0; color:#6e6e73; font-size:13px; }.progress-track { height:4px; margin-top:24px; overflow:hidden; border-radius:4px; background:rgba(29,29,31,.08); }.progress-track span { display:block; height:100%; border-radius:4px; background:var(--blue); }.tone-violet .progress-track span { background:#6e5ee8; }.tone-orange .progress-track span { background:#e87a2c; }
.todo-panel { margin-top:16px; padding:26px 27px 18px; border-radius:var(--radius); background:var(--surface); border:1px solid rgba(255,255,255,.75); }.todo-panel-head { display:flex; align-items:end; justify-content:space-between; }.todo-panel-head h3 { margin:6px 0 0; font-size:22px; letter-spacing:-.04em; }.todo-panel-head > span { color:#86868b; font-size:12px; }.todo-list { padding:0; margin:18px 0 10px; list-style:none; }.todo-list li { min-height:58px; display:flex; align-items:center; gap:13px; border-top:1px solid var(--line); }.todo-check { display:grid; place-items:center; flex:0 0 auto; width:21px; height:21px; padding:0; border:1.5px solid #9a9aa0; border-radius:50%; background:transparent; color:white; font-size:13px; transition:all .2s ease; }.todo-list li.done .todo-check { background:#1d1d1f; border-color:#1d1d1f; }.todo-title { flex:1; color:#303034; font-size:14px; }.todo-list li.done .todo-title { color:#9b9ba0; text-decoration:line-through; }.todo-due { padding:4px 8px; border-radius:12px; background:#f0f0f2; color:#77777d; font-size:10px; }.priority-high { color:#b04c19; background:#fff0e8; }.priority-low { color:#65707f; }.todo-empty { color:#86868b; font-size:13px; }.subtle-action { padding:8px 0; font-weight:600; }.subtle-action span { margin-left:5px; font-size:15px; }.subtle-action:hover { color:var(--blue); }
.portfolio-grid { display:grid; grid-template-columns:1.25fr 1fr 1fr; gap:16px; }.project-card { position:relative; display:flex; min-height:365px; overflow:hidden; padding:26px; border-radius:var(--radius); color:#fff; text-decoration:none; transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease; }.project-card:hover { transform:translateY(-5px); box-shadow:var(--shadow); }.project-0 { background:linear-gradient(140deg,#17191d,#333940); }.project-1 { background:linear-gradient(145deg,#dde8ff,#7397e3); color:#15305e; }.project-2 { background:linear-gradient(145deg,#f1e5d7,#d5a77d); color:#56391f; }.project-index { position:relative; z-index:1; font-size:11px; letter-spacing:.14em; opacity:.72; }.project-orb { position:absolute; top:48px; right:-47px; width:205px; height:205px; border-radius:50%; background:radial-gradient(circle at 36% 34%,rgba(255,255,255,.6),rgba(255,255,255,.15) 34%,rgba(255,255,255,.02) 70%); }.project-1 .project-orb { background:radial-gradient(circle at 36% 34%,rgba(255,255,255,.94),rgba(255,255,255,.25) 32%,rgba(75,120,210,.3) 70%); }.project-end { position:relative; z-index:1; align-self:flex-end; }.project-end > p { margin:0 0 7px; font-size:10px; letter-spacing:.13em; opacity:.7; }.project-end h3 { margin:0; font-size:25px; letter-spacing:-.05em; line-height:1.15; }.project-description { min-height:37px; margin:12px 0 18px!important; font-size:12px!important; line-height:1.55; letter-spacing:0!important; }.project-link { font-size:12px; font-weight:600; }.portfolio-empty { display:flex; min-height:240px; align-items:center; justify-content:space-between; gap:20px; padding:35px 40px; border:1px dashed rgba(29,29,31,.22); border-radius:var(--radius); background:rgba(255,255,255,.45); }.empty-spark { color:var(--blue); font-size:21px; }.portfolio-empty h3 { margin:9px 0 8px; font-size:24px; letter-spacing:-.04em; }.portfolio-empty p { max-width:540px; margin:0; color:var(--muted); font-size:14px; line-height:1.55; }.primary-action { border:0; border-radius:99px; padding:11px 18px; background:var(--blue); color:white; font-size:12px; font-weight:650; box-shadow:0 5px 13px rgba(0,113,227,.18); transition:background .2s ease,transform .2s ease; }.primary-action:hover { background:var(--blue-deep); transform:translateY(-1px); }.social-section { padding-top:91px; }.social-strip { display:grid; grid-template-columns:repeat(3,1fr); overflow:hidden; border-radius:var(--radius); background:var(--surface); border:1px solid rgba(255,255,255,.7); }.social-item { min-height:98px; display:flex; align-items:center; gap:12px; padding:18px 20px; color:var(--ink); text-decoration:none; border-right:1px solid var(--line); border-bottom:1px solid var(--line); transition:background .2s ease; }.social-item:nth-child(3n) { border-right:0; }.social-item:nth-last-child(-n+3) { border-bottom:0; }.social-item:hover { background:#fff; }.social-item.unavailable { opacity:.55; cursor:default; }.social-mark { display:grid; place-items:center; width:35px; height:35px; border-radius:12px; background:#1d1d1f; color:#fff; font-size:14px; font-weight:650; }.social-item:nth-child(2) .social-mark,.social-item:nth-child(5) .social-mark { background:#0071e3; }.social-item:nth-child(3) .social-mark { background:#d94f62; }.social-item:nth-child(4) .social-mark { background:#202024; }.social-item > span:nth-child(2) { display:flex; flex-direction:column; gap:3px; min-width:0; }.social-item strong { font-size:13px; }.social-item small { overflow:hidden; color:#86868b; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }.social-item b { margin-left:auto; font-size:16px; font-weight:400; }
.notes-section { padding-bottom:93px; }.heading-action { margin-bottom:0; }.notes-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }.note-card { min-height:225px; padding:24px 24px 20px; border-radius:var(--radius); background:#fff; border:1px solid rgba(29,29,31,.05); transition:transform .25s ease; }.note-card:hover { transform:translateY(-3px); }.note-meta { display:flex; justify-content:space-between; margin:0; color:#9b9ba0; font-size:10px; letter-spacing:.1em; }.note-card h3 { margin:43px 0 9px; font-size:19px; letter-spacing:-.04em; }.note-content { display:-webkit-box; overflow:hidden; margin:0; color:#6e6e73; font-size:13px; line-height:1.58; white-space:pre-line; -webkit-line-clamp:3; -webkit-box-orient:vertical; }.empty-card { display:grid; min-height:160px; place-items:center; padding:24px; border-radius:var(--radius); border:1px dashed rgba(29,29,31,.2); color:#86868b; text-align:center; }.empty-card p { margin:0 0 10px; }.empty-card button { border:0; color:var(--blue); background:transparent; font-size:12px; }.site-footer { padding:19px 0; border-top:1px solid rgba(29,29,31,.08); color:#86868b; font-size:11px; }.site-footer .shell { display:flex; justify-content:space-between; }
.modal-backdrop,.editor-backdrop { position:fixed; z-index:50; inset:0; display:grid; place-items:center; padding:20px; background:rgba(17,17,19,.36); backdrop-filter:blur(7px); }.login-card { position:relative; width:min(100%,400px); padding:35px; border-radius:25px; background:#fff; box-shadow:0 30px 80px rgba(0,0,0,.2); }.login-card h2 { margin:9px 0; font-size:29px; letter-spacing:-.05em; }.login-card > p:not(.eyebrow) { margin:0 0 23px; color:var(--muted); font-size:13px; line-height:1.5; }.modal-close { position:absolute; top:16px; right:17px; width:30px; height:30px; border:0; border-radius:50%; background:#f0f0f2; color:#555; font-size:22px; line-height:1; }.login-card label,.editor-section label { display:flex; flex-direction:column; gap:7px; color:#55555a; font-size:12px; font-weight:600; }.login-card input,.editor-section input,.editor-section textarea,.editor-section select { width:100%; padding:10px 11px; border:1px solid #d8d8dd; border-radius:10px; outline:none; background:#fff; color:#1d1d1f; font-size:13px; font-weight:400; transition:border .2s,box-shadow .2s; }.login-card input:focus,.editor-section input:focus,.editor-section textarea:focus,.editor-section select:focus { border-color:#6ba8ea; box-shadow:0 0 0 3px rgba(0,113,227,.1); }.full-action { width:100%; margin-top:19px; }.editor-backdrop { justify-items:end; padding:0; }.editor-drawer { display:flex; flex-direction:column; width:min(100%,610px); height:100%; background:#fafafa; box-shadow:-20px 0 70px rgba(0,0,0,.16); }.editor-head { position:relative; display:flex; align-items:start; justify-content:space-between; padding:30px 30px 19px; border-bottom:1px solid var(--line); }.editor-head h2 { margin:7px 0 0; font-size:30px; letter-spacing:-.05em; }.editor-head .modal-close { position:static; }.editor-tabs { display:flex; gap:5px; overflow:auto; padding:12px 24px; border-bottom:1px solid var(--line); background:#fff; }.editor-tabs button { flex:0 0 auto; border:0; border-radius:99px; padding:7px 11px; background:transparent; color:#6e6e73; font-size:12px; }.editor-tabs button.active { background:#e8f2ff; color:#0066cc; font-weight:650; }.editor-body { flex:1; overflow:auto; padding:24px 30px 36px; }.editor-section { display:flex; flex-direction:column; gap:15px; }.form-hint { margin:0 0 2px; color:#86868b; font-size:12px; }.repeat-form { position:relative; display:flex; flex-direction:column; gap:12px; padding:18px; border:1px solid #e5e5e8; border-radius:16px; background:#fff; }.repeat-form.compact { gap:10px; }.delete-item { align-self:flex-end; margin-bottom:-3px; border:0; color:#c34343; background:transparent; font-size:11px; }.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.form-row.three { grid-template-columns:1fr 1.25fr .75fr; }.check-label { justify-content:flex-end; padding-bottom:9px; }.check-label input { width:auto; }.social-form-kind { margin:0; color:#0071e3; font-size:13px; font-weight:700; }.add-item { padding:12px; border:1px dashed #9bbde5; border-radius:12px; background:#f3f8fe; color:#0066cc; font-size:12px; }.editor-foot { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:15px 24px; border-top:1px solid var(--line); background:#fff; }.editor-foot > div { display:flex; gap:11px; align-items:center; }.logout-action { color:#c34343; }.plain-action { padding:10px; }
@media (max-width:760px) { .shell { width:min(100% - 32px,1160px); }.main-nav { display:none; }.hero-section { padding-top:52px; }.hero-grid { grid-template-columns:1fr; gap:27px; }.hero-copy h1 { font-size:50px; }.focus-card { min-height:190px; }.section-block { padding-top:61px; }.section-heading { display:block; }.section-heading > p { margin-top:11px; }.goal-grid,.portfolio-grid,.notes-grid { grid-template-columns:1fr; }.project-card { min-height:270px; }.social-strip { grid-template-columns:1fr 1fr; }.social-item:nth-child(3n) { border-right:1px solid var(--line); }.social-item:nth-child(2n) { border-right:0; }.social-item:nth-last-child(-n+3) { border-bottom:1px solid var(--line); }.social-item:nth-last-child(-n+2) { border-bottom:0; }.portfolio-empty { align-items:flex-start; flex-direction:column; padding:29px; }.site-footer .shell { gap:10px; flex-direction:column; }.editor-body { padding:20px; }.editor-head { padding:25px 20px 17px; }.editor-tabs { padding:10px 15px; }.editor-foot { padding:13px 17px; }.form-row,.form-row.three { grid-template-columns:1fr; }.check-label { justify-content:flex-start; padding-bottom:0; } }
@media (max-width:410px) { .hero-copy h1 { font-size:43px; }.social-item { padding:15px 12px; }.social-mark { width:31px; height:31px; }.editor-foot { align-items:stretch; flex-direction:column; }.editor-foot > div { justify-content:flex-end; } }

/* Time, memory calendar and modal scrolling */
body { background:var(--warm); color:var(--ink); transition:background .45s ease,color .45s ease; }
#workbench-app { position:relative; min-height:100vh; overflow:clip; }
body.workbench-overlay-open { position:fixed; right:0; left:0; width:100%; overflow:hidden; }
.time-overview { display:grid; grid-template-columns:1.05fr .95fr; gap:16px; padding-top:17px; }
.time-card { position:relative; display:flex; min-height:164px; justify-content:space-between; overflow:hidden; padding:25px 27px; border:1px solid rgba(255,255,255,.78); border-radius:var(--radius); background:var(--surface); box-shadow:0 8px 28px rgba(29,29,31,.035); }
.time-card h2 { margin:12px 0 7px; font-size:clamp(27px,3.5vw,43px); line-height:1; letter-spacing:-.065em; }.time-card p:not(.eyebrow) { margin:0; color:var(--muted); font-size:12px; }
.clock-card h2 { font-variant-numeric:tabular-nums; }.time-orb { align-self:flex-end; color:var(--blue); font-size:65px; line-height:.7; opacity:.72; transform:rotate(-18deg); }
.life-card { align-items:flex-end; background:linear-gradient(135deg,#ffffff,#edf5ff); }.life-card > div { position:relative; z-index:1; }.life-number { display:flex; align-items:baseline; gap:6px; margin:11px 0 7px!important; color:var(--ink)!important; }.life-number strong { font-size:clamp(35px,4.5vw,57px); letter-spacing:-.07em; line-height:.8; }.life-number span { color:var(--blue); font-size:13px; font-weight:700; }.time-edit { position:relative; z-index:1; border:0; padding:6px 0; background:transparent; color:var(--blue); font-size:12px; font-weight:650; }
.memories-section { padding-bottom:0; }.memory-layout { display:grid; grid-template-columns:1.45fr .55fr; gap:16px; }.perpetual-card,.memory-list { border:1px solid rgba(255,255,255,.76); border-radius:var(--radius); background:var(--surface); box-shadow:0 8px 28px rgba(29,29,31,.035); }.perpetual-card { overflow:hidden; padding:24px; }
.calendar-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }.calendar-head p { margin:0 0 4px; font-size:18px; font-weight:680; letter-spacing:-.04em; }.calendar-head small { color:var(--muted); font-size:11px; }.calendar-head button { width:28px; height:28px; margin-left:5px; border:1px solid var(--line); border-radius:50%; background:#fff; color:var(--ink); font-size:14px; transition:all .2s ease; }.calendar-head button:hover { border-color:#a7cbed; color:var(--blue); }
.calendar-weekdays,.calendar-grid { display:grid; grid-template-columns:repeat(7,1fr); }.calendar-weekdays { margin-bottom:5px; color:#939398; font-size:10px; text-align:center; }.calendar-day { position:relative; display:flex; min-height:56px; flex-direction:column; align-items:center; justify-content:center; gap:2px; border-radius:12px; color:var(--ink); }.calendar-day.blank { visibility:hidden; }.calendar-day strong { display:grid; place-items:center; width:25px; height:25px; border-radius:50%; font-size:12px; font-weight:600; }.calendar-day small { color:#a0a0a5; font-size:9px; white-space:nowrap; }.calendar-day.today strong { background:var(--blue); color:#fff; }.calendar-day.remembered { background:#edf6ff; }.memory-dot { position:absolute; right:5px; top:4px; font-size:11px; }.memory-list { min-height:300px; padding:24px; }.memory-item { display:flex; align-items:center; gap:10px; padding:16px 0; border-bottom:1px solid var(--line); }.memory-item:last-child { border-bottom:0; }.memory-item > span { display:grid; place-items:center; width:33px; height:33px; border-radius:11px; background:#f0f5fb; font-size:17px; }.memory-item div { display:flex; min-width:0; flex-direction:column; gap:4px; }.memory-item strong { overflow:hidden; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }.memory-item small,.memory-empty { color:#86868b; font-size:11px; }.memory-empty { margin-top:28px; line-height:1.65; }
.editor-backdrop { overflow:hidden; overscroll-behavior:none; }.editor-drawer { height:100dvh; max-height:100dvh; }.editor-body { min-height:0; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; touch-action:pan-y; }
.form-section-title { margin:0; color:var(--ink); font-size:14px; font-weight:700; }.emoji-label { margin:0 0 7px; color:#55555a; font-size:12px; font-weight:600; }.emoji-picker { display:flex; flex-wrap:wrap; gap:6px; }.emoji-picker button { display:grid; place-items:center; width:31px; height:31px; border:1px solid #e3e3e8; border-radius:9px; background:#fafafa; font-size:16px; transition:transform .16s ease,border-color .16s ease,background .16s ease; }.emoji-picker button:hover,.emoji-picker button.active { border-color:#74afe7; background:#eef7ff; transform:translateY(-1px); }.lunar-leap { align-self:flex-start; flex-direction:row!important; align-items:center; padding:1px 0; }.lunar-leap input { width:auto!important; }
.skin-options { display:grid; grid-template-columns:1fr 1fr; gap:13px; }.skin-option { position:relative; display:flex!important; min-height:181px; overflow:hidden; padding:16px; justify-content:flex-end; border:1px solid #e4e4e8; border-radius:17px; background:#fff; cursor:pointer; transition:border .2s ease,box-shadow .2s ease,transform .2s ease; }.skin-option input { position:absolute; opacity:0; pointer-events:none; }.skin-option.selected { border-color:#5b9ee2; box-shadow:0 0 0 3px rgba(0,113,227,.1); transform:translateY(-1px); }.skin-option strong,.skin-option small { position:relative; z-index:1; }.skin-option strong { color:var(--ink); font-size:14px; }.skin-option small { margin-top:4px; color:#74747a; font-size:11px; font-weight:400; }.skin-preview { position:absolute; inset:0 0 46px; overflow:hidden; background:#f5f5f7; }.skin-preview i { position:absolute; display:block; border-radius:50%; }.skin-default .skin-preview i:nth-child(1) { width:115px; height:115px; top:-42px; right:-21px; background:#fff; }.skin-default .skin-preview i:nth-child(2) { width:84px; height:22px; right:22px; bottom:21px; border-radius:99px; background:#1d1d1f; }.skin-default .skin-preview i:nth-child(3) { width:39px; height:7px; left:20px; bottom:28px; border-radius:99px; background:#8cc2f1; }
.skin-tech-option .skin-preview { background:#050916; background-image:linear-gradient(rgba(52,181,255,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(52,181,255,.14) 1px,transparent 1px); background-size:16px 16px; }.skin-tech-option .skin-preview i:nth-child(1) { width:112px; height:112px; top:-42px; right:-18px; background:radial-gradient(circle,rgba(26,224,255,.92),rgba(68,69,255,.18) 55%,transparent 68%); animation:preview-pulse 2.7s ease-in-out infinite; }.skin-tech-option .skin-preview i:nth-child(2) { width:84px; height:4px; right:19px; bottom:26px; background:#40eaff; box-shadow:0 0 14px #40eaff; }.skin-tech-option .skin-preview i:nth-child(3) { width:38px; height:38px; left:22px; bottom:15px; border:1px solid #d4fbff; box-shadow:0 0 15px rgba(64,234,255,.85); }
.module-toggle { display:flex!important; flex-direction:row!important; align-items:center; justify-content:space-between; gap:17px; padding:15px 2px; border-bottom:1px solid var(--line); cursor:pointer; }.module-toggle:last-child { border-bottom:0; }.module-toggle span { display:flex; flex-direction:column; gap:4px; }.module-toggle strong { color:var(--ink); font-size:13px; }.module-toggle small { color:#86868b; font-size:11px; font-weight:400; }.module-toggle input { position:absolute; opacity:0; }.module-toggle i { position:relative; width:38px; height:22px; flex:0 0 auto; border-radius:999px; background:#d2d2d7; transition:background .2s ease; }.module-toggle i::after { position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.16); content:''; transition:transform .2s ease; }.module-toggle input:checked + i { background:var(--blue); }.module-toggle input:checked + i::after { transform:translateX(16px); }

/* Futuristic skin: neon grid, scanning light and translucent interface layers. */
body[data-skin="tech"] { --ink:#eaf7ff; --muted:#92aabf; --line:rgba(94,218,255,.18); --surface:rgba(8,20,42,.7); --blue:#39d8ff; --blue-deep:#14a9e7; --warm:#030713; --shadow:0 24px 70px rgba(0,0,0,.38); background:#030713; }
body[data-skin="tech"] #workbench-app::before { position:fixed; z-index:0; inset:0; pointer-events:none; background-image:linear-gradient(rgba(39,172,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(39,172,255,.055) 1px,transparent 1px),radial-gradient(circle at 78% 8%,rgba(67,44,255,.25),transparent 29%),radial-gradient(circle at 8% 37%,rgba(0,222,255,.11),transparent 24%); background-size:42px 42px,42px 42px,auto,auto; content:''; }
body[data-skin="tech"] #workbench-app::after { position:fixed; z-index:0; top:-25%; right:-8%; width:48vw; height:48vw; min-width:420px; min-height:420px; border-radius:50%; background:radial-gradient(circle,rgba(35,247,255,.12),rgba(91,77,255,.08) 34%,transparent 70%); filter:blur(3px); animation:tech-orbit 12s ease-in-out infinite alternate; pointer-events:none; content:''; }
body[data-skin="tech"] #workbench-app > .site-header,
body[data-skin="tech"] #workbench-app > main,
body[data-skin="tech"] #workbench-app > .site-footer { position:relative; z-index:1; }
body[data-skin="tech"] #workbench-app > .modal-backdrop,
body[data-skin="tech"] #workbench-app > .editor-backdrop { position:fixed; z-index:50; }
.skin-tech .site-header { background:rgba(3,7,19,.68); border-bottom-color:rgba(102,221,255,.14); }.skin-tech .brand,.skin-tech .hero-copy h1,.skin-tech .goal-top strong,.skin-tech .goal-card h3,.skin-tech .todo-title,.skin-tech .project-card,.skin-tech .social-item,.skin-tech .note-card h3,.skin-tech .section-heading h2 { color:var(--ink); }.skin-tech .brand-orb { background:linear-gradient(135deg,#48e5ff,#736bff); box-shadow:0 0 17px rgba(55,218,255,.74); }.skin-tech .main-nav a,.skin-tech .admin-trigger { color:#b2d1df; }.skin-tech .hero-copy h1 em { color:#55ddff; text-shadow:0 0 22px rgba(57,216,255,.34); }.skin-tech .hero-kicker,.skin-tech .hero-role,.skin-tech .section-heading > p,.skin-tech .goal-card p,.skin-tech .note-content { color:var(--muted); }
.skin-tech .focus-card { border:1px solid rgba(65,232,255,.42); background:linear-gradient(140deg,rgba(8,20,50,.94),rgba(12,8,38,.94)); box-shadow:0 0 0 1px rgba(77,94,255,.13),0 18px 65px rgba(0,192,255,.18); }.skin-tech .focus-card::after { position:absolute; top:0; left:-48%; width:42%; height:100%; transform:skewX(-23deg); background:linear-gradient(90deg,transparent,rgba(164,251,255,.18),transparent); animation:tech-scan 5.4s ease-in-out infinite; content:''; }.skin-tech .focus-light { background:radial-gradient(circle at 50%,rgba(27,237,255,.9),rgba(66,68,255,.35) 40%,transparent 70%); }.skin-tech .goal-card,.skin-tech .todo-panel,.skin-tech .perpetual-card,.skin-tech .memory-list,.skin-tech .time-card { border-color:rgba(73,221,255,.17); background:linear-gradient(145deg,rgba(10,27,54,.78),rgba(5,11,29,.7)); box-shadow:inset 0 1px 0 rgba(176,250,255,.07),0 12px 34px rgba(0,0,0,.19); }.skin-tech .life-card { background:linear-gradient(135deg,rgba(7,35,59,.88),rgba(20,8,55,.82)); }.skin-tech .progress-track { background:rgba(113,239,255,.14); }.skin-tech .progress-track span { background:linear-gradient(90deg,#27dfff,#756aff); box-shadow:0 0 13px rgba(39,223,255,.78); }.skin-tech .todo-list li,.skin-tech .memory-item { border-color:rgba(96,210,255,.14); }.skin-tech .todo-check { border-color:#57dcf2; }.skin-tech .todo-list li.done .todo-check { background:#38d8ff; border-color:#38d8ff; color:#04121c; }.skin-tech .todo-due { background:rgba(87,222,255,.11); color:#b7edff; }.skin-tech .project-0 { background:linear-gradient(145deg,#061f36,#12124b); }.skin-tech .project-1 { background:linear-gradient(145deg,#0a3953,#3259bc); color:#effcff; }.skin-tech .project-2 { background:linear-gradient(145deg,#231452,#096070); color:#e8fcff; }.skin-tech .social-strip,.skin-tech .note-card { border-color:rgba(72,220,255,.17); background:rgba(8,23,48,.76); }.skin-tech .social-item { border-color:rgba(72,220,255,.13); }.skin-tech .social-item:hover { background:rgba(21,55,88,.68); }.skin-tech .social-mark { background:linear-gradient(135deg,#29d7ff,#4b5fff)!important; box-shadow:0 0 14px rgba(42,216,255,.28); }.skin-tech .portfolio-empty,.skin-tech .empty-card { border-color:rgba(71,220,255,.3); background:rgba(8,23,48,.47); }.skin-tech .calendar-day.remembered { background:rgba(65,219,255,.14); }.skin-tech .calendar-head button,.skin-tech .memory-item > span { border-color:rgba(76,223,255,.23); background:rgba(17,49,81,.75); color:var(--ink); }.skin-tech .calendar-day small,.skin-tech .calendar-weekdays,.skin-tech .memory-item small { color:#8dadc2; }.skin-tech .primary-action { background:linear-gradient(115deg,#24dbff,#4f68ff); box-shadow:0 5px 22px rgba(40,215,255,.28); }.skin-tech .site-footer { border-color:rgba(84,218,255,.14); color:#85a7bc; }
.skin-tech .editor-drawer,.skin-tech .editor-tabs,.skin-tech .editor-foot { background:#071326; border-color:rgba(81,222,255,.16); }.skin-tech .editor-head { border-color:rgba(81,222,255,.16); }.skin-tech .editor-section label,.skin-tech .form-hint,.skin-tech .emoji-label { color:#b3d0e3; }.skin-tech .repeat-form { border-color:rgba(81,222,255,.15); background:rgba(12,31,58,.7); }.skin-tech .editor-section input,.skin-tech .editor-section textarea,.skin-tech .editor-section select { border-color:rgba(82,218,255,.24); background:#081a33; color:#ecfbff; }.skin-tech .editor-tabs button.active { background:rgba(52,218,255,.16); color:#81edff; }.skin-tech .module-toggle strong,.skin-tech .form-section-title { color:#effbff; }.skin-tech .skin-option { border-color:rgba(82,218,255,.19); background:#08182e; }.skin-tech .skin-option strong { color:#effbff; }.skin-tech .skin-option small { color:#9bbbd1; }
@keyframes tech-scan { 0%,20% { left:-48%; } 58%,100% { left:118%; } } @keyframes tech-orbit { from { transform:translate3d(0,0,0) scale(.92); } to { transform:translate3d(-7vw,8vh,0) scale(1.08); } } @keyframes preview-pulse { 0%,100% { transform:scale(.86); opacity:.65; } 50% { transform:scale(1.13); opacity:1; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }
@media (max-width:760px) { .time-overview,.memory-layout { grid-template-columns:1fr; }.time-card { min-height:145px; }.perpetual-card { padding:18px 13px; }.calendar-day { min-height:50px; }.calendar-day strong { font-size:11px; }.calendar-day small { transform:scale(.87); }.memory-dot { right:1px; }.skin-options { grid-template-columns:1fr; }.skin-option { min-height:151px; } }