.appearance { margin-top:64px; padding-top:56px; border-top:1px solid var(--line); }
.appearance-heading { display:flex; align-items:end; justify-content:space-between; gap:32px; margin-bottom:30px; }
.appearance-heading .eyebrow { color:var(--orange,#efb083); margin-bottom:20px; }
.appearance-heading h3 { font-size:clamp(35px,3.8vw,56px); line-height:1.07; letter-spacing:-.055em; }
.appearance-heading>p { max-width:365px; color:#b2c0c7; font-size:17px; line-height:1.65; }
.appearance-lab { display:grid; grid-template-columns:minmax(0,1fr); border:1px solid #344048; border-radius:14px; overflow:hidden; background:#0c1115; }
.appearance.is-ready .appearance-lab { grid-template-columns:268px minmax(0,1fr); grid-template-areas:"controls scene"; }
.appearance-scene { --ap-tile:.58; --ap-chrome:.357; --ap-content:.416; --ap-workspace:.7; --ap-image:.84; position:relative; display:flex; flex-direction:column; justify-content:space-between; min-width:0; min-height:585px; margin:0; padding:24px clamp(16px,3vw,44px) 22px; isolation:isolate; background-color:#000; }
.is-ready .appearance-scene { grid-area:scene; }
.appearance-scene[data-theme="ocean"] { background-image:radial-gradient(circle,rgba(222,245,244,.13) 1px,transparent 1.2px),radial-gradient(ellipse at 50% 112%,rgba(29,112,108,.42),transparent 55%),linear-gradient(160deg,#10161b 0%,#0c171a 48%,#080b0f 100%); background-size:20px 20px,100% 100%,100% 100%; }
.appearance-scene[data-theme="graphite"] { background-image:radial-gradient(circle,rgba(235,237,244,.1) 1px,transparent 1.2px),linear-gradient(135deg,rgba(255,255,255,.018),transparent 48%),linear-gradient(145deg,#101115 0%,#090a0d 100%); background-size:20px 20px,100% 100%,100% 100%; }
.appearance-scene-top { display:flex; flex-wrap:wrap; gap:10px 18px; justify-content:space-between; color:#abbac0; font-size:11px; letter-spacing:.055em; }
.appearance-scene-top>span:first-child { display:flex; align-items:center; gap:8px; }
.appearance-scene-top i { width:6px; height:6px; background:var(--accent); border-radius:50%; box-shadow:0 0 14px #71dac855; }
.appearance-workspace { position:relative; isolation:isolate; overflow:hidden; margin:32px 0; border:1px solid #b6c6d14a; border-radius:13px; background:rgba(19,24,29,var(--ap-workspace)); box-shadow:0 30px 65px #0008,0 1px 0 #ffffff0a inset; }
.appearance-wallpaper { position:absolute; inset:0; z-index:-1; width:100%; height:100%; object-fit:cover; opacity:var(--ap-image); transition:opacity .18s; pointer-events:none; }
.appearance-wallpaper[hidden] { display:none; }
.appearance-workspace-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:17px 19px; color:#e9ecea; background:#05090d30; border-bottom:1px solid #ffffff13; }
.appearance-workspace-heading>span:first-child { display:flex; align-items:center; gap:9px; font-size:14px; font-weight:500; }
.appearance-workspace-heading svg { width:18px; height:18px; stroke:#d8e0df; stroke-width:1.4; stroke-linejoin:round; }
.appearance-workspace-heading>.mono { color:#bbc5c9; font-size:10px; letter-spacing:.07em; }
.appearance-tiles { position:relative; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:16px; padding:24px 20px 28px; align-items:start; }
.appearance-tile { min-width:0; overflow:hidden; border:1px solid #b4bec24a; border-radius:9px; background:rgba(7,10,13,var(--ap-tile)); box-shadow:0 18px 30px #0004; transition:background-color .12s; }
.appearance-notes { margin-top:34px; }
.appearance-tile-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px; background:rgba(11,16,21,var(--ap-chrome)); border-bottom:1px solid #ffffff18; font-size:12px; }
.appearance-tile-heading>span:first-child { display:flex; align-items:center; gap:7px; }
.appearance-tile-heading svg { width:16px; height:16px; stroke:#b2c6d4; stroke-width:1.3; }
.appearance-terminal-icon { color:var(--accent); font:14px var(--mono); }
.appearance-tile-dots { color:#9ba9b2; font-size:10px; letter-spacing:2px; }
.appearance-tile-content { min-height:218px; padding:16px 14px 19px; background:rgba(9,13,18,var(--ap-content)); }
.appearance-terminal .appearance-tile-content { font:12px/1.65 var(--mono); overflow-wrap:anywhere; }
.appearance-terminal .appearance-tile-content p { margin:0 0 9px; }
.appearance-terminal-path { color:#adc0ce; }
.appearance-prompt { color:#86ded0; margin-right:6px; }
.appearance-terminal .appearance-terminal-ready { color:#8ce2c8; margin-top:16px; }
.appearance-terminal-url { color:#aebec8; }
.appearance-terminal-url span { color:#d6e0e5; }
.appearance-terminal-rule { height:1px; background:#d7e5ed26; margin:17px 0; }
.appearance-terminal .appearance-terminal-comment { color:#b4c2cb; font-size:11px; }
.appearance-terminal-cursor { display:inline-block; width:6px; height:12px; background:#d3dedd; vertical-align:-1px; }
.appearance-notes .appearance-tile-content { min-height:192px; }
.appearance-note-label { color:#e5b792; font-size:9px; letter-spacing:.05em; }
.appearance-notes h4 { margin:12px 0; font-size:clamp(20px,2vw,28px); line-height:1.15; letter-spacing:-.035em; font-weight:500; }
.appearance-notes .appearance-tile-content>p:not(.appearance-note-label) { color:#c0cbd0; font-size:12px; line-height:1.6; }
.appearance-note-tag { display:inline-block; margin-top:18px; padding:4px 7px; border:1px solid #ffffff26; border-radius:4px; color:#d6bda5; font-size:10px; }
.appearance-workspace-foot { display:flex; justify-content:space-between; gap:14px; padding:0 19px 16px; color:#e0d5c9; text-shadow:0 1px 7px #000; font-size:10px; letter-spacing:.04em; }
.appearance-workspace-foot>span:first-child { color:#c8c5c0; }
.appearance-workspace-foot [aria-hidden] { margin-left:6px; }
.appearance-scene>figcaption { color:#9cabb2; font-size:11px; line-height:1.6; }
.appearance-controls { grid-area:controls; min-width:0; padding:20px; border-right:1px solid #2d3941; background:#10161a; }
.appearance-controls[hidden] { display:none; }
.appearance-control-heading { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:24px; }
.appearance-control-heading>.mono { color:#a8b7bf; font-size:12px; letter-spacing:.04em; }
.appearance button { font:inherit; cursor:pointer; touch-action:manipulation; }
.appearance-control-heading button { min-height:36px; padding:4px 0 4px 5px; color:#b2c0c7; border:0; background:none; font-size:14px; }
.appearance-control-heading button:hover { color:var(--text); }
.appearance-control-group { min-width:0; border:0; padding:0; margin:0 0 23px; }
.appearance-control-group:last-child { margin-bottom:0; }
.appearance-control-group legend { padding:0; margin-bottom:12px; color:#e0e5e5; font-size:14px; }
.appearance-control-group legend>.mono { margin-right:9px; color:#798c98; font-size:10px; }
.appearance-themes { display:grid; gap:3px; }
.appearance-themes button { display:flex; align-items:center; gap:9px; width:100%; min-height:40px; padding:7px 8px; border:1px solid transparent; border-radius:6px; background:transparent; color:#afbdc5; text-align:left; font-size:14px; }
.appearance-themes button:hover { background:#ffffff05; color:#eef0ec; }
.appearance-themes button[aria-pressed="true"] { background:#719fea0b; border-color:#719fea40; color:#ecf0ef; }
.appearance-swatch { width:24px; height:20px; flex:none; border:1px solid #71838d50; border-radius:4px; }
.appearance-swatch-black { background:#000; }
.appearance-swatch-ocean { background:radial-gradient(ellipse at bottom,#285958,#0b161d); }
.appearance-swatch-graphite { background:linear-gradient(145deg,#303139,#0a0b0d); }
.appearance-selected { margin-left:auto; color:#91b7ee; visibility:hidden; }
[aria-pressed="true"]>.appearance-selected { visibility:visible; }
.appearance-images { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.appearance-images button { min-width:0; padding:0 0 5px; border:1px solid transparent; border-radius:6px; overflow:hidden; background:transparent; color:#aebdc5; font-size:12px; }
.appearance-images button[aria-pressed="true"] { border-color:#dba57e; background:#efb0830b; color:#f2cdb1; }
.appearance-images button:hover { color:#f2f1ea; background:#ffffff07; }
.appearance-image-swatch { display:block; height:39px; margin-bottom:5px; background-size:cover; background-position:center; }
.appearance-image-hue { background-image:url('assets/hue3.jpg'); }
.appearance-image-ember { background-image:url('assets/appearance-ember.jpg'); }
.appearance-image-none { display:flex; align-items:center; justify-content:center; background:#080d11; color:#869ba9; font-size:20px; }
.appearance-upload { display:flex; align-items:center; justify-content:center; gap:7px; width:100%; min-height:44px; padding:9px 5px; margin-top:12px; border:1px solid #35444e; border-radius:6px; color:#d1dce0; background:#ffffff03; font-size:14px!important; }
.appearance-upload:hover { border-color:#7a99a7; background:#ffffff08; }
.appearance-upload svg { width:16px; height:16px; flex:none; stroke:#a7bac6; stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; }
.appearance-local-note { margin-top:7px; color:#9fafb8; font-size:12px; line-height:1.5; }
.appearance-range-label { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:14px; color:#b4c3ca; }
.appearance-range-label output { color:#dfb38f; font:12px var(--mono); }
.appearance-transparency input[type="range"] { display:block; width:100%; margin:8px 0 16px; accent-color:#e7af85; height:20px; cursor:ew-resize; }
.appearance-transparency input[type="range"]:last-of-type { margin-bottom:4px; }
.appearance-range-scale { display:flex; justify-content:space-between; color:#9aaeba; font-size:10px; letter-spacing:.03em; }
.appearance :is(button,input):focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.appearance-footer { display:flex; justify-content:space-between; gap:12px 28px; margin-top:18px; color:#acbdc5; font-size:13px; line-height:1.6; }
.appearance-footer [role="status"] { max-width:470px; color:#9dafbb; text-align:right; }
.appearance-footer [data-error="true"] { color:#efb083; }
.appearance:not(.is-ready) [data-appearance-status] { display:none; }
.appearance-no-script { margin-top:10px; color:#9dafbb; font-size:13px; }
@media (min-width:1440px) { .appearance-scene { padding-inline:52px; } .appearance-tiles { padding:26px 28px 35px; gap:24px; } .appearance-tile-content { padding:20px; } }
@media (max-width:1100px) {
  .appearance-heading { align-items:start; flex-direction:column; gap:20px; }
  .appearance-heading>p { max-width:600px; }
  .appearance.is-ready .appearance-lab { grid-template-columns:minmax(0,1fr); grid-template-areas:"scene" "controls"; }
  .appearance-scene { min-height:530px; padding-inline:clamp(20px,6vw,70px); }
  .appearance-controls { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; padding:22px; border-top:1px solid #2d3941; border-right:0; }
  .appearance-control-heading { grid-column:1/-1; margin-bottom:0; }
  .appearance-control-group { margin-bottom:0; }
  .appearance-tile-content { min-height:218px; }
  .appearance-transparency legend { margin-bottom:20px; }
}
@media (max-width:700px) {
  .appearance { margin-top:44px; padding-top:36px; }
  .appearance-heading h3 { font-size:clamp(35px,7.8vw,52px); }
  .appearance-heading { margin-bottom:24px; }
  .appearance-scene { min-height:490px; padding:20px 15px; }
  .appearance-tiles { gap:10px; padding:16px 12px 24px; }
  .appearance-tile-content { padding:13px 10px; }
  .appearance-tile-heading { padding:9px; }
  .appearance-workspace-heading { padding:14px; }
  .appearance-notes h4 { font-size:21px; }
  .appearance-controls { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 18px; padding:20px; }
  .appearance-transparency { grid-column:1/-1; }
  .appearance-transparency legend { margin-bottom:12px; }
  .appearance-footer { flex-direction:column; gap:6px; }
  .appearance-footer [role="status"] { text-align:left; }
}
@media (max-width:440px) {
  .appearance-controls { grid-template-columns:minmax(0,1fr); }
  .appearance-themes { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
  .appearance-themes button { flex-direction:column; align-items:start; gap:6px; padding:8px; font-size:13px; }
  .appearance-selected { display:none; }
  .appearance-swatch { width:100%; height:25px; }
  .appearance-image-swatch { height:50px; }
  .appearance-workspace { margin:25px 0; }
  .appearance-workspace-heading>.mono { font-size:8px; }
  .appearance-tiles { grid-template-columns:minmax(0,1fr); }
  .appearance-notes { margin-top:0; }
  .appearance-terminal .appearance-tile-content { min-height:0; }
  .appearance-terminal .appearance-terminal-comment,.appearance-terminal-rule { display:none; }
  .appearance-notes .appearance-tile-content { min-height:0; padding:13px; }
  .appearance-notes h4 { margin:7px 0 0; font-size:20px; }
  .appearance-notes h4 br { display:none; }
  .appearance-notes .appearance-tile-content>p:not(.appearance-note-label),.appearance-note-tag { display:none; }
  .appearance-workspace-foot { padding-inline:13px; font-size:9px; }
  .appearance-scene>figcaption { font-size:10px; }
}
@media (prefers-reduced-motion:reduce) { .appearance-wallpaper,.appearance-tile { transition:none; } }