/* ===================================================================================================== 12u/12v/12w — the owner's dark theme. 12w: two grounds (فحم, أسود حبري) × two card styles (paper / dark): 1 فحم+ورق · 2 فحم+داكن · 3 حبري+ورق · 4 حبري+داكن. Aziz (12v): in EVERY look the cards stay paper-white on a dark ground; eight grounds to choose from (html[data-dark="1..8"], look.js). Replaces the old navy (round 6). Neutral only: black, greys, graphite. Every colour is a token here; the rest of the site already draws with the tokens (garden.css, hobbies.css, games.css, sudoku.css, journal.css, studio-b.css), so a look is mostly its token table. Light mode is untouched: every rule below needs data-theme="dark". 1 «فحم» charcoal: near-black page, raised surfaces, cards become dark surfaces, pictures dimmed a touch 2 «جرافيت» graphite: a softer grey page, warm words, lower contrast, very calm 3 «ورق على ليل» paper on night: only the page ground, header, footer and words on the page go dark; every card, tile and panel keeps its light self (white cards, their own colours, ink inside) 4 «أسود حبري» true black (OLED): #000 page, crisp white words, accents kept The Sudoku page can be dark for anyone (its own setting, look.js); its board stays white paper by default (html[data-sd-board="light"]). ===================================================================================================== */ /* ---- the ground: «فحم» (1 paper cards, 2 dark cards) */ html[data-look="garden"][data-theme="dark"]:is([data-dark="1"],[data-dark="2"],:not([data-dark])){ --bg:#0D0E10; --tile:#17181B; --tile-2:#1F2024; --sand:#28292D; --paper:#1A1B1E; --sage-wash:#17181B; --ink:#ECECEC; --ink-2:#B9BABE; --ink-3:#8C8D92; --olive:#ECECEC; --moss:#FFFFFF; --sage:#3A3B40; --clay:#D69A72; --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14); --field:#131416; --stage:#08090A; --on-gold:#0D0E10; --danger:#EE927C; --dk-shadow:rgba(0,0,0,.62); --dk-img:brightness(.92); --dk-sel:rgba(236,236,236,.20); --dk-sky:#0D0E10; --dk-board:#F4F4F2; --dk-scrollbar:#3A3B40; --tag-filter:#1F2A1D; --tag-filter-ink:#C9DEBB; --tag-espresso:#252438; --tag-espresso-ink:#D0CEF0; --tag-now:#33271D; --tag-now-ink:#EFC39C; --tag-perfume:#30232B; --tag-perfume-ink:#E9C3D7; --tag-other:#1F262B; --tag-other-ink:#C2DCEC; --g-sudoku:#46AA72; --g-sudoku-ink:#8FD3AC; --g-sudoku-wash:#16241C; --g-cross:#5B93D1; --g-cross-ink:#A9C8F0; --g-cross-wash:#1B2026; --g-flags:#D27A60; --g-flags-ink:#F0B9A6; --g-flags-wash:#2A1E1A; --g-tracks:#A58BD0; --g-tracks-ink:#CDBDED; --g-tracks-wash:#221D2A; } /* ---- shared by every look: the names the older stylesheets use, mapped onto the look's tokens */ html[data-look="garden"][data-theme="dark"]{ --card:var(--tile); --fg:var(--ink); --muted:var(--ink-2); --tint:var(--sand); --tint-fg:var(--ink); --gold:var(--olive); --gold-text:var(--ink); --trail:var(--line-2); --shadow:var(--dk-shadow); --canvas:var(--bg); --canvas-line:var(--line); --rule:var(--line); --pattern:transparent; --ice:rgba(255,255,255,.03); --live:var(--olive); --live-text:var(--ink); --stone:var(--sand); --lichen:var(--ink-2); --scrim:rgba(0,0,0,.5); --mood-accent:var(--clay); --ok:#5CC08A; --sh-lift:0 12px 24px -14px var(--dk-shadow); --sh-pop:0 14px 32px -14px var(--dk-shadow),0 0 0 1px var(--line-2); --cc-bg:var(--tile); --cc-back:var(--paper); --cc-filter:var(--tag-filter); --cc-filter-ink:var(--tag-filter-ink); --cc-espresso:var(--tag-espresso); --cc-espresso-ink:var(--tag-espresso-ink); --cc-now:var(--tag-now); --cc-now-ink:var(--tag-now-ink); --cc-perfume:var(--tag-perfume); --cc-perfume-ink:var(--tag-perfume-ink); --cc-product:var(--tag-other); --cc-product-ink:var(--tag-other-ink); --cc-other:var(--tag-other); --cc-other-ink:var(--tag-other-ink); --g-tile2:var(--tile-2); --g-paper:var(--paper); --g-sand:var(--sand); --g-line2:var(--line-2); --g-danger:var(--danger); --g-sheet-bg:var(--paper); --g-sd-easy:#9BDDB4; --g-sd-medium:#46AA72; --g-sd-hard:#1F7A4B; --g-sd-empty:var(--tile-2); --g-sd-div:var(--line-2); --g-sd-dot:var(--g-sudoku-ink); --dk-edge:0 0 0 1px rgba(255,255,255,.06); --dk-focus-scrim:rgba(0,0,0,.46); color-scheme:dark; scrollbar-color:var(--dk-scrollbar) var(--bg); } html[data-look="garden"][data-theme="dark"] body{background:var(--bg);color:var(--ink)} html[data-look="garden"][data-theme="dark"] ::selection{background:var(--dk-sel);color:inherit} html[data-look="garden"][data-theme="dark"] :focus-visible{outline-color:var(--olive)} /* ---- header and chrome */ html[data-look="garden"][data-theme="dark"] .top > .wrap :is(.nav,.site-nav){box-shadow:none;background:color-mix(in srgb,var(--bg) 60%,transparent)} html[data-look="garden"][data-theme="dark"] .top > .wrap :is(.nav,.site-nav) a[aria-current="page"]{background:var(--tile-2)!important} html[data-look="garden"][data-theme="dark"] .top > .wrap .kg-write{box-shadow:none} html[data-look="garden"][data-theme="dark"] :is(.acc-menu,.acct-menu,.gear-menu,.share-pop,.pa-pop,.kg-menu,.kh-bar,.kh-ctl){box-shadow:0 18px 40px -20px var(--dk-shadow)} html[data-look="garden"][data-theme="dark"] .kq-fly{box-shadow:none;background:color-mix(in srgb,var(--bg) 92%,transparent)} html[data-look="garden"][data-theme="dark"] :is(.acc-chip i,.acct summary .acct-pic,.acc-me i,.acc-me .acct-pic){background-color:var(--sand);color:var(--ink)} /* the switch: a night sky in the look's own grey (no blue), a soft white moon */ html[data-look="garden"][data-theme="dark"] .kg-dark-sw[aria-checked="true"]{--sky:var(--dk-sky);--moon:#F2F2F0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.10)} html[data-look="garden"][data-theme="dark"] .kg-dark-sw:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)} /* «سجل الهوايات»: its green sprout, lighter */ html[data-look="garden"][data-theme="dark"] .kg-write.kg-hlog{color:var(--g-sudoku-ink);border-color:var(--line-2)!important} html[data-look="garden"][data-theme="dark"] .kg-write.kg-hlog svg{stroke:var(--g-sudoku)} html[data-look="garden"][data-theme="dark"] .kg-write.kg-hlog .lf{fill:color-mix(in srgb,var(--g-sudoku) 26%,transparent)} html[data-look="garden"][data-theme="dark"] .kg-write.kg-hlog:hover .lf{fill:var(--g-sudoku)} html[data-look="garden"][data-theme="dark"] .kq-fly .kq-log svg :is(.lf,.stem){stroke:var(--g-sudoku)} /* footer: the trail and the penguin's dune in the quiet grey */ html[data-look="garden"][data-theme="dark"] .foot .trail{opacity:.5} html[data-look="garden"][data-theme="dark"] .floe{background:color-mix(in srgb,var(--ink) 12%,transparent)} /* the skip link: the accent with its own dark words */ html[data-look="garden"][data-theme="dark"] .skip{background:var(--olive);color:var(--on-gold)} /* ---- buttons in the accent: light, with dark words */ html[data-look="garden"][data-theme="dark"] :is(.btn.gold,.sec-btn.gold){background:var(--olive);border-color:var(--olive);color:var(--on-gold)!important} html[data-look="garden"][data-theme="dark"] :is(.btn.gold,.sec-btn.gold):hover{background:var(--moss);border-color:var(--moss)} html[data-look="garden"][data-theme="dark"] :is(.kh-btn.is-ink,.kh-flash){background:var(--olive);border-color:var(--olive);color:var(--on-gold)} html[data-look="garden"][data-theme="dark"] .kh-btn.is-ink:hover{background:var(--moss)} html[data-look="garden"][data-theme="dark"] :is(.door-tag,.tool.studio .door-tag),html[data-look="garden"][data-theme="dark"] .kc-chip.is-ready{background:var(--tag-other);color:var(--tag-other-ink)} html[data-look="garden"][data-theme="dark"] :is(.soon-tool .chip,.kc-chip.is-soon){background:var(--tag-now);color:var(--tag-now-ink)} html[data-look="garden"][data-theme="dark"] .kc-book.is-type{color:var(--on-gold)} /* ---- the drawings: their ink is the words colour, their paper the surface they sit on */ html[data-look="garden"][data-theme="dark"] .mood{--card:var(--tile)} html[data-look="garden"][data-theme="dark"] :is(.kc-art,.kc-soon-list) .mood{--card:var(--tile)} html[data-look="garden"][data-theme="dark"] .tool .tool-art .mood{--card:var(--sage-wash)} html[data-look="garden"][data-theme="dark"] .soon-tool .tool-art .mood{--card:var(--sand)} html[data-look="garden"][data-theme="dark"] .mood text[fill="#13202E"]{fill:var(--on-gold)} /* ---- pictures: no harsh white. A touch dimmer in 1, 2 and 4 (full brightness while pointed at); placeholders in the surface colour. Low specificity on purpose: any filter a picture already has (stickers, hovers) wins. */ :where(html[data-theme="dark"]) :where(.kc,.cc,.pc,.prose,.article,.hlog-item,.lcard,.pp-thumb,.kc-pimg,.bk-cover) img:where(:not(.kg-sticker)){filter:var(--dk-img,none);transition:filter .3s ease} :where(html[data-theme="dark"]) :where(.kc,.cc,.pc,.prose,.hlog-item):where(:hover) img:where(:not(.kg-sticker)){filter:none} html[data-look="garden"][data-theme="dark"] .kg-sticker{filter:drop-shadow(var(--ow) 0 0 var(--ol)) drop-shadow(calc(var(--ow) * -1) 0 0 var(--ol)) drop-shadow(0 var(--ow) 0 var(--ol)) drop-shadow(0 calc(var(--ow) * -1) 0 var(--ol)) drop-shadow(0 6px 12px rgba(0,0,0,.45))} html[data-look="garden"][data-theme="dark"] .bk-cover img{box-shadow:0 1px 2px rgba(0,0,0,.4),0 10px 22px -10px rgba(0,0,0,.7)} /* ---- 4 «أسود حبري»: on true black a card needs its hairline to exist at all */ /* ---- hobby cards */ html[data-look="garden"][data-theme="dark"] :is(.cc-back,.pf-framed .cc-front){box-shadow:inset 0 0 0 1px var(--line)} html[data-look="garden"][data-theme="dark"] .cc-mark{color:color-mix(in srgb,var(--ink) 7%,transparent)} html[data-look="garden"][data-theme="dark"] :is(.cc-roaster,.cc-tag) {box-shadow:none} html[data-look="garden"][data-theme="dark"] .pf-dots i{box-shadow:inset 0 0 0 1.4px color-mix(in srgb,var(--ink) 30%,transparent)} html[data-look="garden"][data-theme="dark"] .cc-ph{background:color-mix(in srgb,var(--ink) 4%,transparent);box-shadow:inset 0 0 0 1px var(--line)} /* card focus: the page is already dark, so it recedes with a softer veil and the same blur */ html[data-look="garden"][data-theme="dark"] .cf-scrim{background:var(--dk-focus-scrim)} html[data-look="garden"][data-theme="dark"] .cf-layer .cc.cf-on{--cf-in:inset 0 0 0 1px var(--line-2)} /* ---- the today's-sudoku card on the home: a paper board, like the game itself */ html[data-look="garden"][data-theme="dark"] .kc-board{background:#3A3D41;box-shadow:0 10px 24px -16px var(--dk-shadow)} html[data-look="garden"][data-theme="dark"] .kc-board > span{background:#C3C8CE} html[data-look="garden"][data-theme="dark"] .kc-board i{background:var(--dk-board);color:#111315} html[data-look="garden"][data-theme="dark"] .kc-board i.pm{background:color-mix(in srgb,#2E8B57 calc(var(--h) * 18%),var(--dk-board))} html[data-look="garden"][data-theme="dark"] .kc-board i.pm::after{color:#6B6F75} html[data-look="garden"][data-theme="dark"] .kc-board i.g::before{background:#6B6F75} /* ---- the games (الورشة, الألعاب, ألعابي) */ html[data-look="garden"][data-theme="dark"] :is(.g-badge,.g-badge-big) svg .g-bt{fill:var(--on-gold)} html[data-look="garden"][data-theme="dark"] .g-day.selected .g-day-tile .g-bars{box-shadow:0 4px 10px -6px var(--dk-shadow)} /* ---- the blog: reading on the dark */ html[data-look="garden"][data-theme="dark"] .prose{color:var(--ink)} html[data-look="garden"][data-theme="dark"] .prose a{color:var(--ink);text-decoration-color:color-mix(in srgb,var(--ink) 45%,transparent)} html[data-look="garden"][data-theme="dark"] .prose a:hover{text-decoration-color:var(--ink)} html[data-look="garden"][data-theme="dark"] .prose blockquote{border-inline-start-color:var(--line-2);color:var(--ink-2)} html[data-look="garden"][data-theme="dark"] :is(.prose,.ProseMirror) pre{background:var(--tile);color:var(--ink);border:1px solid var(--line)} html[data-look="garden"][data-theme="dark"] :is(.prose,.ProseMirror) :not(pre) > code{background:var(--tile-2);color:var(--ink)} html[data-look="garden"][data-theme="dark"] :is(.prose,.ProseMirror) mark{background:color-mix(in srgb,#E8C46A 32%,transparent);color:var(--ink)} html[data-look="garden"][data-theme="dark"] :is(.prose,.ProseMirror) hr{border-color:var(--line-2)} html[data-look="garden"][data-theme="dark"] .article.custom-canvas{background:var(--post-canvas-dark,var(--bg))} /* ---- the Writing Room and the editors */ html[data-look="garden"][data-theme="dark"] .pp-sw i::after{background:#F2F2F0} html[data-look="garden"][data-theme="dark"] .pp-sw[aria-checked="true"] i::after{background:var(--bg)} html[data-look="garden"][data-theme="dark"] .pp-pop{box-shadow:0 18px 40px -16px var(--dk-shadow),0 0 0 1px var(--line-2)} html[data-look="garden"][data-theme="dark"] .pp-pop.pp-sheet{box-shadow:0 0 0 1px var(--line-2)} html[data-look="garden"][data-theme="dark"] .pp-mi.danger{color:var(--danger)} html[data-look="garden"][data-theme="dark"] .pp-scrim{background:var(--scrim)} html[data-look="garden"][data-theme="dark"] .pp-status.live i{background:var(--ok)} html[data-look="garden"][data-theme="dark"] .ed-props{box-shadow:-24px 0 48px -36px var(--dk-shadow)} html[data-look="garden"][data-theme="dark"] .kg-tabs-lab{box-shadow:0 12px 30px -14px var(--dk-shadow),0 0 0 1px var(--line-2)} html[data-look="garden"][data-theme="dark"] .kg-edit{box-shadow:0 30px 70px -30px var(--dk-shadow),0 0 0 1px var(--line-2)} html[data-look="garden"][data-theme="dark"] .kg-edit::backdrop{background:var(--scrim)} html[data-look="garden"][data-theme="dark"] dialog::backdrop{background:var(--scrim)} /* ---- Lyric Studio */ html[data-look="garden"][data-theme="dark"] :is(.editor,.library,.account,dialog.sheet) .btn.danger{background:var(--danger);color:var(--on-gold)} html[data-look="garden"][data-theme="dark"] .pp-rows > .check input:checked::after{background:var(--bg)} html[data-look="garden"][data-theme="dark"] :is(.results,.ls-pop){box-shadow:0 18px 40px -16px var(--dk-shadow),0 0 0 1px var(--line-2)} html[data-look="garden"][data-theme="dark"] .ls-pop .ls-mi.danger{color:var(--danger)} html[data-look="garden"][data-theme="dark"] .ls-scrim{background:var(--scrim)} html[data-look="garden"][data-theme="dark"] .pp-rows > .swatch input[type=color]::-webkit-color-swatch{box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)} html[data-look="garden"][data-theme="dark"] :is(.presets.looks .preset-sw,.ph-tile,.lcard .thumb){box-shadow:inset 0 0 0 1px var(--line)} /* ---- the Sudoku page */ html[data-look="garden"][data-theme="dark"] .sudoku{ --sd-peer:var(--tile-2); --sd-same:color-mix(in srgb,var(--g-sudoku) 24%,var(--paper)); --sd-sel:color-mix(in srgb,var(--g-sudoku) 40%,var(--paper)); --sd-sel-ring:var(--g-sudoku); --sd-clash-ink:#FF9C8A; --sd-clash-bg:color-mix(in srgb,var(--danger) 22%,var(--paper)); --sd-region:color-mix(in srgb,var(--g-sudoku) 12%,var(--paper)); --sd-cell:var(--paper); --sd-thin:var(--line-2); --sd-thick:var(--ink-3); --sd-given:var(--ink); --sd-mine:var(--g-sudoku-ink); --sd-note:var(--ink-2); --sd-auto:var(--ink-3)} /* «لوح أبيض على خلفية داكنة» (Aziz, the default of Sudoku's dark): the 9×9 board is white paper with ink digits and the light-mode grid; only the page around it is dark */ html[data-look="garden"][data-theme="dark"]:not([data-sd-board="dark"]) .sudoku .sd-board{ --sd-peer:#EEF0F2; --sd-same:#DDEFE2; --sd-sel:#BFE3CB; --sd-sel-ring:#2E8B57; --sd-clash-ink:#A4442B; --sd-clash-bg:#F6E1DA; --sd-region:#EEF7F0; --sd-cell:var(--dk-board); --sd-thin:#DADCDF; --sd-thick:#111315; --sd-given:#111315; --sd-mine:#1F6B43; --sd-note:#3A3D41; --sd-auto:#6B6F75; --g-sudoku:#2E8B57; --g-danger:#A4442B; --ink:#111315; --fg:#111315; color:#111315; border-color:#111315; box-shadow:0 0 0 1px rgba(255,255,255,.08),0 22px 48px -28px var(--dk-shadow)} html[data-look="garden"][data-theme="dark"] .sudoku .sd-paused{background:color-mix(in srgb,var(--bg) 62%,transparent)} html[data-look="garden"][data-theme="dark"] :is(.sd-mode button[aria-checked="true"],.sd-modetoast,.sd-toast){background:var(--ink);color:var(--bg)} html[data-look="garden"][data-theme="dark"] .sd-key{box-shadow:inset 0 -1px 0 var(--line-2)} html[data-look="garden"][data-theme="dark"] .sudoku :is(.top,.foot){background:var(--bg);color:var(--ink);border-color:var(--line)} html[data-look="garden"][data-theme="dark"] .sudoku .top{background:color-mix(in srgb,var(--bg) 72%,transparent)} html[data-look="garden"][data-theme="dark"] .sd-done-in{box-shadow:0 26px 60px -30px var(--dk-shadow),inset 0 0 0 1px var(--line-2)} /* ===================================================================================================== 3 «ورق على ليل»: the light islands. Every card, tile and panel gets the light tokens back (and so its light look); the page, the header, the footer and the words on the page stay dark. A faint edge and a soft shadow lift the paper off the night. ===================================================================================================== */ html[data-look="garden"][data-theme="dark"]:is([data-dark="1"],[data-dark="3"],:not([data-dark])) :is(.kc,.cc,.pc,.tool,.soon-tool,.g-card,.g-gamecard,.g-tile,.g-act,.g-sheet,.g-confirm,.g-badge-face, .hlog-add,.hlog-pop,.pa-tile,.pa-pop,.sub-band,.pp-pop,.kg-edit,dialog,.sd-menu,.sd-why,.sd-done-in,.sd-pad,.sd-mode,.sd-undo,.sd-hint, .hlog-stats .stat,.lcard,.results,.ls-pop,.kc-chip.is-sample){ --bg:#FDFDFD; --tile:#F6F6F7; --tile-2:#F0F1F2; --sand:#E9EAEC; --paper:#FFFFFF; --sage-wash:#F0F1F2; --ink:#111315; --ink-2:#3A3D41; --ink-3:#6B6F75; --olive:#111315; --moss:#000000; --sage:#DADCDF; --clay:#9A5A36; --line:#ECEDEF; --line-2:#DADCDF; --scrim:rgba(10,12,14,.30); --sh-lift:0 12px 24px -14px rgba(15,20,25,.30); --sh-pop:0 14px 32px -14px rgba(15,20,25,.28),0 0 0 1px #ECEDEF; --card:#F6F6F7; --field:#FFFFFF; --fg:#111315; --muted:#3A3D41; --tint:#E9EAEC; --tint-fg:#000000; --gold:#111315; --on-gold:#fff; --gold-text:#111315; --trail:#DADCDF; --shadow:rgba(15,20,25,.18); --danger:#A4442B; --canvas:#FFFFFF; --canvas-line:#ECEDEF; --rule:#ECEDEF; --stage:#F0F1F2; --live:#111315; --live-text:#111315; --stone:#DADCDF; --lichen:#3A3D41; --ok:#2E8B57; --tag-filter:#E3EEDB; --tag-filter-ink:#2F4A1E; --tag-espresso:#E6E4F6; --tag-espresso-ink:#2E2B66; --tag-now:#F6E3D4; --tag-now-ink:#6B3410; --tag-perfume:#F1E3EC; --tag-perfume-ink:#5A2E4A; --tag-other:#DDEEF7; --tag-other-ink:#1E4A6B; --g-sudoku:#2E8B57; --g-sudoku-ink:#1F6B43; --g-sudoku-wash:#DDEFE2; --g-cross:#2F6FB0; --g-cross-ink:#24548A; --g-cross-wash:#DCE8F5; --g-flags:#B4533A; --g-flags-ink:#8E3F2B; --g-flags-wash:#F5E0D8; --g-tracks:#7B5EA7; --g-tracks-ink:#5E4785; --g-tracks-wash:#ECE6F5; --cc-bg:#F6F6F7; --cc-back:#FFFFFF; --cc-filter:#E3EEDB; --cc-filter-ink:#2F4A1E; --cc-espresso:#E6E4F6; --cc-espresso-ink:#2E2B66; --cc-now:#F6E3D4; --cc-now-ink:#6B3410; --cc-perfume:#F1E3EC; --cc-perfume-ink:#5A2E4A; --cc-product:#DDEEF7; --cc-product-ink:#1E4A6B; --cc-other:#DDEEF7; --cc-other-ink:#1E4A6B; --g-tile2:#F0F1F2; --g-paper:#FFFFFF; --g-sand:#E9EAEC; --g-line2:#DADCDF; --g-danger:#A4442B; --g-sheet-bg:#FFFFFF; --g-sd-easy:#A8D8B9; --g-sd-medium:#2E8B57; --g-sd-hard:#14522F; --g-sd-empty:#F0F1F2; --g-sd-div:#C3C8CE; --g-sd-dot:#1F6B43; --mood-accent:#9A5A36; --dk-img:none; color-scheme:light; } /* the islands that have no colour of their own get their ink back */ html[data-look="garden"][data-theme="dark"]:is([data-dark="1"],[data-dark="3"],:not([data-dark])) :is(.pp-pop,.kg-edit,dialog,.sd-menu,.sd-why,.g-sheet,.hlog-pop,.pa-pop,.results,.ls-pop){color:var(--ink)} /* the paper lifts off the night: a faint edge and a soft shadow */ html[data-look="garden"][data-theme="dark"]:is([data-dark="1"],[data-dark="3"],:not([data-dark])) :is(.kgrid,.kc-posts,.kc-list) > .kc, html[data-look="garden"][data-theme="dark"]:is([data-dark="1"],[data-dark="3"],:not([data-dark])) :is(#hobbyGrid,.cc-grid) > .cc, html[data-look="garden"][data-theme="dark"]:is([data-dark="1"],[data-dark="3"],:not([data-dark])) :is(.pc,.tool,.soon-tool,.g-tile,.g-act,.g-gamecard,.hlog-add,.pa-tile,.sub-band,.hlog-stats .stat){box-shadow:var(--dk-edge),0 14px 34px -22px rgba(0,0,0,.75)} html[data-look="garden"][data-theme="dark"]:is([data-dark="1"],[data-dark="3"],:not([data-dark])) .kgrid > .kc-hcard{box-shadow:none} html[data-look="garden"][data-theme="dark"]:is([data-dark="1"],[data-dark="3"],:not([data-dark])) .kgrid > .kc-hcard > .cc{box-shadow:var(--dk-edge),0 14px 34px -22px rgba(0,0,0,.75);border-radius:var(--r-card)} html[data-look="garden"][data-theme="dark"]:is([data-dark="1"],[data-dark="3"],:not([data-dark])) :is(.cc-back,.pf-framed .cc-front){box-shadow:inset 0 0 0 1px var(--line)} html[data-look="garden"][data-theme="dark"]:is([data-dark="1"],[data-dark="3"],:not([data-dark])) .cc-mark{color:color-mix(in srgb,var(--ink) 6%,transparent)} html[data-look="garden"][data-theme="dark"]:is([data-dark="1"],[data-dark="3"],:not([data-dark])) .mood{--card:var(--bg)} html[data-look="garden"][data-theme="dark"]:is([data-dark="1"],[data-dark="3"],:not([data-dark])) :is(.kc-art,.kc-soon-list) .mood{--card:var(--bg)} html[data-look="garden"][data-theme="dark"]:is([data-dark="1"],[data-dark="3"],:not([data-dark])) .tool .tool-art .mood{--card:var(--bg)} html[data-look="garden"][data-theme="dark"]:is([data-dark="1"],[data-dark="3"],:not([data-dark])) .mood text[fill="#13202E"]{fill:#13202E} html[data-look="garden"][data-theme="dark"]:is([data-dark="1"],[data-dark="3"],:not([data-dark])) :is(.door-tag,.tool.studio .door-tag,.kc-chip.is-ready){background:var(--tag-other);color:var(--tag-other-ink)} html[data-look="garden"][data-theme="dark"]:is([data-dark="1"],[data-dark="3"],:not([data-dark])) :is(.btn.gold,.sec-btn.gold):is(.kc *,.tool *,.pc *,dialog *,.kg-edit *,.pp-pop *){background:var(--olive);border-color:var(--olive);color:#fff!important} html[data-look="garden"][data-theme="dark"]:is([data-dark="1"],[data-dark="3"],:not([data-dark])) .kc-board{background:var(--ink-3);box-shadow:none} html[data-look="garden"][data-theme="dark"]:is([data-dark="1"],[data-dark="3"],:not([data-dark])) .kc-board > span{background:var(--line-2)} html[data-look="garden"][data-theme="dark"]:is([data-dark="1"],[data-dark="3"],:not([data-dark])) .kc-board i{background:var(--paper)} html[data-look="garden"][data-theme="dark"]:is([data-dark="1"],[data-dark="3"],:not([data-dark])) .kc-board i.pm{background:color-mix(in srgb,var(--g-sudoku) calc(var(--h) * 18%),var(--paper))} html[data-look="garden"][data-theme="dark"]:is([data-dark="1"],[data-dark="3"],:not([data-dark])) :is(.sd-mode button[aria-checked="true"]){background:var(--ink);color:#fff} html[data-look="garden"][data-theme="dark"]:is([data-dark="1"],[data-dark="3"],:not([data-dark])) .sd-key{box-shadow:inset 0 -1px 0 var(--g-line2)} html[data-look="garden"][data-theme="dark"]:is([data-dark="1"],[data-dark="3"],:not([data-dark])) :is(.g-badge,.g-badge-big) svg .g-bt{fill:#fff} html[data-look="garden"][data-theme="dark"]:is([data-dark="1"],[data-dark="3"],:not([data-dark])) .pp-sw[aria-checked="true"] i::after{background:#fff} html[data-look="garden"][data-theme="dark"]:is([data-dark="1"],[data-dark="3"],:not([data-dark])) .pp-pop{box-shadow:0 18px 40px -16px rgba(0,0,0,.7)} /* ---- the chip that switches the four looks (owner, ?dark=1..4) */ .kg-dark-lab{position:fixed;z-index:96;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:2px;padding:4px 6px 4px 12px; background:var(--paper,#fff);color:var(--ink,#111315);box-shadow:0 12px 30px -14px rgba(15,20,25,.35),0 0 0 1px var(--line-2,#DADCDF);border-radius:var(--r-card,8px)!important;font:400 13px var(--font,inherit);direction:rtl} html[data-theme="dark"] .kg-dark-lab{box-shadow:0 12px 30px -14px rgba(0,0,0,.7),0 0 0 1px var(--line-2)} body:has(.kg-tabs-lab) .kg-dark-lab{bottom:calc(72px + env(safe-area-inset-bottom,0px))} .kg-dark-lab-t{color:var(--ink-3);margin-inline-end:4px} .kg-dark-lab button{width:36px;height:36px;padding:0;border:0;background:none;color:var(--ink-2);font:500 15px var(--font,inherit);cursor:pointer;border-radius:var(--r-ctl,6px)!important} .kg-dark-lab button:hover{background:var(--tile-2)} .kg-dark-lab button[aria-pressed="true"]{background:var(--ink);color:var(--bg)} .kg-dark-lab button:focus-visible{outline:2px solid var(--ink);outline-offset:2px} .kg-dark-lab-n{min-width:5.5em;margin-inline-start:6px;padding-inline-end:6px;color:var(--ink-2);white-space:nowrap} @media (max-width:420px){.kg-dark-lab{left:8px;bottom:calc(8px + env(safe-area-inset-bottom,0px))}.kg-dark-lab-n{min-width:0}} html[data-look="garden"][data-theme="dark"]:is([data-dark="1"],[data-dark="3"],:not([data-dark])) .hlog-stats .stat[aria-pressed="true"]{box-shadow:0 0 0 3px rgba(255,255,255,.22)} html[data-look="garden"][data-theme="dark"]:is([data-dark="1"],[data-dark="3"],:not([data-dark])) .kc.kc-sudoku.kc{--ink-3:#5E6268} /* 12w: dark cards (2, 4) — a hairline keeps each card's edge on the ground */ html[data-look="garden"][data-theme="dark"]:is([data-dark="2"],[data-dark="4"]) :is(.kgrid,.kc-posts,.kc-list) > .kc:not(.kc-hcard), html[data-look="garden"][data-theme="dark"]:is([data-dark="2"],[data-dark="4"]) :is(.pc,.tool,.soon-tool,.g-tile,.hlog-add,.pa-tile,.sub-band){box-shadow:inset 0 0 0 1px var(--line)} html[data-look="garden"][data-theme="dark"]:is([data-dark="2"],[data-dark="4"]) .cc:not(.pf-full,.ot-full) .cc-front{box-shadow:inset 0 0 0 1px var(--line)} /* 12w: the moon disc is the page's own ground, with a hairline so it still reads as a button */ html[data-look="garden"][data-theme="dark"] .kg-dark-sw[aria-checked="true"]{--sky:var(--bg);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)} .ed-top .kg-dark-sw-ed{flex:none;margin-inline-start:12px;align-self:center} /* 12x: the cards switch — only while dark, beside the moon; a pair of cards, the right one filled when cards are dark */ .kg-cards-sw{display:none} html[data-theme="dark"] .kg-cards-sw{flex:none;display:inline-grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);color:var(--ink-2);cursor:pointer;transition:color .15s,box-shadow .15s} html[data-look="garden"][data-theme="dark"] .kg-cards-sw{border-radius:50%!important} html[data-theme="dark"] .kg-cards-sw:hover{color:var(--ink);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)} html[data-theme="dark"] .kg-cards-sw:focus-visible{outline:2px solid var(--ink);outline-offset:2px} .kg-cards-sw svg{width:17px;height:17px;fill:#F4F4F2;stroke:#F4F4F2;stroke-width:1.4;stroke-linejoin:round} .kg-cards-sw[aria-checked="true"] svg{fill:none} .kg-cards-sw[aria-checked="true"] svg .kg-cards-b{fill:#3A3B40} /* 13s (Aziz): dark cards (2) are plain cards a hair lighter than the page — no sheen, no gradient; a faint edge only */ html[data-look="garden"][data-theme="dark"][data-dark="2"]{--cc-bg:#111214;--cc-back:#111214} html[data-look="garden"][data-theme="dark"][data-dark="2"] :is(.kgrid,.kc-posts,.kc-list) > .kc:not(.kc-sudoku), html[data-look="garden"][data-theme="dark"][data-dark="2"] :is(.pc,.tool,.soon-tool,.hlog-add,.pa-tile,.sub-band), html[data-look="garden"][data-theme="dark"][data-dark="2"] .cc-face{background-color:#111214;background-image:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)!important}