/* Scoped to the isolated study. The same content is used on both sides. */
.screen-frame .specimen { --ink:#2c2730; --muted:#8b838f; --line:#eee9ef; --accent:#694578; background:#fffefd; font-family:Manrope,sans-serif; border:0; line-height:1.5; }
.screen-frame .spec-top { padding:16px 26px; font-size:11px; background:#fffefd; color:#8b838f; border-bottom:1px solid #eee9ef; }
.screen-frame .spec-top b,.screen-frame .spec-mark { color:#34283c; }
.screen-frame .spec-top>i { width:24px; height:24px; border-radius:50%; background:#ebe2ed; }
.screen-frame .spec-heading { padding:28px 28px 22px; }
.screen-frame .spec-heading h3 { font-family:Manrope,sans-serif; font-size:clamp(23px,4.5cqw,31px); line-height:1.18; letter-spacing:-.055em; font-weight:550; }
.screen-frame .eyebrow { font-size:10px; color:#968d99; margin-bottom:10px; }
.screen-frame .spec-filter { background:#fffefd; border:1px solid #e9e2e9; border-radius:6px; font-size:10px; padding:6px 9px; color:#746879; }
.after .spec-mark { font-size:21px; }.after .spec-top>span { border:0; padding-left:4px; }
.after .insight-metrics { margin:0 28px 26px; gap:28px; }.after .insight-metrics strong { font-size:42px; font-weight:500; letter-spacing:-.065em; margin:4px 0; }.after .insight-metrics small { font-size:10px; }.after .insight-metrics small i { font-size:9px; }
.after .insight-chart { margin:0 28px 18px; }.after .insight-chart svg { height:115px; }.after .chart-line { stroke-width:2; }.after .chart-grid { stroke-dasharray:none; }
.traffic-list { margin:0 28px 24px; font-size:10px; }.traffic-list>div { display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--line); padding:8px 0; }.traffic-list>div:first-child { color:var(--muted); font-size:9px; padding:10px 0; }.traffic-list>div:first-child strong { font-weight:500; }.traffic-list>div>span { display:flex; align-items:center; gap:8px; }.source-dot { display:block; width:6px; height:6px; border-radius:2px; background:#9f7eb6; }.traffic-list>div:nth-child(3) .source-dot { background:#c0a9cc; }.traffic-list>div:nth-child(4) .source-dot { background:#dfd1e4; }.traffic-list b { font-weight:500; font-variant-numeric:tabular-nums; }
.project-description { padding:0 28px 23px; color:#8b838f; font-size:11px; margin-top:-12px!important; }
.after .project-fields { padding:0 28px; gap:20px 16px; }.after .spec-field>span { font-size:11px; font-weight:550; margin-bottom:8px; }.after .spec-field>div { min-height:40px; padding:10px 12px; border:1px solid #e4dce6; border-radius:7px; box-shadow:0 2px 2px #24132e03; font-size:11px; }.after .spec-field .spec-textarea { min-height:86px; color:#9a8e9e; }
.after .project-options { padding:22px 28px 28px; }.after .access-choice { padding:14px; border:1px solid #e4d8e9; background:#faf6fb; border-radius:8px; gap:11px; }.after .access-choice small { font-size:10px; margin-top:2px; }.after .radio-dot { width:14px; height:14px; border:4px solid #80608e; }.after .choice-check { display:none; }.after .form-foot { margin-top:27px; }.after .form-foot>span { font-size:9px; max-width:none; }.after .spec-action { font-weight:550; font-size:11px; padding:10px 14px; background:linear-gradient(180deg,#755181,#593663); border:1px solid #593b65; border-radius:7px; box-shadow:inset 0 1px 0 #ffffff30,0 2px 3px #30203717; }
.after .board-toolbar { padding:0 28px 20px; }.after .launch-board { padding:0 20px 24px; gap:12px; }.after .board-column { background:#f5f2f6; padding:10px; border-radius:9px; }.after .task-card { padding:11px; border-radius:7px; border:1px solid #e7e0ea; box-shadow:0 3px 5px #38203c04; }.after .task-card>strong { font-size:11px; font-weight:600; letter-spacing:-.02em; }.after .task-card>small { background:none; padding:0; font-size:9px; color:#9b829f; }.after .task-card>div:not(.task-cover) { font-size:8px; }.after .task-card p { font-size:10px; }
.task-card .task-cover { display:flex; flex-direction:column; align-items:start; gap:12px; background:#e6d9ed; color:#674c7b; padding:12px; margin:0 0 12px; min-height:90px; border-radius:3px; }.task-cover>span { font-size:7px; letter-spacing:-.04em; }.task-cover>b { font-size:18px; line-height:1; letter-spacing:-.06em; font-weight:500; }.task-card .cover-icons { flex-direction:row; align-items:center; justify-content:space-between; background:#f3e6d9; color:#a17653; gap:2px; }.cover-icons>span { font-size:23px; }
.after .review-workspace { padding:0 28px 28px; gap:20px; }.after .art-preview { min-height:320px; background:radial-gradient(ellipse at 85% 25%,#e9af8955,transparent 50%),#e6d6ef; padding:20px; border-radius:6px; }.after .art-preview>strong { font-size:clamp(30px,6cqw,44px); margin-top:123px; font-weight:500; }.after .art-preview>span { font-size:8px; }.after .art-orbit { top:60px; width:190px; height:105px; right:-20px; }.after .art-orbit i { border-color:#9d73b080; }.after .review-note { margin:20px 0; gap:9px; }.after .review-note p { font-size:10px; line-height:1.7; }.after .review-note b { font-size:10px; }.after .review-status { background:#f6efdf; color:#a18a4d; border-radius:20px; font-size:9px; }
/* Intentionally inconsistent before examples: same content, visibly ungoverned UI. */
.screen-frame .before { --line:#bfc1c4; --muted:#626262; --accent:#275d9c; background:#eaeaea; color:#292929; font-family:Arial,sans-serif; }
.screen-frame .before .spec-top { color:#fff; background:#294963; border:0; padding:9px 13px; font-size:10px; }.screen-frame .before .spec-top b,.screen-frame .before .spec-mark { color:#fff; }.screen-frame .before .spec-top>i { border-radius:0; background:#c7d4e1; color:#254056; }
.screen-frame .before .spec-heading { padding:17px 13px 9px; }.screen-frame .before .spec-heading h3 { font:bold 23px/1.2 Arial,sans-serif; letter-spacing:0; }.screen-frame .before .eyebrow { color:#555; margin-bottom:4px; font-size:10px; }.screen-frame .before .spec-filter { border:1px solid #999; border-radius:0; background:#ddd; color:#222; padding:4px 6px; }
.screen-frame .before.specimen-form { background:#f0f0e5; }.screen-frame .before.specimen-form .spec-top { background:#d0d7c7; color:#33432a; border-bottom:4px solid #778469; }.screen-frame .before.specimen-form .spec-top b,.screen-frame .before.specimen-form .spec-mark { color:#33432a; }
.screen-frame .before .project-description { padding:0 13px 12px; color:#666; font-size:10px; margin:0!important; }.screen-frame .before .project-fields { padding:0 13px; gap:7px; }.screen-frame .before .spec-field { grid-template-columns:95px minmax(0,1fr); }.screen-frame .before .spec-field>span { font:12px/1.3 Arial,sans-serif; color:#333; }.screen-frame .before .spec-field>div { background:#fff; border:1px solid #8b8b8b; border-radius:0; box-shadow:inset 1px 2px 3px #0002; min-height:29px; padding:5px; font:11px Arial,sans-serif; }.screen-frame .before .spec-field:nth-child(2)>div { border-radius:14px; border:2px solid #8da6bf; min-height:43px; margin-left:17px; }.screen-frame .before .spec-field .spec-textarea { min-height:67px; border:2px inset #c6c6bb; background:#fffef3; }.screen-frame .before .project-options { padding:27px 13px 15px 22px; }.screen-frame .before .access-choice { background:#dce3d3; border:1px solid #9fa997; border-radius:0; padding:8px 5px; gap:5px; }.screen-frame .before .access-choice small { font-size:10px; color:#4f584a; }.screen-frame .before .spec-action { background:#28689b; border:2px outset #91b4cd; border-radius:0; text-transform:uppercase; font:bold 11px Arial,sans-serif; padding:6px 8px; }.screen-frame .before .form-foot { margin-top:13px; flex-direction:row-reverse; }.screen-frame .before .form-foot>span { color:#555; font:10px Arial,sans-serif; }
.screen-frame .before .insight-metrics { gap:7px; margin:0 13px 9px; }.screen-frame .before .insight-metrics>div { border:1px solid #929ba9; border-radius:0; background:#d2dce9; padding:8px; }.screen-frame .before .insight-metrics>div+div { background:#e6dfc7; border-radius:12px; margin-top:15px; padding:5px 12px; }.screen-frame .before .insight-metrics strong { font:bold 27px/1.2 Arial; margin:12px 0 5px; letter-spacing:0; }.screen-frame .before .insight-metrics>div+div strong { font:normal 36px Georgia,serif; }.screen-frame .before .insight-metrics small { color:#333; }.screen-frame .before .insight-chart { margin:9px 13px 0 22px; border:2px solid #b2b2b2; border-radius:0; background:#fff; padding:6px; }.screen-frame .before .chart-grid { stroke:#bbb; stroke-dasharray:none; }.screen-frame .before .chart-line { stroke:#d97c28; stroke-width:4; }.screen-frame .before .traffic-list { margin:12px 13px; border:1px solid #aaa; background:#f4f4f4; }.screen-frame .before .traffic-list>div { padding:7px; }.screen-frame .before .traffic-list>div:nth-child(even) { background:#ddd; }
.screen-frame .before.specimen-board .spec-top { background:#d9bd88; color:#48391f; border-bottom:3px solid #ab8751; }.screen-frame .before.specimen-board .spec-top b,.screen-frame .before.specimen-board .spec-mark { color:#48391f; }.screen-frame .before .board-column { background:#c9cbd0; border-radius:0; padding:5px; }.screen-frame .before .board-column:nth-child(2) { background:#d9d7ca; }.screen-frame .before .task-card { background:#fffedb; border:1px solid #a6a696; border-radius:0; box-shadow:2px 2px 0 #0002; padding:7px; }.screen-frame .before .task-card>small { background:#efbe69; color:#332a19; border-radius:0; }.screen-frame .before .column-name { font:bold 10px Arial; color:#292929; }.screen-frame .before .task-card .task-cover { background:#d9d3e1; color:#665d70; border-radius:0; padding:6px; min-height:74px; }.screen-frame .before .task-cover>b { font:bold 16px/1 Arial; letter-spacing:0; }.screen-frame .before .task-card .cover-icons { background:#e4d9b7; color:#8b6c36; }.screen-frame .before .task-card>strong { font:bold 12px Arial; }.screen-frame .before .task-card p { color:#333; }
.screen-frame .before.specimen-review .spec-top { background:#505050; }.screen-frame .before .review-workspace { padding:0 13px 18px; gap:7px; }.screen-frame .before .review-notes { border:1px solid #999; background:#fff; padding:7px; border-radius:0; }.screen-frame .before .art-preview { background:#d4c7df; min-height:280px; border-radius:0; padding:10px; }.screen-frame .before .art-preview>strong { font:bold 26px/1.05 Arial; letter-spacing:0; margin-top:60px; }.screen-frame .before .review-note { border-bottom:1px dotted #888; margin:9px 0; padding-bottom:7px; }.screen-frame .before .review-note p { font:11px/1.4 Arial; color:#333; }.screen-frame .before .review-status { background:#ffe784; border:1px solid #b6a04f; border-radius:0; color:#41380f; }
@container(max-width:440px) {
 .screen-frame .spec-heading { padding:24px 20px 18px; }.after .project-fields { padding-inline:20px; }.after .project-options { padding:20px; }.project-description { padding-inline:20px; }.after .form-foot { gap:8px; }.after .form-foot>span { max-width:16ch; }.after .spec-action { padding:9px; gap:8px; }
 .after .insight-metrics { margin-inline:20px; gap:16px; }.after .insight-metrics strong { font-size:35px; }.after .insight-chart,.traffic-list { margin-inline:20px; }.after .review-workspace { padding-inline:20px; }.after .art-preview { min-height:260px; }.after .art-preview>strong { margin-top:100px; }
 .after .launch-board { padding-inline:12px; gap:6px; }.after .board-column { padding:6px; }.after .task-card { padding:8px; }.task-card .task-cover { padding:9px; }.task-cover>b { font-size:15px; }.cover-icons>span { font-size:18px; }
}